缓动函数可视化

怎么用

1. 从列表里选一种缓动。列表分为基础、四种 CSS 关键字曲线、九个族（sine 到 bounce）的 in / out / inOut 变体，以及三种弹簧预设。
2. 看画布：实线是所选缓动，虚线对角线是匀速参照，移动的小圆点表示当前时刻的进度。
3. 点 Play 运行运动预览。实心小球走缓动，空心小球匀速前进，方便对比。
4. 填上你实际要用的时长，再选导出格式。
5. 复制生成的代码。CSS 格式给出 transition-timing-function，JavaScript 格式给出接收 t 的独立函数。

常见用法

• 写代码前先挑曲线 —— 在同一张画布上比较 easeOutCubic 与 easeOutQuint，不用靠名字猜手感。
• 把曲线交给设计 —— 复制 cubic-bezier 数值写进设计变量，让 CSS 与动画库用同一条曲线。
• 对齐已有的动效规范 —— 规范里写的 GSAP power2.out 在这里对应 easeOutCubic。
• 调弹簧手感 —— 三种弹簧预设可以直观看到衰减与频率如何改变过冲，先看清再定数值。
• 讲清缓动是什么 —— 匀速参照球一摆出来，加速与减速就看得见了。

常见问题

问：cubic-bezier 输出对所有缓动都精确吗？ 答：只有 linear 与四种 CSS 关键字曲线是精确的，它们本身就是 cubic-bezier。弹跳、弹性与弹簧族的输出是最小二乘拟合结果：这些曲线会反复过冲，单段 cubic-bezier 只能逼近形状。

问：JavaScript 导出为什么要限制 t 的范围？ 答：生成函数把输入限制在 0 到 1，这样偶尔晚一帧也不会把进度推过终点值。如果你需要区间外的过冲，可以把这行限制去掉。

问：Anime.js 与 GSAP 的字符串能直接用吗？ 答：生成结果遵循 Anime.js v3 与 GSAP 3 的命名。旧版本名称不同；弹簧缓动映射到最接近的内置参数组合，不是完全等价。