Canvas动画速度控制的核心是缓动函数，它将标准化时间t∈[0,1]映射为f(t)∈[0,1]以调节属性变化节奏，实现先快后慢等自然效果，常用类型包括easeInQuad、easeOutQuad、easeInOutCubic和easeOutElastic。
Canvas动画中的速度控制，核心在于用缓动函数改变属性变化的节奏，让运动更自然。直接线性变化（匀速）往往显得生硬，而缓动函数通过数学公式调节每帧的增量，实现“先快后慢”“先慢后快”等效果。
缓动函数的本质是时间映射
它不是直接控制位置，而是把标准化的时间 t ∈ [0, 1]（代表动画从开始到结束的进度）映射为一个新的值 f(t) ∈ [0, 1]，再用这个值去插值起始值和目标值。比如：位置 = start + (end - start) × easing(t)。
- t = 0 时，f(0) 应为 0（起点未动）
- t = 1 时，f(1) 应为 1（终点完全到达）
- 中间段的导数（即变化率）决定加速或减速感
常用缓动类型与对应公式
多数缓动函数基于幂函数、正弦、指数或三次多项式构造，兼顾性能与表现力：
- easeInQuad（二次缓入）：t² —— 起始慢，逐渐加快
- easeOutQuad（二次缓出）：t × (2 − t) —— 起始快，临近结束变慢
- easeInOutCubic（三次缓入缓出）：t³ × (10 − 15t + 6t²) —— 两端缓、中间快，适合平滑过渡
- easeOutElastic（弹性缓出）：需正弦+指数组合，模拟回弹效果，适合强调性动作
在Canvas动画中集成缓动的实用方式
不依赖第三方库时，可封装一个通用插值函数，在requestAnimationFrame循环中调用：
- 定义 easing 函数（如 const easeOutQuad = t => t * (2 - t)）
- 记录动画起始时间，每帧计算已过去时间占比 t = Math.min((now - startTime) / duration, 1)
- 用 easing(t) 计算当前插值比例，更新对象属性（x、y、scale 等）
- 注意：避免在每次渲染中重复创建缓动函数，应预先定义或缓存
调试与优化小提示
缓动效果是否到位，关键看视觉节奏是否匹配交互意图：
- 菜单展开推荐 easeOutQuart，比 Quad 更柔和；按钮点击反馈可用 easeInSine，响应更灵敏
- 过度复杂的缓动（如多阶弹性）会增加CPU计算负担，尤其在低端设备上可能掉帧
- 用 Chrome DevTools 的 Rendering 面板开启“FPS meter”，观察动画是否稳定维持60fps
