一个 step

export 方法

export 方法返回一个具有 actions 属性的对象，其中 actions 是一个对象数组。这个对象描述了一个 step 里所有的变换以及所用的时间等信息。还是拿上面的例子来说，下图分别为一个 step 和两个 step 的 actions 对象：可以看出，调用 step 的次数和 actions 数组的长度是相等的。

在调用 export 方法之后，通过将这个具有 action 属性的对象 setData 到 animationData 上面，最终的内部实现可能是，小程序通过改变元素的 style 的 transition 值，最终实现一步一步的动画。（在开发者工具可以看出对应元素的 style 发生了变化）

到这里，我们可以发现，其实所谓的 animation，是由一系列的 transition 依次触发，组合而成，而一个 step 是一个 transition。也就不难理解，在没有重置动画的情况下，为什么再去 export 不会触发动画，因为此时元素在上一次动画的作用下，元素的 style 已经被设置为最终状态，也就不会有过渡动画产生。如果想再次触发动画，必须使用 step({duration:0}) 对动画进行重置。

如何实现 infinate 动画

在小程序的 api 下，如何实现 infinate 动画呢，这就要用到 transitionend 事件了。官方文档告诉我们，这个事件会在 WXSS transition 或 wx.createAnimation 动画结束后触发，所以我们可以在一个 step 结束之后重置动画，然后再次 export，实现 infinate 动画，直接看代码 (mpvue)：

// wxml      <cover-image src="../img/line.png" :animation="animationData" @transitionend="reAnimation" ></cover-image>   // js      onReady () {       this.animation = wx.createAnimation({         duration: 8000,         timingFunction: 'linear',         delay: 0,         transformOrigin: '50% 50% 0'       })       this.animation.rotate(360).step()       this.animationData = this.animation.export()      },        reAnimation () {         this.animation.rotate(0).step({duration: 0}) // 重置动画         this.animationData = this.animation.export()         setTimeout(() => {           this.animation.rotate(360).step()           this.animationData = this.animation.export()         }, 60)// 播放下一次动画       },  

(本文完，不对之处还望指出)