波浪，你好：打造波纹荡漾的动画效果

2024-01-15 05:29:08

欢迎各位来到技术博览会的精彩舞台！今天，我们将领略波纹荡漾的迷人魅力，通过精心构建的代码，探寻它的运作奥秘。我们这趟旅程，将从一个看似简单的圆形和三条波纹开始，一步步揭开这波澜壮阔的动画效果背后的秘密。

构思：水波的涟漪

想象一块平静的水面，当一颗小石子落入其中时，会激起一圈圈涟漪。这正是我们想要捕捉的效果：从中心圆形中激发波浪，仿佛水面泛起的层层涟漪。

代码之旅：绘制波浪的舞姿

我们的代码舞台上，主角是一个名为 Canvas 的画布，它将成为波浪舞动的舞台。我们使用 JavaScript 作为幕后编舞，精心绘制出圆形和波浪。

// 中心圆
const circle = new Path2D();
circle.arc(x, y, radius, 0, 2 * Math.PI);

// 波浪
const waves = [];
for (let i = 0; i < 3; i++) {
  const wave = new Path2D();
  waves.push(wave);
}

动画的魔法：让波浪律动起来

动画的魔力在于让静态图像动起来。我们使用 requestAnimationFrame() 函数作为动画引擎，让波浪随着时间变化而起伏。

function animate() {
  // 更新波浪的形状
  updateWaves();

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

  // 绘制圆形和波浪
  ctx.fillStyle = "white";
  ctx.fill(circle);
  for (const wave of waves) {
    ctx.fill(wave);
  }

  // 再次调用动画
  requestAnimationFrame(animate);
}