canvas动画替代flash动画方案

最近工作不是很忙，所以借这个时间整理一下之前遇到的问题，记录一下相关的解决方案，这个问题是这样的，之前有一个项目是Electron开发的桌面客户端，里面有一个循环播放动画的功能，原先是由flash来实现的，由于flash不再受到支持，所以考虑用其他方案来替代。

动画本身不太复杂，我有考虑过使用css来实现，但是综合考虑之后，还是决定采用canvas来实现。

动画效果是这样的：将一张类似地图的背景图进行放大和移动，最终定位显示图上的一个目标点，然后在目标点处显示一个标记，标记上下跳动进行提示，然后标记消失，背景图缩小到原始大小再循环整个过程。

背景图的放大和移动是分多段进行的，即先放大移动到某个区域，然后再放大移动，每一段放大移动的位置和倍数都是定义在xml文件中，最后显示的标记位置也是定义在这个xml文件中。每次更换动画效果都是直接更新xml文件。

具体的xml文件如下：

<map>
  <!-- scale是缩放的倍数，duration是这一阶段动画的时常，x,y是图片左上角在画布上的坐标 -->
  <step scale="0.14" duration="1" x="-30" y="227"/>
  <step scale="0.5" duration="1" x="-1903" y="-4"/>
  <step scale="1" duration="5" x="-4489" y="-113">
  <!-- x，y是标记点在画布上的坐标， alpha是标记点的透明度-->
    <point x="595" y="297.5" alpha="1"/>
  </step>
</map>

动画绘制的思路是这样的：

1. 读取到xml文件后，将配置转换为一个数组，数组每一项为一个step对象，如果step中由子元素则放在step对象的children属性中；
2. 在页面上创建2个canvas元素，2个canvas重叠，下面的canvas绘制背景图片，上面的canvas绘制标记点，不设置背景的话，是不会出现遮盖的问题的；
3. 循环绘制的思路，使用一个调度函数来控制动画的循环，使用2个绘制函数分别绘制背景和标记点
4. 调度函数记录一个绘制次数count，当前绘制的step的index为count%数组的length，每绘制一次都会将count加1，由于标记点总在动画的最后一个阶段出现，所以如果当前的index小于下一个index，执行背景图绘制函数，否则执行标记点绘制函数以及还原背景图片状态。这里有一个需要注意的地方，即每次背景绘制都是根据当前step变为下一step，3个step其实只执行的2次函数。
5. 背景图片绘制函数draw的逻辑是，接收3个参数，分别是当前step属性（s1），下一step属性（s2），以及duration每一帧动画的时常即step.duration / 60。动画的绘制频率为每秒60次，先计算出每次变化的x，y，scale，（s1.x - s2.x）/ 60，其他2个属性计算方法也一样。然后设置一个定时器，每step.duration / 60执行一次，每次绘制清空canvas然后将图片的x,y,scale,加上每次变动的值进行绘制，跳出定时器的条件为当前图片的属性等于目标属性，由于计算精度的问题，当两个值相差小于0.01时，认为已经绘制完毕，退出定时器，并且count++，再次执行调度函数
6. 绘制标记点的逻辑也类似，但是又有点不一样，标记点需要先往上移动10像素，再往下移动10像素，然后再重复一次，总共4次，所以定时器就是每 5 / 4 秒执行60次，每移动10像素更改移动方向，并且总次数减1，退出定时器的条件为标记点往下移动结束，总次数为0。

示例代码如下：

<template>
  <div class="viewer-container">
    <canvas
      :width="width"
      :height="height"
      id="point-canvas"
    ></canvas>
    <canvas
      :width="width"
      :height="height"
      id="canvas"
    ></canvas>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 1080,
    },
    height: {
      type: Number,
      default: 1125,
    },
    frequency: {
      type: Number,
      default: 60,
    },
  },
  data () {
    return {
      config: {},
      ctx: null,
      pointCanvas: null,
      img: null,
      count: 0,
      drawInterval: null,
      paintControlInterval: null,
      redPointTimeout: null,
    }
  },

  mounted () {
    this.ctx = document.getElementById('canvas').getContext('2d')
    this.pointCanvas = document.getElementById('point-canvas').getContext('2d')
  },
  methods: {
    setMapData (args) {
      console.log('渲染进程收到的数据:', args)

      // 清除所有定时器
      this.clearAll()
      // 将属性值由字符串转为数字
      args.step.forEach((item) => {
        item.attributes.duration = parseInt(item.attributes.duration) * 1000
        item.attributes.scale = parseFloat(item.attributes.scale)
        item.attributes.x = parseFloat(item.attributes.x)
        item.attributes.y = parseFloat(item.attributes.y)
      })
      this.config = args
      this.img = new Image()
      this.img.onload = () => {
        if (args.hasOwnProperty('step')) {
          this.paint()
        }
      }
      this.img.src = this.config.imgPath
    },
    clearAll () {
      console.log(this.drawInterval, this.paintControlInterval, this.redPointTimeout)
      if (this.drawInterval) clearInterval(this.drawInterval)
      if (this.paintControlInterval) clearInterval(this.paintControlInterval)
      if (this.redPointTimeout) clearTimeout(this.redPointTimeout)
      this.ctx.clearRect(0, 0, 1080, 1125)
      this.pointCanvas.clearRect(0, 0, 1080, 1125)
    },
    paint () {
      //
      let length = this.config.step.length
      let stepArr = this.config.step

      let index = this.count % length
      let attr = Object.assign({}, stepArr[index].attributes)

      let nextIndex = (this.count + 1) % length
      let nextAttr = Object.assign({}, stepArr[nextIndex].attributes)

      // 如果当前的index小于下一个index，正常绘画
      if (index < nextIndex) {
        let duration = attr.duration / this.frequency
        this.draw(attr, nextAttr, duration)
      } else {
        // 否则画出小红点，然后再等最后一个step的duration时间绘画为初始状态

        this.pointControl(stepArr[index], attr.duration)

        if (this.redPointTimeout) {
          clearTimeout(this.redPointTimeout)
        }
        this.redPointTimeout = setTimeout(() => {
          this.draw(attr, nextAttr, 1000 / this.frequency)
        }, attr.duration - 1000)
      }
    },
    draw (attr, nextAttr, duration) {
      let scaleStep = (nextAttr.scale - attr.scale) / this.frequency
      let xStep = (nextAttr.x - attr.x) / this.frequency
      let yStep = (nextAttr.y - attr.y) / this.frequency

      // 设置定时器，将当前step的duration除以frequency，frequency就是每次循环的间隔
      // 每次循环判断当前的scale与下一次的scale相差是否小于0.01
      // 如果不是，则各属性增加，绘制画面
      // 如果是，则认为当前step已经变形为下一step的形状，count增加，下一step变为当前step，清除定时器，重新开始绘画
      if(this.drawInterval) {
        clearInterval(this.drawInterval)
      }
      this.drawInterval = setInterval(() => {
        if (Math.abs(attr.scale - nextAttr.scale) > 0.01) {
          attr.scale = attr.scale + scaleStep
          attr.x += xStep
          attr.y += yStep
          this.ctx.clearRect(0, 0, 1080, 1125)
          this.ctx.drawImage(this.img, attr.x, attr.y, this.img.width * attr.scale, this.img.height * attr.scale)
        } else {
          this.count++
          clearInterval(this.drawInterval)
          this.paint()
        }
      }, duration)
    },

    pointControl (attr, duration) {

      let point = Object.assign({}, attr.elements[0].attributes)
      point.x = parseFloat(point.x)
      point.y = parseFloat(point.y)
      let img = new Image()
      // 总循环次数
      let count = 4
      // 每次循环的总时间
      let singleDuration = duration / count
      // 每次定时器间隔时间
      let intervalDuration = parseInt(singleDuration / this.frequency)
      // y移动的总距离
      let distance = 10
      // y每次移动的距离
      let singleDistance = distance / intervalDuration
      img.onload = () => {
        if(this.paintControlInterval) {
          clearInterval(this.paintControlInterval)
        }
        this.paintControlInterval = setInterval(() => {
          this.pointCanvas.clearRect(0, 0, 1080, 1125)
          this.pointCanvas.drawImage(img, point.x - img.width / 2, point.y - img.height)
          if (distance <= 0) {
            point.y += singleDistance
          } else {
            point.y -= singleDistance
          }
          distance -= singleDistance

          if (distance <= -10) {
            if (count == 0) {
              this.pointCanvas.clearRect(0, 0, 1080, 1125)
              clearInterval(this.paintControlInterval)
            }
            distance = 10
            count--
          }
        }, intervalDuration)
      }
      img.src = this.config.point
    },
  },
}
</script>

<style>
.viewer-container {
  position: relative;
}
#point-canvas {
  position: absolute;
  left: 0;
  top: 0;
}
</style>