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

王铁柱666

于 2025-01-24 08:08:45 发布

阅读量226

点赞数 3

本文链接：https://blog.youkuaiyun.com/2401_87873725/article/details/145333255

版权

在前端开发中，你可以使用JavaScript结合HTML5的Canvas API或者SVG来实现沿贝塞尔曲线运动的效果。下面是一个使用Canvas API和二次贝塞尔曲线（Quadratic Bezier Curve）的简单示例：

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bezier Curve Animation</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js 文件)：

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

// 贝塞尔曲线的起点、控制点和终点
const startPoint = { x: 50, y: 300 };
const controlPoint = { x: 400, y: 100 };
const endPoint = { x: 750, y: 300 };

// 用于动画的小球初始位置
let ball = { x: startPoint.x, y: startPoint.y };
// 小球的速度
const speed = 0.02;
// 动画控制变量
let t = 0; // t从0变化到1，表示动画的进度

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.strokeStyle = 'blue';
    ctx.stroke();
    
    // 根据t计算小球在贝塞尔曲线上的位置
    const u = 1 - t;
    const tt = t * t;
    const uu = u * u;
    const uuu = uu * u;
    const ttt = tt * t;
    
    ball.x = (uuu * startPoint.x) + (3 * uu * t * controlPoint.x) + (3 * u * tt * endPoint.x) + (ttt * endPoint.x);
    ball.y = (uuu * startPoint.y) + (3 * uu * t * controlPoint.y) + (3 * u * tt * endPoint.y) + (ttt * endPoint.y);
    
    // 绘制小球
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    
    // 更新t值，实现动画效果
    t += speed;
    if (t > 1) {
        t = 0; // 重置t，使动画循环播放
    }
    
    // 请求下一帧绘制
    requestAnimationFrame(draw);
}

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