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对象的使用，就可以实现各种自定义的动画效果。