动态添加带动画组件的问题 - WXOPEN Club

我要实现的是按一个按钮，扔出个拖鞋，拖鞋带动画。

有两个问题:

在创建拖鞋数据时设置动画，动画不会被播放。只能setTimeout延迟一点时间再设置动画。
每次创建一个拖鞋都会导致之前的拖鞋重播动画。（确保每个拖鞋有独立的key也不行）。这样只要动画有多个step，就都会有问题。

不知道正常的是不是这样实现的，是否有其他更标准的做法，谢谢。

下面是代码和素材。

// pages/bugs/bugAnim.js

const getRandom = (min, max) => {

return Math.random() * (max - min) + min

}

Page({

data: {

slippers: [],

},

throwSlipper() {

let d = new Date()

let key = d.getTime()

var animation = wx.createAnimation({

duration: 400,

timingFunction: 'ease',

})

animation.scale(0.5).step()

animation.rotate(getRandom(-90, 90),).step() //假如注释掉这行，动画只有一个step的情况下则没问题

let slipper = {

x: getRandom(0, 320),

y: getRandom(100, 500),

key: key,

// anim: animation.export(), //如果这里直接设置animation，则没有反应

}

let slippers = this.data.slippers

slippers.push(slipper)

this.setData({

slippers: slippers,

})

//这里设置动画才有效，一定要滞后一点时间，时间短了也有几率不成功

setTimeout(() => {

slipper.anim = animation.export()

this.setData({

slippers: slippers,

})

}, 100)

},

})

<view class="bugView">

<view wx:for="{{slippers}}" wx:key="key" wx:for-item="slipper" class="slipperFX" style="left:{{slipper.x}}px;top:{{slipper.y}}px">

<image class="slipper" src="res/slipper.png" mode="aspectFit" animation="{{slipper.anim}}"></image>

</view>

<button bindtap="throwSlipper">扔拖鞋</button>

</view>

/* pages/bugs/bugAnim.wxss */

.bugView {

position: absolute;

width:100%;

height:100%;

background: pink;

}

button {

position: absolute;

width:100%;

bottom: 20px;

margin: auto;

}

.slipperFX {

position: absolute;

width: 0px;

height: 0px;

}

.slipper {

position: absolute;

width: 54px;

height: 120px;

display: block;

left:-27px;

top:-60px;

}

slipper.png