微信 小程序 之 动画 多种方式

（1）小程序API原生Animation

https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html

（2）Canvas渲染

1、非原生组件下canvas的渲染

可以使用image组件src，直接使用gif即可，大小限制不大

2、原生（摄像机、地图等）组建下canvas的渲染

必须使用cover-view、cover-image等组件才可以承载，可以直接使用image的src的gif动图来展示动态效果的动画，该gif的大小限制较大，控制在50kb效果最佳，超出会卡动画和不显示，其次就是在canvas下渲染序列帧动画，将动画导出系列图，使用小程序api下canvas渲染动画，示例如下：

<camera
  device-position="back"
  flash="off"
  binderror="cameraError"
  style="position:absolute;width: 100%; height: 100%;z-index: 5;"
  frame-size="medinum"
></camera>
<canvas wx:if="{{isCanvasAR}}" canvas-id='ar-canvas' id='ar-canvas' style="z-index:10;position:absolute;width: 100%; height: 100%;" disable-scroll="true">
</canvas>

data: {
    frameNum: 45,
    frameWidth: 750,
    frameHeight: 600,
    frameImgs: new Array(45),//过场动画序列图
    loading: {
      cur: 0,
      all: 45
    },
},

//-------------------ar旋转框相关方法-------------------------------
    preload: function () {
      let that = this;

      wx.showLoading({
        title: '',
      })

      that.downloadFile(that.data.frameNum, that.data.imgPath + 'frame-ar/saomiao_000', 'frameImgs[', '.png')
    },
    downloadFile: function (_num, _imgUrl, _item, _type) {
      var that = this
      for (let i = 0; i < _num; i++) {
        let index = i;
        let str = "";
        if (index < 10) {
          str = "0" + index;
        } else {
          str += index;
        }
        let imgUrl = _imgUrl + str + _type
        wx.getImageInfo({
          src: imgUrl,
          success: res => {
            var item = _item + i + ']'
            that.setData({
              [item]: res.path
            })
            that.progress();
          }
        })
      }
    },
    progress: function () {
      let cur = this.data.loading.cur;
      let all = this.data.loading.all;

      cur++;
      let progress = Math.floor(cur / all * 100);

      wx.showLoading({
        title: progress + '%',
      })
      
      let count = "loading.cur"
      this.setData({
        [count]: cur
      });
      if (cur == all) {
        this.create();
      }
    },
    create: function () {
      wx.hideLoading()

      let that = this
      this.canvasCtx = wx.createCanvasContext('ar-canvas', this)

      this.frameIndex = 0
    },
    update: function () {
      this.showFrames()
      this.canvasCtx.draw()
    },
    showFrames: function () {
      var res = wx.getSystemInfoSync()
      this.canvasCtx.drawImage(this.data.frameImgs[this.frameIndex], 0, res.windowWidth * 0.45, res.windowWidth, (res.windowWidth * 750 / 600) * 0.65)
      this.frameIndex++
      if (this.frameIndex === 44) {
        this.frameIndex = 0
      }
    },
    //-------------------ar旋转框相关方法-------------------------------