wxml
<view animation="{
{animation}}" style="position: absolute">
<image src="/images/background.png" alt="" class="background"></image>
</view>
因为小程序边框所限,所以最外层的view应该设置宽度大一点,我设置的是2000px
js
onLoad() {
//动画
this.animation = wx.createAnimation({
duration: 7000,
timingFunction: 'linear',
delay: 0
})
this.animation.translate(-680, -1).step()
this.animation.translate(0, -1).step()
this.setData({
animation: this.animation.export() //输出动画
})
setInterval(function () {
this.animation.translate(-680, -1).step()
this.animation.translate(0, -1).step()
this.setData({
animation: this.animation.export() //输出动画
})
}.bind(this),14000)
},
js
Page({
data: {
animation:{
}
},
设置两遍translate,不然呢setInterval一开始的那一次不会产生效果,评论有什么好方法嘛?
效果