微信小程序实现下拉刷新动画

微信小程序动画之下拉刷新动画的具体代码，供大家参考，具体内容如下

简易的效果

下面放代码：

js:

var动画=wx。创建动画({ })var I=1；页面({ data: {东华：真，左1:数学。地板(数学。random()* 250 1)，左2:数学。地板(数学。random()* 250 1)，左3:数学。地板(数学。random()* 250 1)，左4:数学。地板(数学。random()* 250 1)，左5:数学。地板(数学。random()* 250 1)动画东华：函数(){ var=thissetTimeout(函数(){动画.翻译(800)).步骤({ duration: 1600，timingFunction: ' ease ' })即。setdata({['动画数据' I]:动画。export()})I；}.bind(the)，200)if(I ^ 9){ settimeout(function(){ that。donhua()} .bind(the)，200)} else { I=0；animation.translateY(-800).step({ duration: 10，})setTimeout(function(){ for(var y=0；y9；y){那个。setdata({[' animationData ' y]:动画。export()})那个。setdata({[' animationData ' y }).操作[0]。为[0]设置动画args[0]']: 0 }) } } .绑定(即，1500) } }，onPullDownRefresh:函数(){ wx。shownavigationbar loading()；这个。东华();wx。stopulldown refresh()；}，})wxml:

！-动画-块wx : if=' { {东华} }“view class=”东华图像绑定tap=' Hua ' style=' left : { { left 1 } } px ' animation=' { { animationData1 } } ' src='././images/1。png/image bind tap=' Hua ' style=' left : { { left 2 } } px ' animation=' { { animationData2 } } ' src='././images/2。png/image bind tap=' Hua ' style=' left : { { left 3 } } px ' animation=' { { animationData3 } } ' src='././images/3。png/image bind tap=' Hua ' style=' left : { { left 4 } } px ' animation=' { { animationData4 } } ' src='././images/1。png/image bind tap=' Hua ' style=' left : { { left 5 } } px ' animation=' { { animationData5 } } ' src='././images/2。png/image bind tap=' Hua ' style=' left : { { left 6 } } px ' animation=' { { animationData6 } } ' src='././images/3。png/image bind tap=' Hua ' style=' left : { { left 7 } } px ' animation=' { { animationData7 } } ' src='././images/1。png/image bind tap=' Hua ' style=' left : { { left 8 } } px ' animation=' { { animationData8 } } ' src='././images/2。png '/image/view/blockwxss:

图像{页边距-top :-150 rpx；宽度： 40 rpx高度： 40rpx保证金-左侧： 5%;绝对位置：}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。