用Canvas点亮你的心：吕小鸣点赞送心的动画制作

前端

2024-01-08 21:30:09

在数字世界中，表达爱意和赞赏的方式多种多样。点赞按钮和送心动画已经成为社交媒体和在线交流中不可或缺的一部分。本教程中，我们将向大家展示如何使用Canvas创建吕小鸣点赞送心的动画，让你的点赞和送心更具个性和吸引力。

动画原理

这个动画中每一颗心都有自己的透明度、位移、角度和缩放变化动画。为了实现这些动画效果，我们可以利用Canvas提供的相关API。

透明度： 使用globalAlpha属性设置画布的全局透明度。
位移： 使用translate()方法平移画布原点。
角度： 使用rotate()方法旋转画布。
缩放： 使用scale()方法缩放画布。

在有多颗心的情况下，我们需要针对每颗心保存上一次Canvas的状态。在改变完成后，再恢复状态，以确保动画的平滑过渡。

计算心位移路径

动画中心的位移路径是一个三次贝塞尔曲线，其公式如下：

x = (1 - t)³ * x0 + 3 * (1 - t)² * t * x1 + 3 * (1 - t) * t² * x2 + t³ * x3
y = (1 - t)³ * y0 + 3 * (1 - t)² * t * y1 + 3 * (1 - t) * t² * y2 + t³ * y3

其中，(x0, y0)是曲线的起点，(x3, y3)是终点，(x1, y1)和(x2, y2)是两个控制点。t是参数，取值范围[0, 1]。

通过改变控制点的位置，我们可以调整曲线的形状，从而创建出各种心形位移路径。

代码实现

下面是使用Canvas实现吕小鸣点赞送心动画的代码示例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布尺寸
canvas.width = 500;
canvas.height = 500;

// 创建一个心形路径
const heartPath = new Path2D();
heartPath.moveTo(100, 100);
heartPath.quadraticCurveTo(150, 50, 200, 100);
heartPath.quadraticCurveTo(250, 150, 200, 200);
heartPath.quadraticCurveTo(150, 250, 100, 200);
heartPath.quadraticCurveTo(50, 150, 100, 100);

// 创建多颗心并设置不同的动画参数
const hearts = [];
for (let i = 0; i < 10; i++) {
  const heart = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    alpha: Math.random(),
    rotation: Math.random() * Math.PI * 2,
    scale: Math.random() * 0.5 + 0.5,
  };

  hearts.push(heart);
}

// 动画循环函数
function animate() {
  requestAnimationFrame(animate);

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历所有心并绘制
  hearts.forEach((heart) => {
    // 保存上一次Canvas状态
    ctx.save();

    // 应用动画参数
    ctx.globalAlpha = heart.alpha;
    ctx.translate(heart.x, heart.y);
    ctx.rotate(heart.rotation);
    ctx.scale(heart.scale, heart.scale);

    // 绘制心形
    ctx.fillStyle = 'red';
    ctx.fill(heartPath);

    // 恢复Canvas状态
    ctx.restore();

    // 更新动画参数
    heart.x += Math.random() * 5 - 2.5;
    heart.y += Math.random() * 5 - 2.5;
    heart.alpha += Math.random() * 0.05 - 0.025;
    heart.rotation += Math.random() * 0.05 - 0.025;
    heart.scale += Math.random() * 0.01 - 0.005;
  });
}

// 开始动画循环
animate();