Canvas 中如何实现正弦运动效果

本文介绍如何使用正弦函数（sin）在 html canvas 中实现平滑的往复运动：物体在边界处减速至停止、反向加速通过中点，形成自然的“呼吸式”动画。核心是构造归一化的正弦缓动函数，并结合时间戳驱动位置计算。

本文介绍如何使用正弦函数（sin）在 html canvas 中实现平滑的往复运动：物体在边界处减速至停止、反向加速通过中点，形成自然的“呼吸式”动画。核心是构造归一化的正弦缓动函数，并结合时间戳驱动位置计算。

要让一个圆点在 Canvas 上做正弦式往复运动（即：在左右边界处速度趋近于零，经过中点时速度最快），关键在于用正弦函数映射时间到空间位置，而非简单叠加 sin() 到坐标上（如原代码中的 x * Math.sin(q) 会导致非物理、不可控的震荡）。

✅ 正确思路：时间 → 归一化缓动值 → 线性插值位置

我们采用一个标准的正弦缓动函数（ease-in-out sine）：

const easeSin = (t) => Math.sin(t - Math.PI / 2) * 0.5 + 0.5;

• t 是连续递增的时间参数（单位：毫秒）；
• Math.sin(t - Math.PI / 2) 将正弦波向右平移 π/2，使 t=0 时输出 -1，完整周期为 2π；
• * 0.5 + 0.5 将输出范围从 [-1, 1] 映射到 [0, 1] —— 这是一个平滑的 0→1→0 周期性归一化值，完美对应“起点→终点→起点”的运动节奏。

? 计算目标位置

假设画布宽度足够，我们希望圆点在水平方向于 left = radius 和 right = canvasWidth - radius 之间往复运动（避免超出边界）。则有效运动区间长度为：

const range = canvasWidth - radius * 2;

于是当前 x 坐标可直接通过线性插值得到：

x = radius + ease * range; // ease ∈ [0, 1]

这样，当 ease = 0 → x = radius（左边界）；ease = 1 → x = canvasWidth - radius（右边界）；而 ease 按正弦规律变化，就自然实现了“慢–快–慢”的加速度曲线。

? 完整可运行示例

<canvas width="400" height="200" style="border: 2px solid #333;"></canvas><script>  const canvas = document.querySelector("canvas");  const ctx = canvas.getContext("2d");  const rad = 20;  const y = 100;  // 正弦缓动函数：输入时间 t（ms），输出 [0, 1] 的平滑周期值  const easeSin = (t) => Math.sin(t * 0.001 - Math.PI / 2) * 0.5 + 0.5;  function motion(time) {    const ease = easeSin(time); // 自动随时间循环    const x = rad + ease * (canvas.width - rad * 2);    // 清屏 & 绘制    ctx.clearRect(0, 0, canvas.width, canvas.height);    ctx.beginPath();    ctx.fillStyle = "steelblue";    ctx.arc(x, y, rad, 0, Math.PI * 2);    ctx.fill();    ctx.closePath();    requestAnimationFrame(motion);  }  requestAnimationFrame(motion);</script>

? 注意：

• 使用 requestAnimationFrame 的回调参数 time（高精度时间戳，单位毫秒）作为输入，比手动维护 q 或 x 更稳定、无累积误差；
• 时间缩放因子 0.001 控制运动速度（值越小越慢），可按需调整；
• 若需多物体独立运动，可为每个对象维护偏移时间（如 time + offset）；
• 此方法本质是参数化运动，完全脱离帧率依赖，动画更精准流畅。

通过这种基于数学函数的驱动方式，你不仅能实现正弦往复，还可轻松切换为 easeInCubic、easeOutElastic 等其他缓动效果——只需替换 easeSin 函数即可。这是现代 Canvas 动画的专业实践基础。