缓动曲线调试器

📖 工具介绍

缓动曲线调试器是一款帮助前端开发者与动效设计师可视化调试 cubic-bezier 缓动函数的免费在线工具。CSS 动画里的 animation-timing-function 决定了元素随时间加速或减速的节奏，传统上只能靠猜测四个数字的坐标来微调，非常不直观。本工具把这四个参数变成画布上可以直接拖拽的两个手柄：P0 固定在左下角 (0,0)，P3 固定在右上角 (1,1)，你只要用鼠标或手指拖动蓝色与绿色两个控制点，曲线就会用三次贝塞尔参数方程实时重绘，并同步显示当前的 cubic-bezier 代码。下方还有一个小球，它会严格按照你画出的缓动曲线从左滚到右，让你直观感受这条曲线作用在真实动画上的节奏。工具内置 ease、linear、ease-in、ease-out、ease-in-out 与 back 回弹六种常用预设，点击即可套用。所有曲线绘制与缓动反解都在浏览器本地完成，支持触屏拖拽，界面提供简中、繁中与英文三语。

✨ 功能特点

• 画布拖拽手柄：直接拖动 P1 与 P2，曲线随手指实时重绘，所见即所得
• 参数方程采样：用三次贝塞尔公式逐点采样绘制轨迹，数学上完全准确
• 真实缓动预览：小球按时间反解曲线 y 值滚动，还原真实动画节奏
• 六种常用预设：ease、linear、ease-in、ease-out、ease-in-out、back 一键套用
• 过冲支持：y 轴允许超出 0~1，可制作回弹与弹性入场效果
• 代码一键复制：自动生成两位小数的 cubic-bezier 代码，可直接粘贴使用

📝 使用方式

1. 用鼠标或手指拖动蓝色手柄 P1 与绿色手柄 P2，调整曲线形状
2. 观察下方小球的滚动节奏，判断这条缓动是否符合预期
3. 需要经典节奏时，点击右侧预设按钮快速套用对应曲线
4. 查看代码框中的 cubic-bezier 数值，确认无误后点击复制代码
5. 把复制的代码粘贴到项目的 animation-timing-function 中即可使用

⚠️ 注意事项

• x 轴范围：控制点 x 被限制在 0 到 1 之间，保证时间随曲线单调推进
• y 轴范围：y 允许在 -0.5 到 1.5 之间，超出即产生过冲回弹效果
• 缓动反解：小球预览用二分法求解参数 t，与浏览器真实缓动保持一致
• 触屏兼容：画布支持 Pointer 事件，手机和平板同样可以拖拽调试
• 本地运行：绘制与反解全部在浏览器完成，不产生任何网络请求