如何在uni-app 中使用动画-animation

参考文档：https://uniapp.dcloud.io/api/ui/animation?id=createanimation

1.dom元素中添加:animation="animationData"

<template>
    <view class="content">
        <view class="test1"></view>

        <view class="test2" :style="{ top: newTop + 'rpx' }" @touchend="touchendTest" @touchstart="touchstartTest" @touchmove="touchmoveTest"
         :animation="animationData"></view>
        <view class="test3 animate__bounceInUp"></view>
    </view>
</template>

2.js中相应添加

<script>
    export default {
        data() {
            return {
                pageY: 0, //触摸点
                offsetTop: 0, //偏移量
                newTop: 200,
                show: false,
                animationData: {},
                off: false
            };
        },
        onLoad() {},
        onShow() {
            // 初始化一个动画
            var animation = uni.createAnimation({
                transformOrigin: "ease-in",
                duration: 100, //动画持续1秒
                // timingFunction: 'linear',  //linear 全程匀速运动
                // delay:300  //延迟两秒执行动画
            })
            this.animation = animation
        },
        methods: {
            touchendTest() {
                // console.log('开始回弹动画');
                this.newTop = 200;
                this.scaleAndScale()
            },
            touchstartTest(e) {
                // console.log('点击触发动作');
                this.newTop = 200;
                this.pageY = e.changedTouches[0].pageY * 2;
            },
            touchmoveTest(e) {
                // console.log('开始移动');
                if (e.changedTouches[0].pageY * 2 - this.pageY < 200) {
                    this.newTop = 200;
                    return;
                }
                this.newTop = e.changedTouches[0].pageY * 2 - this.pageY;
                if (this.newTop > 500) {
                    this.newTop = 500;
                    return;
                }
            },

            scaleAndScale() {
                if (this.off) {
                    // 使用动画
                    this.rotateAndScale()
                } else {
                    this.norotateAndScale()
                }
                this.off = !this.off
            },
            rotateAndScale() {
                // 定义动画内容 偏移
                this.animation.translateY(-20).step() 
                this.animation.translateY(10).step() 
                this.animation.translateY(-5).step() 
                this.animation.translateY(0).step() 
                // 导出动画数据传递给data层
                this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
            },
            norotateAndScale() {
                this.animation.translateY(-22).step()
                this.animation.translateY(12).step()
                this.animation.translateY(-7).step()
                this.animation.translateY(0).step()
                // 导出动画数据传递给data层
                this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
            }
        }
    };
</script>
<style lang="less" scoped>
    .content {
        position: relative;
    }

    .test1 {
        width: 750rpx;
        height: 400rpx;
        background-color: #007aff;
    }

    .test2 {
        width: 750rpx;
        height: 1900rpx;
        background-color: #4cd964;
        z-index: 20;
        position: absolute;
    }

    .test3 {
        margin-top: 500rpx;
        width: 200rpx;
        height: 200rpx;
        background-color: #333;
        animation: bounceInUp;
    }
</style>

注：uniapp 运行在手机版本中会出现问题，相同动画只能运行一次