微信小程序下拉刷新动画，如何制作成长尾词？

本文共计741个文字，预计阅读时间需要3分钟。

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

简洁效果+下面放代码：js：javascriptvar animation=wx.createAnimation({ duration: 500, timingFunction: 'ease',});

Page({ data: { animationData: {}, left1: Math.floor(Math.random() * 100), left2: Math.floor(Math.random() * 100), left3: Math.floor(Math.random() * 100), left4: Math.floor(Math.random() * 100), left5: Math.floor(Math.random() * 100), left6: Math.floor(Math.random() * 100), left7: Math.floor(Math.random() * 100), left8: Math.floor(Math.random() * 100), left9: Math.floor(Math.random() * 100), left10: Math.floor(Math.random() * 100), }, onLoad: function () { this.animation.translateY(-100).step(); this.setData({ animationData: this.animation.export(), }); }, onPullDownRefresh: function () { var i=1; this.animation.translateY(0).step(); this.setData({ animationData: this.animation.export(), });

setTimeout(()=> { this.animation.translateY(-100).step(); this.setData({ animationData: this.animation.export(), }); }, 500);

setTimeout(()=> { this.animation.translateY(0).step(); this.setData({ animationData: this.animation.export(), }); }, 1000);

setTimeout(()=> { this.animation.translateY(-100).step(); this.setData({ animationData: this.animation.export(), }); }, 1500);

setTimeout(()=> { this.animation.translateY(0).step(); this.setData({ animationData: this.animation.export(), }); }, 2000);

setTimeout(()=> { this.animation.translateY(-100).step(); this.setData({ animationData: this.animation.export(), }); }, 2500);

setTimeout(()=> { this.animation.translateY(0).step(); this.setData({ animationData: this.animation.export(), }); }, 3000);

setTimeout(()=> { this.animation.translateY(-100).step(); this.setData({ animationData: this.animation.export(), }); }, 3500);

setTimeout(()=> { this.animation.translateY(0).step(); this.setData({ animationData: this.animation.export(), }); }, 4000);

setTimeout(()=> { this.animation.translateY(-100).step(); this.setData({ animationData: this.animation.export(), }); }, 4500);

setTimeout(()=> { this.animation.translateY(0).step(); this.setData({ animationData: this.animation.export(), }); }, 5000);

setTimeout(()=> { wx.stopPullDownRefresh(); }, 5500); },});

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

简易的效果

下面放代码：

js：

var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: 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), left7: Math.floor(Math.random() * 250 + 1), left8: Math.floor(Math.random() * 250 + 1), }, //动画 donghua: function () { var that = this; setTimeout(function () { animation.translateY(800).step({ duration: 1600, timingFunction: 'ease' }) that.setData({ ["animationData" + i]: animation.export() }) i++; }.bind(that), 200) if (i < 9) { setTimeout(function () { that.donghua() }.bind(that), 200) } else { i = 0; animation.translateY(-800).step({ duration: 10, }) setTimeout(function () { for (var y = 0; y < 9; y++) { that.setData({ ["animationData" + y]: animation.export() }) that.setData({ ["animationData" + y + '.actions[0].animates[0].args[0]']: 0 }) } }.bind(that), 1500) } }, onPullDownRefresh: function () { wx.showNavigationBarLoading(); this.donghua(); wx.stopPullDownRefresh(); }, })

wxml：

<!-- 动画 --> <block wx:if="{{donghua}}"> <view class='donghua'> <image bindtap='hua' style='left:{{left1}}px' animation="{{animationData1}}" src='../../images/1.png'></image> <image bindtap='hua' style='left:{{left2}}px' animation="{{animationData2}}" src='../../images/2.png'></image> <image bindtap='hua' style='left:{{left3}}px' animation="{{animationData3}}" src='../../images/3.png'></image> <image bindtap='hua' style='left:{{left4}}px' animation="{{animationData4}}" src='../../images/1.png'></image> <image bindtap='hua' style='left:{{left5}}px' animation="{{animationData5}}" src='../../images/2.png'></image> <image bindtap='hua' style='left:{{left6}}px' animation="{{animationData6}}" src='../../images/3.png'></image> <image bindtap='hua' style='left:{{left7}}px' animation="{{animationData7}}" src='../../images/1.png'></image> <image bindtap='hua' style='left:{{left8}}px' animation="{{animationData8}}" src='../../images/2.png'></image> </view> </block>

wxss：

image{ margin-top: -150rpx; width: 40rpx; height: 40rpx; margin-left: 5%; position: absolute; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。