从零开始用Canvas实现正弦运动效果的完整教程

本文聚焦于如何在 Canvas 中打造“慢—快—慢”的呼吸式动画效果——物体在边界处减速、停顿，随后反向加速掠过中点。其核心思路非常简洁：利用正弦函数构建一个标准化的缓动函数，再结合高精度时间戳驱动位置计算，从而实现流畅自然的往复运动。

在 Canvas 中让一个圆点沿正弦轨迹往复运动，关键并非简单地将 sin() 叠加到坐标上——那样容易引发不可控的震荡。更专业的做法是借助正弦函数将时间映射为空间位置，从而获得平滑的加速度曲线，让动画呈现出自然的缓入缓出效果。

核心思路：用正弦函数实现缓动动画

我们采用经典的正弦缓动函数（ease-in-out sine），其本质是将线性流逝的时间，转化为一个 0→1→0 的平滑周期值。听起来有些抽象？其实核心逻辑只有一句话：时间 → 缓动值 → 位置。

先看这个函数：

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 中实现正弦往复运动

几个值得注意的细节：

• 使用 requestAnimationFrame 的回调参数 time（高精度时间戳，单位毫秒）作为输入，比手动维护变量更稳定，能有效避免累积误差；
• 时间缩放因子 0.001 控制运动速度，数值越小运动越慢，开发者可根据需要灵活调整；
• 如需实现多物体独立运动，可为每个对象维护偏移时间，例如 time + offset，实现差异化节奏；
• 这种方法的本质是参数化运动，完全脱离帧率依赖，动画更精准流畅，适合专业 Canvas 开发场景。

通过这种基于数学函数的驱动方式，你不仅能实现正弦往复运动，还可以轻松切换为 easeInCubic、easeOutElastic 等其他缓动效果——只需替换 easeSin 函数即可。这种技巧是现代 Canvas 动画专业实践的基础，掌握它将帮助你构建更流畅、更自然的网页动画体验。