微信小程序动画无限循环 掉花

动画效果

源码

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

wxss

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

js

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() {
    var that = this;
    setTimeout(function() {
      animation.translateY(604).step({
        duration: 2000
      })
      that.setData({
        ["animationData" + i]: animation.export()
      })
      i++;
    }.bind(that), 200)
    if (i < 7) {
      setTimeout(function() {
        that.donghua()
      }.bind(that), 200)
    } else {
      i = 0; 
      animation.translateY(-604).step({
        duration: 10
      })
      setTimeout(function() {
        for (var y = 0; y < 7; y++) {
          that.setData({
            ["animationData" + y]: animation.export()
          })
          that.setData({
            ["animationData" + y + '.actions[0].animates[0].args[0]']: 0
          })
        }
      }.bind(that), 2200)
      setTimeout(function() {
        that.donghua()
      }.bind(that), 2200)
    }
  }
})