uni-app动画

<view :animation="animations" style="position:absolute;background:#333;width:30px;height:30px;top:30px;left:0;border-radius: 50%;"></view> -->

var animation = uni.createAnimation({
	 // transformOrigin: "ease-in", 50%,100%(x,y) 动画开始点
	duration: 1000, //动画持续1秒
	timingFunction: 'linear',  //linear 全程匀速运动
	delay:0  //延迟两秒执行动画
})
// 循环动画
setInterval(()=> {
	animation.translateX(100).opacity(1).translateY(50).opacity(0).step({duration:1500})
	animation.translateX(0).opacity(0).translateY(0).opacity(1).step({duration:1500})
	this.animations = animation.export()
},3000)

点击查看代码

<template>
    <view class="content">
        <!-- <view class="test2" :style="{ top: newTop + 'rpx' }" @touchend="touchendTest" @touchstart="touchstartTest" @touchmove="touchmoveTest"
         :animation="animationData"></view> -->
        <!-- <view class="test3 animate__bounceInUp"></view> -->
		<!-- <view :animation="animations" style="position:absolute;background:#333;width:30px;height:30px;top:30px;left:0;border-radius: 50%;"></view> -->
    </view>
</template>

<script>
	import aaa from './aaa.vue'
    export default {
		components:{aaa},
        data() {
            return {
                pageY: 0, //触摸点
                offsetTop: 0, //偏移量
                newTop: 200,
                show: false,
                animationData: {},
				animations: {},
                off: false,
				test: "123"
            };
        },
        onLoad() {
			var animation = uni.createAnimation({
			    // transformOrigin: "ease-in",
			    duration: 1000, //动画持续1秒
			    timingFunction: 'linear',  //linear 全程匀速运动
			    delay:0  //延迟两秒执行动画
			})
			
			// this.animate1(animation)
			this.animate2(animation)
			setInterval(()=> {
				// this.animate1(animation)
				this.animate2(animation)
			},3000)
			
		},
        onShow() {
            // 初始化一个动画
            var animation = uni.createAnimation({
                transformOrigin: "ease-in",
                duration: 100, //动画持续1秒
                // timingFunction: 'linear',  //linear 全程匀速运动
                // delay:300  //延迟两秒执行动画
            })
            this.animation = animation
			setTimeout(()=> {
				this.test++
				this.test = JSON.stringify(this.test)
			},1000)
        },
        methods: {
			animate1 (animation) {
				animation.translateY(5).step({duration:1500})
				animation.translateY(-5).step({duration:1500})
				this.animations = animation.export()
			},
			animate2 (animation) {
				animation.translateX(100).opacity(1).translateY(50).opacity(0).step({duration:1500})
				animation.translateX(0).opacity(0).translateY(0).opacity(1).step({duration:1500})
				// animation.translateX(0).opacity(1).step({duration:1500})
				// animation.translateY(0).step({duration:1500})
				this.animations = animation.export()
			},
            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="scss" scoped>
    .content {
        position: relative;
    }

    .test1 {
        width: 750rpx;
        height: 700rpx;
        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>