Canvas平滑移动效果的关键在于插值算法而非刷新速度——线性位移因加速度突变导致视觉生硬，而ease-in-out、ease-out-cubic、spring等插值函数可生成符合人眼感知的S型或缓动曲线；轨迹为贝塞尔曲线时需结合弧长查表实现空间插值；实操中须用requestAnimationFrame驱动、保留小数坐标并clearRect清帧。
Canvas平滑移动效果的关键不在“画得快”，而在“算得准”——直接线性改变坐标会导致速度突变、停顿感强，而插值算法能生成符合人眼感知节奏的位置序列，让位移真正自然。
为什么线性位移不平滑
用 obj.x += speed 这类固定步长更新，在帧率波动或起止阶段会暴露问题：初始加速生硬、结束减速 abrupt、中间匀速缺乏缓动。人眼对加速度变化敏感，纯线性参数映射到位置上，实际运动曲线是直线，但视觉预期是带缓冲的S型或抛物线。
常用插值函数与适用场景
选对插值方式比写对代码更重要。不同函数控制运动节奏：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
-
ease-in-out（三次缓动）：最通用，起止慢、中间快，适合大多数UI元素入场/退出；公式：
t * t * (3 - 2 * t) -
ease-out-cubic：缓慢启动后快速冲向终点，适合弹出提示、按钮反馈；公式：
1 - Math.pow(1 - t, 3) - spring 模拟：带轻微过冲和震荡衰减，适合拟物化交互（如拖拽回弹）；需微分方程离散求解，可用简化阻尼弹簧模型
结合贝塞尔路径做空间插值
当移动轨迹本身是曲线（比如导航图标沿道路行驶），仅时间插值不够，还需空间插值——即在贝塞尔曲线上按弧长均匀采样：
- 先用
bezierCurveTo绘制路径，但不直接用参数t取点 - 预计算路径的离散弧长表（100–200段），构建
t → 累计长度映射 - 动画中按目标进度
s ∈ [0,1]查表反推对应t，再代入贝塞尔公式求坐标 - 避免每帧重复积分，查表+二分查找即可满足实时性
动画循环中的落地要点
插值结果要稳稳落到每一帧渲染中，注意三个实操细节：
- 用
requestAnimationFrame驱动，而非setInterval，确保与屏幕刷新同步 - 位移值保留小数（如
x = 123.456），Canvas 像素渲染会自动抗锯齿，强行取整反而抖动 - 每次重绘前调用
clearRect()清空旧帧，别依赖save/restore——后者不清像素，只管变换栈
