首页 > 网页制作 >Canvas正弦运动缓动效果实现

Canvas正弦运动缓动效果实现

来源：互联网 2026-07-18 08:19:19

利用正弦函数将时间映射到[0,1]区间，再线性映射到目标位置，可实现画布中物体平滑往复运动，两端减速、中心加速。避免手动方向翻转和边界检测，使用requestAnimationFrame时间戳确保稳定，支持多维扩展。

本文介绍如何利用正弦函数为 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），这样周期才能保持稳定。

完整可运行示例

下面是一个可以直接运行的示例，一个圆球在画布内来回平滑运动——两端减速、中间加速，效果非常自然：

注意事项与优化建议

避免使用独立计数器（如 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() 会自动闭合路径），但留着也无妨。