uniapp转场动画怎么做

1. 简介

uniapp是一个跨平台的开发框架，它支持将代码编译为微信小程序、H5、App等多个端，大大降低了开发成本和难度。而在uniapp中，转场动画是一个非常重要的功能，可以提升应用的用户体验。本文将介绍如何在uniapp中实现转场动画。

2. 基本概念

在介绍具体实现方法之前，先来了解一下uniapp中转场动画的基本概念。

2.1 navigateTo和redirectTo

在uniapp中，我们可以使用navigateTo和redirectTo方法进行页面跳转。其中，navigateTo是普通的跳转方式，而redirectTo则是重定向方式，跳转后无法回退。这两种跳转方式的使用方法如下所示：

// navigateTo方式：
uni.navigateTo({
    url: '/pages/myPage/myPage'
});
// redirectTo方式：
uni.redirectTo({
    url: '/pages/myPage/myPage'
});

2.2 animation动画

在uniapp中，我们可以使用animation动画实现页面的转场效果。animation动画支持多种样式，如translate、opacity等，使用方法如下所示：

// 创建一个animation实例
let animation = uni.createAnimation({
    duration: 500, // 动画持续时间
    timingFunction: 'ease' // 动画效果
});
// 设置animation样式
animation.translateX(100).step();
// 将animation样式导出为数据
let animationData = animation.export();

3. 实现方法

了解完基本概念之后，我们就可以开始实现转场动画。下面将介绍两种实现方式。

3.1 直接使用navigateTo和redirectTo实现动画

这种方式比较简单，直接在跳转页面的方法中使用animation动画即可。其中，需要注意的是，redirectTo方式跳转时无法回退，因此在进行跳转时需要将当前页面的animation样式设置好。

// 当前页面设置animation样式
let currentAnimation = uni.createAnimation({
    duration: 500,
    timingFunction: 'ease'
});
currentAnimation.translateX(-100).step();
let currentAnimationData = currentAnimation.export();
// 跳转页面并设置animation样式
let nextPageAnimation = uni.createAnimation({
    duration: 500,
    timingFunction: 'ease'
});
nextPageAnimation.translateX(100).step();
let nextPageAnimationData = nextPageAnimation.export();
// 跳转页面
uni.redirectTo({
    url: '/pages/myPage/myPage',
    animationType: 'slide-out-right',
    animationDuration: 500,
    animationTimingFunc: 'ease',
    animationData: {
        // 当前页面的animation样式
        myPage: currentAnimationData,
        // 下一个页面的animation样式
        'pages/myPage/myPage': nextPageAnimationData
    }
});

需要注意的是，redirectTo方式需要将animation样式设置到跳转页面的animationData中。

3.2 在APP.vue中全局监听navigator跳转事件并添加动画

这种方式比较复杂，需要在APP.vue中全局监听navigator跳转事件，并在回调函数中获取当前页面和目标页面的路径，然后进行animation动画的设置。

// 在APP.vue文件中注册事件监听器
onShow () {
    uni.onNavigatorChange((res) => {
        let currentPath = getCurrentPages()[0].route;
        let targetPath = res.url.substring(1);
        if (currentPath === targetPath) {
            return;
        }
        let currentAnimation = uni.createAnimation({
            duration: 500,
            timingFunction: 'ease'
        });
        currentAnimation.translateX(-100).step();
        let currentAnimationData = currentAnimation.export();
        let nextPageAnimation = uni.createAnimation({
            duration: 500,
            timingFunction: 'ease'
        });
        nextPageAnimation.translateX(100).step();
        let nextPageAnimationData = nextPageAnimation.export();
        let animationType = res.delta === 1 ? 'slide-in-right' : 'slide-out-right';
        let animationData = {};
        animationData[currentPath] = currentAnimationData;
        animationData[targetPath] = nextPageAnimationData;
        setTimeout(() => {
            uni.navigate({
                url: '/' + targetPath,
                animationType,
                animationDuration: 500,
                animationTimingFunc: 'ease',
                animationData
            });
        });
    });
}

需要注意的是，targetPath需要去掉第一个斜杠字符。同时，由于onNavigatorChange回调函数是异步执行的，因此需要使用setTimeout方法延迟执行跳转方法。

4. 总结

在uniapp中实现转场动画，有多种方式可供选择。在实际开发中，我们可以根据需求和场景选择不同的实现方式。希望本文的介绍可以帮助到大家。