本文介绍如何在uni-app中实现点击动画，并利用定时器实现动画的往复效果。通过创建动画，设置transformOrigin、duration、timingFunction和delay属性，结合scale方法放大和缩小元素。同时，在页面onShow、onHide和onUnload生命周期事件中管理定时器，确保动画效果的正确执行和资源释放。
设置动画执行动画的标签
您有未完成的订单!
先初始化一个动画
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()
},
}
}
最后别忘啦 在页面隐藏 和 页面卸载时 清除定时器 ~
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
