小程序动画创建及动画结束的监听事件

小程序动画创建

绑定动画数据

    <view class="img-box" animation='{{animationData}}' bindtransitionend='animationend' bindtap='move'>
      <image src="{{AppImg.total_bg}}"></image>
    </view>

设置动画

data(){
    animationData: ''
}

move(){
        //创建动画
        var animation = wx.createAnimation({
          duration: 400,
        })
        
        //描述动画步骤
        animation.top(-500).scale(0.8).step()
        
        //导出动画数据传递给组件的animation属性,否则动画不会执行
        this.setData({
          animationData:animation.export()
        })

}

监听动画事件（开始，结束）

动画执行过程中使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件

bindtransitionend：监听CSS 渐变结束或 wx.createAnimation 结束一个阶段

注意：bindtransitionend监听的是wx.createAnimation 结束一个阶段而不是整个动画的结束（也就是一个step()结束）

bindanimationstart：监听CSS 动画开始

bindanimationiteration：CSS 动画结束一个阶段

bindanimationend：CSS 动画结束

注意：bindanimationstart bindanimationiteration bindanimationend无法监听到wx.createAnimation创建的动画

注：这几个事件都不是冒泡事件，需要绑定在真正发生了动画的节点上才会生效。

例：

//监听动画的事件需要和绑定动画的节点在一起
<view class="img-box" animation='{{animationData}}' bindtransitionend='animationend' >
      <image src="{{AppImg.total_bg}}"></image>
    </view>

js部分

animationend(){
    console.log('动画结束了')
    }