微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下
简易的效果
下面放代码:
js:
var动画=wx.createAnimation ({})
var i=1;
页面({
数据:{
东华:没错,
left1: Math.floor (math . random () * 250 + 1)
候补委员:Math.floor (math . random () * 250 + 1)
left3: Math.floor (math . random () * 250 + 1)
left4: Math.floor (math . random () * 250 + 1)
left5: Math.floor (math . random () * 250 + 1)
left6: Math.floor (math . random () * 250 + 1)
:可是三角梅Math.floor (math . random () * 250 + 1)
left8: Math.floor (math . random () * 250 + 1)
},//动画
东华:函数(){
var=这个;
setTimeout(函数(){
animation.translateY (800) .step ({
持续时间:1600
timingFunction:“放松”
}）
that.setData ({
[" animationData " + i]: animation.export ()
}）
我+ +;
}.bind (,), 200)
如果我& lt;9){
setTimeout(函数(){
that.donghua ()
}.bind (,), 200)
其他}{
我=0;
animation.translateY (-800) .step ({
持续时间:10,
}）
setTimeout(函数(){
(var y=0;y & lt;9;y + +) {
that.setData ({
[" animationData " + y]: animation.export ()
}）
that.setData ({
[" animationData“+ y + .actions [0] .animates [0]。args [0]]: 0
}）
}
}.bind (,), 1500)
}
},>
& lt; !——动画——比;
& lt;块wx:如果="{{东华}}”在
& lt;视图类='东华的祝辞
& lt;图像bindtap==绺瘛白?{{left1}} px”动画=" {{animationData1}} " src=" https://www.yisu.com/images/1.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{候补委员}}px”动画=" {{animationData2}} " src=" https://www.yisu.com/images/2.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{left3}} px”动画=" {{animationData3}} " src=" https://www.yisu.com/images/3.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{left4}} px”动画=" {{animationData4}} " src=" https://www.yisu.com/images/1.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{left5}} px”动画=" {{animationData5}} " src=" https://www.yisu.com/images/2.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{left6}} px”动画=" {{animationData6}} " src=" https://www.yisu.com/images/3.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{可是三角梅}}px”动画=" {{animationData7}} " src=" https://www.yisu.com/images/1.png "祝辞& lt;/image>
& lt;图像bindtap==绺瘛白?{{left8}} px”动画=" {{animationData8}} " src=" https://www.yisu.com/images/2.png "祝辞& lt;/image>
& lt;/view>
& lt;/block>
wxs:
{形象
margin-top: -150 rpx;
宽度:40 rpx;
高度:40 rpx;
margin-left: 5%;
位置:绝对的;
}
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
