uni-app 中使用动画-animation
2020-07-25 本文已影响0人
THERAIN_
设置动画执行动画的标签
<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>
最后别忘啦 在页面隐藏 和 页面卸载时 清除定时器 ~