使用js实现沿贝塞尔曲线运动

在前端开发中，实现元素沿贝塞尔曲线运动通常涉及Canvas API和requestAnimationFrame函数。以下是一个简单的示例，展示如何使用JavaScript和HTML5的Canvas元素来创建一个沿二次贝塞尔曲线运动的点。

  1. HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贝塞尔曲线动画</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript实现 (script.js 文件)：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let t = 0; // 动画参数，从0到1
const startPoint = { x: 50, y: 300 }; // 起始点
const controlPoint = { x: 400, y: 100 }; // 控制点
const endPoint = { x: 750, y: 300 }; // 终止点
const speed = 0.02; // 动画速度

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.beginPath();
    ctx.moveTo(startPoint.x, startPoint.y);
    ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y); // 绘制二次贝塞尔曲线
    ctx.stroke();

    const x = quadraticBezier(t, startPoint.x, controlPoint.x, endPoint.x);
    const y = quadraticBezier(t, startPoint.y, controlPoint.y, endPoint.y);
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2, false); // 绘制运动点
    ctx.fillStyle = 'red';
    ctx.fill();

    t += speed;
    if (t < 1) {
        requestAnimationFrame(draw); // 持续绘制动画
    }
}

// 二次贝塞尔曲线公式
function quadraticBezier(t, p0, p1, p2) {
    const u = 1 - t;
    const tt = t * t;
    const uu = u * u;
    return (uu * p0 + 2 * u * t * p1 + tt * p2);
}

draw(); // 开始动画

在这个示例中，我们定义了一个沿二次贝塞尔曲线运动的点。quadraticBezier函数用于根据动画参数t（从0到1）计算曲线上点的位置。draw函数负责清除画布、绘制贝塞尔曲线和运动点，并使用requestAnimationFrame来持续更新动画。

posted @ 2024-12-25 09:11  王铁柱6  阅读(92)  评论(0)    收藏  举报