uniapp自动执行动画+点赞升级版

<template><view><view :animation="animationData" class="fonts">+1</view></view></template><script>var timer = null ; //创建一个定时器export default {...

huxihua2006

1269人浏览 · 2020-08-24 14:41:05

huxihua2006 · 2020-08-24 14:41:05 发布

<template>
   <view>
      <view :animation="animationData" class="fonts">
          +1
      </view>
   </view>
</template>
<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('每三秒执行一次 , 达到往复运动的效果')
},1500)
}
},
onHide() { //在页面隐藏时也要清除定时器
if(timer){
console.log('清除定时器-' + timer)
clearInterval(timer);
}
},
onUnload(){ //在页面卸载时清除定时器避免出现多个定时器连续创建动画
if(timer){
console.log('清除定时器-' + timer)
clearInterval(timer);
}
},
methods:{
// 定义动画内容
scaleAndScale() {
this.animation.translateY(-60).opacity(1).step({
    duration:500
});
this.animationData = this.animation.export();

setTimeout(function(){
    this.animation.translateY(0).opacity(0).step({
        duration:0
    })
    this.animationData = this.animation.export();
}.bind(this),500);
},
}
}
</script>
<style>
   .fonts {
       font-size: 50rpx;
       font-weight: bold;
       opacity: 1;
       color: #ffa718;
       margin: 200rpx;
   }
</style>