[微信小程序]动画 从顶部掉花的效果(完整代码附效果图)

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

image{

width: 100rpx;height: 100rpx;position: absolute;top: -100rpx;}

如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题可以加群问我获取问群里的大神！！！

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

如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题可以加群问我获取问群里的大神！！！

var animation = wx.createAnimation({})var i = 1; Page({data: {donghua: true,left1: Math.floor(Math.random() * 305 + 1),left2: Math.floor(Math.random() * 305 + 1),left3: Math.floor(Math.random() * 305 + 1),left4: Math.floor(Math.random() * 305 + 1),left5: Math.floor(Math.random() * 305 + 1),left6: Math.floor(Math.random() * 305 + 1),},onShow: function () {this.donghua()},donghua: function () {setTimeout(function () {animation.translateY(604).step({ duration: 4000 })this.setData({["animationData" + i]: animation.export()})i++;}.bind(this), 500)if (i < 7) {setTimeout(function () {this.donghua()}.bind(this), 500)} else {console.log(22)setTimeout(function () {this.setData({donghua: false})}.bind(this), 4500)}}})