uniapp隐藏页面动画-猿码集

uniapp隐藏页面动画

为提高用户的交互体验，开发者一般都会在应用中增加一些动画效果，比如页面切换时的渐变、上下滑动、左右移动等等。但是有时候我们需要让一些页面在切换时不展示过渡动画，这时候就需要用到uniapp的隐藏页面动画功能。

1. 如何控制页面的转场动画？

在uniapp中，我们可以利用页面的生命周期函数进行页面转场动画的控制。其中，目标页面的onShow生命周期函数中可以获取到一个animation对象，进而控制页面切换时的动画效果。

以下是一个利用animation对象的例子：


// pages/index/index.vue
onShow() {
  const animation = uni.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  });
  this.animation = animation;
  
  // 执行动画效果
  animation.opacity(1).step();


  setTimeout(() => {
    this.setData({
      animationData: animation.export()
    })
  }, 100);
}

代码中我们利用onShow生命周期函数中获取到的animation对象，实例化了一个动画，设定了持续时间500ms以及缓动函数为'ease-out'。接着我们通过animation.opacity(1).step()来描述动画效果，即透明度从0变为1。

在setData函数中，我们把动画组合并输出，就可以让动画效果在页面显示的时候起作用了。需要注意的是，由于需要等待动画初始化渲染完成后，才可执行setData输出动画组合，因此需要加上一个setTimeout延时。

2. 如何隐藏页面转场动画？

根据前面介绍的方式，我们可以轻松地控制页面转场动画。但是对于一些特殊场景，我们可能需要在某些页面之间进行切换时，去掉页面转场动画，这时候就需要用到uniapp的隐藏页面转场动画功能了。

**步骤一：取消目标页面的进场动画**

我们通过以下代码来取消目标页面的进场动画：


// pages/detail/detail.vue
onLoad() {
  uni.hideLoading();
}
onShow() {
  uni.nextTick(() => {
    const pages = getCurrentPages();
    const currPage = pages[pages.length - 1];
    const prevPage = pages[pages.length - 2];
    const prevAnimation = prevPage.animation;
  
    // 取消目标页面的进场动画
    prevAnimation.translateX('100%').step({ duration: 0 });
    this.setData({animationData: prevAnimation.export()});
  });
}

代码中，我们首先在onLoad生命周期函数中取消了页面的加载动画。然后在onShow生命周期函数中通过uni.nextTick延迟到页面渲染后再执行其它代码。接着，我们获取到目标页面的前一页和当前页，将前一页的animation对象定义为prevAnimation，并通过prevAnimation.translateX('100%').step({duration：0})将目标页面的进场动画设定为从右侧移入，并且持续时间为0。

最后用setData函数将动画组合并输出，在页面显示时达到取消页面转场动画的目的。

3. 如何取消返回时的转场动画？

当你需要取消返回时的转场动画，可以通过uni.navigateBack()方法的 second 参数，来指定转场动画的效果。以下几个值可以选择：

- 'auto'：自动选择转场动画，默认为 uni-app 定义的转场动画

- 'none'：无动画立刻返回

- 'slide-out-right'：从左边划出页面后返回

- 'slide-out-left'：从右边划出页面后返回

- 'slide-out-top'：从顶部划出页面后返回

- 'slide-out-bottom'：从底部划出页面后返回

- 'fade-out'：从不透明到透明后返回

- 'zoom-fade-out'：从大变小并且透明后返回

- 'pop-out'：从小变大并且透明后返回

- 'pop-in'：从大变小后返回

以下是一个例子：


uni.navigateBack({
  delta: 1,
  animationType: 'none',
})

代码中我们通过animationType参数指定了返回时的转场动画效果为'none'，既无转场动画，立刻返回。

4. 如何让页面消失时有动画效果？

当我们从一个页面切换到另一个页面时，有时候需要让原来的页面有一个消失动画效果，以下是一个例子：


onHide() {
  const animation = uni.createAnimation({
    duration: 800,
    timingFunction: 'ease-in',
  });
  this.animation = animation;
  
  animation.opacity(0).step();
  
  this.setData({animationData: animation.export()});
}

代码中我们在onHide生命周期函数中获取一个animation对象，设定了持续时间800ms以及缓动函数为'ease-in'。接着我们通过animation.opacity(0).step()来描述动画效果，即透明度从1变为0。

最后通过setData函数将动画组合并输出，从而实现消失动画效果。

5. 总结

通过以上介绍，我们可以发现，在uniapp中实现隐藏页面动画非常简单，只要掌握好页面生命周期函数和animation对象的使用，就可以实现各种自定义的动画效果。

uniapp隐藏页面动画