使用JS实现沿贝塞尔曲线运动的技巧

84 min read

以下是一种使用 JavaScript 实现沿贝塞尔曲线运动的方法。我们需要定义三个点：起始点，控制点和结束点。

  1. 首先，我们需要创建一个 Canvas 元素和一个 JavaScript 上下文环境。
// 创建 Canvas 元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 创建 JavaScript 上下文环境
var ctx = canvas.getContext('2d');
  1. 定义三个点：起始点，控制点和结束点。这里我们可以自定义三个点的坐标。
// 起始点
var start = { x: 50, y: 100 };

// 控制点
var control = { x: 150, y: 50 };

// 结束点
var end = { x: 250, y: 100 };
  1. 定义一个计时器和速度变量，用于控制动画的速度。
// 定义计时器和速度变量
var t = 0;
var speed = 0.005;
  1. 在绘制函数中，使用贝塞尔曲线公式计算当前点的坐标，并将其绘制在 Canvas 上。
function draw() {
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算当前点的坐标
  var current = {
    x:
      Math.pow(1 - t, 2) * start.x +
      2 * (1 - t) * t * control.x +
      Math.pow(t, 2) * end.x,
    y:
      Math.pow(1 - t, 2) * start.y +
      2 * (1 - t) * t * control.y +
      Math.pow(t, 2) * end.y,
  };

  // 将当前点绘制在 Canvas 上
  ctx.beginPath();
  ctx.arc(current.x, current.y, 10, 0, 2 * Math.PI);
  ctx.fill();

  // 增加时间变量
  t += speed;

  // 如果时间变量大于 1，重置为 0，重新开始动画
  if (t > 1) {
    t = 0;
  }

  // 循环调用绘制函数
  requestAnimationFrame(draw);
}

// 调用绘制函数开始动画
draw();
  1. 最后，我们可以在 CSS 中为 Canvas 设置样式。
canvas {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

完整的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Bezier Curve Animation</title>
    <style>
      canvas {
        width: 300px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
      // 创建 Canvas 元素
      var canvas = document.createElement('canvas');
      document.body.appendChild(canvas);

      // 创建 JavaScript 上下文环境
      var ctx = canvas.getContext('2d');

      // 起始点
      var start = { x: 50, y: 100 };

      // 控制点
      var control = { x: 150, y: 50 };

      // 结束点
      var end = { x: 250, y: 100 };

      // 定义计时器和速度变量
      var t = 0;
      var speed = 0.005;

      function draw() {
        // 清空 Canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 计算当前点的坐标
        var current = {
          x:
            Math.pow(1 - t, 2) * start.x +
            2 * (1 - t) * t * control.x +
            Math.pow(t, 2) * end.x,
          y:
            Math.pow(1 - t, 2) * start.y +
            2 * (1 - t) * t * control.y +
            Math.pow(t, 2) * end.y,
        };

        // 将当前点绘制在 Canvas 上
        ctx.beginPath();
        ctx.arc(current.x, current.y, 10, 0, 2 * Math.PI);
        ctx.fill();

        // 增加时间变量
        t += speed;

        // 如果时间变量大于 1，重置为 0，重新开始动画
        if (t > 1) {
          t = 0;
        }

        // 循环调用绘制函数
        requestAnimationFrame(draw);
      }

      // 调用绘制函数开始动画
      draw();
    </script>
  </body>
</html>