缓动曲线生成
拖拽控制点调出 cubic-bezier 缓动曲线，配小方块动画实时预览快慢节奏；复制 CSS timing-function 或 JS 数值都行。
>_ 使用指南 · GUIDE
拖动两个控制点来调 cubic-bezier 缓动曲线，配一个来回移动的小方块实时预览快慢节奏。调好后可以复制成 CSS 的 timing-function，也可以复制出四个 JS 数值，交给动画库或自己计算。
四个参数 (x1, y1, x2, y2) 是控制点坐标：x 代表时间进度、y 代表完成比例。x 必须落在 0–1 之间，超出会让曲线不是合法的缓动函数（浏览器也无法处理时间倒退或跳变）；而 y 不受限制，把 y 调到大于 1 或小于 0 就能做出 overshoot——先冲过头再回落，也就是常见的回弹 / 弹簧效果。预设 linear 是匀速、ease 默认两端略慢、ease-in-out 两端对称地慢，理解它们对应的坐标，改起来更有方向。
典型步骤：
- 选一条预设或从零开始：先用
ease-in-out之类打底 - 拖动两个控制点：调整
(x1,y1)与(x2,y2) - 看动画预览：小方块循环播放，感受节奏
- 需要时对比多条曲线：并列观察不同曲线的差异
- 复制 CSS 或 JS 数值：按用途选择输出
>_ 常见问题 · FAQ
Q1 · cubic-bezier 的四个参数分别是什么？
依次是起点控制点与终点控制点的坐标：(x1, y1) 与 (x2, y2)。x 是时间轴上的进度（0 到 1），y 是该时刻的完成比例。曲线的实际形状就是这条三次贝塞尔，从 (0,0) 出发、到 (1,1) 结束。
Q2 · 为什么控制点拖不出某个范围？
因为 x 被限制在 0–1 之间，这是合法缓动函数的要求：时间只能前进、不能倒退或超出区间。所以你在水平方向会被夹住；但竖直方向（y）不受限，可以拖出区间去做回弹，这是刻意的设计。
Q3 · 怎么实现回弹或弹簧效果？
把 y 拖到超过 1 或低于 0，让曲线在到达终点前先冲过目标再回落。例如 cubic-bezier(0.34, 1.56, 0.64, 1) 就有明显的回弹感。要想更像弹簧，可以让两个控制点在竖直方向都略微超出上边界，形成一次「过冲—回稳」的节奏。
Q4 · ease 和 ease-in-out 有什么区别？
ease 的曲线两端速度不同——起步较快、接近终点时慢下来，是 CSS 的默认值；ease-in-out 则是两端对称地慢、中段快，起止都更平缓。想收尾更柔和用 ease-in-out，想还原浏览器默认手感用 ease。
Q5 · 应该复制 CSS 还是 JS 数值？
只给 CSS 动画或过渡用，就复制 timing-function，例如 transition: all .3s cubic-bezier(...);。若你在 JS 动画库、Canvas 或游戏循环里手动插值，则复制四个数值 [x1, y1, x2, y2] 自己算进度。两种输出是同一曲线的不同表达。