Canvas图像操作的Plus版，帧式动画-CFANZ编程社区

前情提要

前篇了解了Canvas如何操作图片，进行复制、裁剪和贴图。也通过具体实例将API进行了简单的应用，不得不说，这样的方式挺能帮助加深记忆的。

本篇了解一下帧式动画。

帧式动画

先来简单介绍一下帧式动画。

当年动画还是Flash的天下时，我们会学习逐帧动画：

逐帧动画就是一帧一个图像画面，连续多帧就会形成一个动画

帧式动画很类似：

帧式动画通过绘制每一个大小相同的帧（或页面），将每一帧连贯起来，模拟动画效果。

简单帧式动画

创建动画的帧计数器，用来实现图像的交替效果，第一帧设为0，第二帧设为1。
创建一个计时器，使前面的计数器，在一个特定的帧速率下循环运行。这里我设置的循环速率是100ms/次。
使用drawImage()方法改变每一帧图像的拼板显示区域。我设置拼版宽度基数是10。
一个简单的帧式动画就完成了，接下来，我们将收获一只摇滚兔🐰

关键代码

function imgLoadFunc() {
  imgLoop();
}

// 动画绘制
function imgDrow() {
  ctx.fillStyle = '#0f6fb8';
  ctx.fillRect(0, 0, 500, 500);
  ctx.drawImage(img, 10 * count, 10, 80, 60, 30, 30, 60, 60);
  count++;
  // 反复摇摆
  if (count > 1) {
    count = 0;
  }
}

// 循环动画
function imgLoop() {
  // 定时
  window.setTimeout(imgLoop, 100);
  imgDrow();
}

复杂帧式动画

前面简单帧式动画，只设置了两帧，相对单一了些。实际开发中，很少会这么简单，一般都是相对复杂的动画效果。所以接下来我们探索一下复杂帧式动画是什么样以及如何实现的。

设计思路

飞机大战的游戏都玩过吧，需要打掉不停下落的物体。下面我就实现一个移动的飞机✈️。

创建两个变量x和y储存飞机的x轴和y轴的位置。初始值都设置为50。
然后再创建两个变量dx和dy，来表示移动的矢量值。因为是向上移动，所以dy值设置成-1,dx值设置为0。这样坦克会沿着Y轴向上移动，且X轴不变。
创建一个需要绘制成动画的飞机的编号数组。
设置一个计数器来追踪当前飞机的索引：index，初始值是0.
创建动画的帧循环，每次会更新index的值，当index大于飞机的编号数组的长度之后，index值重置成0.
这样我们就得到了一个向上移动的飞机✈️了。

关键代码

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    // 定义图像
    let img = new Image();
    // 设置图像的地址
    img.src = 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9057bd739104dfe95855c7ba694a545~tplv-k3u1fbpfcp-watermark.image';
    img.addEventListener('load', imgLoadFunc, false);
    let animations = [1, 2, 3, 4, 5, 6, 7, 8];
    let index = 0;
    let dx = 0;
    let dy = -1;
    let x = 50;
    let y = 50;

    function imgLoadFunc() {
      imgLoop();
    }

    // 动画绘制
    function imgDrow() {
      x = x + dx;
      y = y + dy;
      ctx.fillStyle = '#0f6fb8';
      ctx.fillRect(0, 0, 500, 500);
      ctx.drawImage(img, 0, 0, 32, 32, x, y, 32, 32);
      index++;
      if (index == animations.length) {
        index = 0;
      }
    }

    // 循环动画
    function imgLoop() {
      // 定时
      window.setTimeout(imgLoop, 100);
      imgDrow();
    }
  }
}