微信小程序 - 无限循环执行动画（Animation）

效果图

wxml

<!-- 动画容器(执行动画) -->
<image src="https://img-blog.csdnimg.cn/20200820180305411.png"
animation="{{ animationData }}">
</image>
<!-- END -->

<!-- 触发按钮 -->
<button bindtap="go" style="">动起来</button>
<!-- END -->

js

Page({

  /*
  * 事件处理
  */
  data: {
    animationData: {}
  },

  /*
  * 事件处理
  */
  go: function() {
    
    // 创建动画实例(animation)
    var animation = wx.createAnimation({
      duration: 500,//动画持续时间
      timingFunction: 'ease',//动画以低速开始
      //具体配置项请查看文档
    })
   
   // 建立标识(用于循环)
   this.animation = animation
   var next = true;

    // 无限循环动画
    setInterval(function(){

      if(next){
        // 你要执行动画链(详见文档)
        this.animation.scale(0.8).step()
        // ----------------------- 
        next = !next;
      }

      else
      {
        // 你要执行动画链(详见文档)
        this.animation.scale(1).step()
        // -----------------------
        next = !next;
      }

    // 导出动画
    this.setData({
      animationData: animation.export()
    })
      
   }.bind(this),500)
  }

})