微信小程序 怎么实现多次播放动画

在微信小程序中，你可以通过使用 `animation` 组件来创建动画。要实现多次播放动画，你可以在动画完成时，手动将元素的样式恢复到动画前的状态，然后再次触发动画。以下是一个简单的示例代码：

<view class="box" animation="{{animationData}}">这是一个动画</view>
<button bindtap="playAnimation">播放动画</button>

Page({
  data: {
    animationData: null
  },

  playAnimation: function() {
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    animation.scale(1.5).rotate(45).step()

    this.setData({
      animationData: animation.export()
    })

    // 动画完成后，手动将元素的样式恢复到动画前的状态
    setTimeout(() => {
      animation.scale(1).rotate(0).step()
      this.setData({
        animationData: animation.export()
      })
    }, 1000)
  }
})

在上面的代码中，我们创建了一个 `animation` 对象，并使用 `scale` 和 `rotate` 方法来设置动画效果。然后，我们将动画对象导出，并将它绑定到了 `box` 元素上。在触发点击事件时，我们先将动画对象应用到元素上，然后在动画完成后，手动将元素的样式恢复到动画前的状态，并再次触发动画。

需要注意的是，如果你希望动画可以无限循环播放，可以将 `animation` 对象的 `iterations` 属性设置为 `Infinity`。同时，你也可以使用 `animation` 对象的 `step` 方法来实现多个动画效果的组合。