1. Let's first take a look at the animation effect we want to achieve. 2.
Not much nonsense, just go to the code
<image :src="serviceImg" mode="widthFix" :animation="animationData" class="service_img" @click="toService"></image>
Where animation is our animation property, we need to bind a variable to it, let's say: animationData
2. Add animationData to the data data
data:{
animationData:{
} // 动画
off: false, //判断是否开启动画
}
3. Define the animation when the page is displayed
onShow: function(){
// 初始化一个动画
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
},
4. Add a scroll event because the animation fires when the page is scrolled
onPageScroll:function(){
this.declick();
},
5. Add animation events in the method
methods:{
//开启动画事件
declick() {
if(!this.off){
this.rotateAndScale()
this.off = true;
}
},
// 定义滚动时的动画内容
rotateAndScale() {
// 定义动画内容
this.animation.translateX(-80).step();
// 导出动画数据传递给data层
this.animationData = this.animation.export();
//三秒内不滚动时触发
var timer = setTimeout(()=>{
this.off = false;
this.norotateAndScale();
},3000)
},
//定义停止滚动后的动画内容
norotateAndScale() {
this.animation.translateX(0).step()
this.animationData = this.animation.export()
},
}
3. In general, the use of animation content is not difficult. It may be rare when to trigger the animation and prevent repeated triggering of the animation.