在Canvas中如何实现正弦运动（缓动效果）

本文介绍如何利用正弦函数为 canvas 中的图形创建平滑的往复运动——物体在两端减速停止、在中心加速，模拟自然物理节奏。核心是将时间映射到 [0, 1] 区间的正弦缓动函数，并线性映射到目标位置范围。

本文介绍如何利用正弦函数为 canvas 中的图形创建平滑的往复运动——物体在两端减速停止、在中心加速，模拟自然物理节奏。核心是将时间映射到 [0, 1] 区间的正弦缓动函数，并线性映射到目标位置范围。

要实现“正弦运动”（即具有自然加减速特性的往复运动），关键不在于对坐标做 Math.sin(x) 这类简单变换，而应将时间作为输入，通过正弦缓动函数生成 [0, 1] 范围内的平滑插值系数，再将其线性映射到实际像素区间。这样可确保运动轨迹连续、可预测，且完全避免手动方向翻转与边界检测带来的跳跃或误差。

✅ 正确的正弦缓动函数设计

推荐使用如下标准化缓动函数：

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

• t - Math.PI / 2：将正弦波相位左移，使 t = 0 时输出为 -1，从而让整个周期从谷底开始；
• * 0.5 + 0.5：将原始范围 [-1, 1] 映射为 [0, 1]，便于后续线性插值；
• 输入 t 应随时间均匀增长（如 time * 0.001），保证周期稳定。

✅ 完整可运行示例

<canvas width="400" height="200"></canvas><style> canvas { border: 2px solid #333; } </style><script>  const canvas = document.querySelector('canvas');  const ctx = canvas.getContext('2d');  const rad = 20; // 圆半径  const y = 100;  // 垂直位置固定  const leftEdge = rad;           // 左边界（防止裁剪）  const rightEdge = canvas.width - rad; // 右边界  const easeSin = (t) => Math.sin(t - Math.PI / 2) * 0.5 + 0.5;  function motion(timeStamp) {    // 将时间缩放为合适频率（越小越慢，越大越快）    const t = timeStamp * 0.001;    const ease = easeSin(t);    // 线性插值：[0,1] → [leftEdge, rightEdge]    const x = leftEdge + ease * (rightEdge - leftEdge);    // 清屏 & 绘制    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>

⚠️ 注意事项与优化建议

• 避免使用独立计数器（如 q++）：手动维护时间变量易导致帧率依赖、不同设备表现不一致；优先采用 requestAnimationFrame 的 timeStamp 参数，它提供高精度单调递增时间戳。
• 边界处理更可靠：直接通过 leftEdge 和 rightEdge 控制有效运动区间，无需 if 判断方向反转，彻底消除因浮点误差或帧跳变引发的抖动或越界。
• 可扩展性：该模式天然支持多维运动（如 x 和 y 同时应用不同相位/频率的 easeSin）、组合缓动（如 easeSin(t) * easeSin(t * 1.3)），也易于接入动画库或 Web Animations API。
• 性能提示：clearRect 比 fillRect(0,0,w,h) 更高效；arc() 后调用 closePath() 非必需（fill() 会自动闭合），但保留无害。

掌握这种基于时间的正弦插值思想，不仅能实现丝滑的往返运动，更是构建复杂交互动画（如呼吸效果、摆动、弹性反馈）的基础范式。