uni-app 中使用动画-animation

设置动画执行动画的标签

<view class="undone-order" :animation="animationData"  >
    <view class="t-content">
        您有未完成的订单!
    </view>
</view>

先初始化一个动画

<script>
    var timer = null ; //创建一个定时器
    export default {
            data() {
                return {
                    animation:'',
                    animationData: {},
                    isStop:true
                };
        },
        onShow() {
            // 初始化一个动画
            var animation = uni.createAnimation({
                transformOrigin: "50% 0 50%",  
                duration: 1000,  //动画持续1秒
                timingFunction: 'linear',  //linear 全程匀速运动
                delay:200  //延迟两秒执行动画
            })
            this.animation = animation
            if (this.isStop) {
                // 使用动画
                this.scaleAndScale()
                timer = setInterval(()=>{  //创建定时器,3秒执行异一次
                    this.scaleAndScale()
                    console.log('每三秒执行一次 , 达到往复运动的效果')
                },3000)
            } else {
                this.noscaleAndScale()
            }
        },
       onHide() { //在页面隐藏时也要清除定时器  
        if(timer){
                console.log('清除定时器-' + timer)
                clearInterval(timer)
            }
        },
        onUnload(){ //在页面卸载时清除定时器 避免出现多个定时器连续创建动画
            if(timer){
                console.log('清除定时器-' + timer)
                clearInterval(timer)
            }
        },
        methods:{
            // 定义动画内容
            scaleAndScale() {
                // 定义动画内容
                this.animation.scale(1.2, 1.2).step() //先放大1,2倍
                this.animation.scale(1, 1).step() //缩小至原来的大小
                // 导出动画数据传递给data层
                this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
            },
            noscaleAndScale() {
                this.animation.scale(1, 1).step()
                this.animationData = this.animation.export()
            },
        }
    }
</script>

最后别忘啦在页面隐藏和页面卸载时清除定时器 ~