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

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

<!-- 动画 -->
<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>

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)
}
}
})