你还没用过Canvas玩转Web动画？那你还等什么？

前端

2023-01-30 02:27:45

缓动动画：提升 Web 动画流畅度和自然感的秘诀

什么是缓动动画？

试想一下，当您打开一个网站时，看到一个方块从屏幕一侧移动到另一侧，就像它被磁铁拉动一样。这样的运动显得生硬、不自然。相反，如果方块以逐渐加速的方式平滑移动，然后逐渐减速至静止，这将更加令人愉悦和逼真。这就是缓动动画的作用所在。

缓动动画是指带有速度变化的动画。在 Web 动画中，它通过数学函数控制动画的速度，从而创造出更加平滑、自然的效果。

缓动动画的实现原理

缓动动画的原理是基于数学函数，这些函数定义了动画的速度如何随着时间变化。常见的缓动函数有：

线性函数： 速度保持恒定。
指数函数： 速度以指数方式加速或减速。
正弦函数： 速度以正弦波的形式波动。

缓动动画的用法

缓动动画在 Web 动画中应用广泛，包括：

对象移动： 创建平滑的对象运动，例如小球从屏幕一侧滚到另一侧。
对象缩放： 创建对象逐渐缩放的效果，例如按钮从较小状态放大到较大状态。
对象旋转： 创建对象围绕自身或特定轴旋转的效果。
组合效果： 将多个缓动动画组合在一起，创建复杂而引人注目的动画。

缓动动画示例

为了更直观地理解缓动动画，这里提供几个示例：

示例 1：线性移动

// 对象 x 坐标
let x = 0;

// 以每秒 100 像素的速度移动
let speed = 100;

function update() {
  // 更新对象的 x 坐标
  x += speed * (1 / 60); // 每帧移动的距离

  // 清除画布并绘制对象
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 0, 10, 10); // 绘制一个 10x10 的矩形

  // 持续更新动画
  requestAnimationFrame(update);
}

update();

示例 2：指数缩放

// 对象缩放比例
let scale = 1;

// 以每秒 0.1 的速度缩放
let scaleSpeed = 0.1;

function update() {
  // 更新对象的缩放比例
  scale += scaleSpeed * (1 / 60);

  // 清除画布并绘制对象
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, 0, 100 * scale, 100 * scale); // 绘制一个 100x100 的矩形

  // 持续更新动画
  requestAnimationFrame(update);
}

update();

示例 3：正弦旋转

// 对象旋转角度（弧度）
let rotation = 0;

// 以每秒 0.1 弧度的速度旋转
let rotationSpeed = 0.1;

function update() {
  // 更新对象的旋转角度
  rotation += rotationSpeed * (1 / 60);

  // 清除画布并绘制对象
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save(); // 保存当前画布状态
  ctx.translate(50, 50); // 将画布原点移动到矩形中心
  ctx.rotate(rotation); // 旋转画布
  ctx.fillRect(-50, -50, 100, 100); // 绘制一个 100x100 的矩形
  ctx.restore(); // 恢复原始画布状态

  // 持续更新动画
  requestAnimationFrame(update);
}

update();