CSS 缓动曲线生成器的工作原理
CSS 缓动曲线生成器是一个用于视觉化创建 CSS 缓动曲线的在线工具。在网页动画和过渡效果中，缓动函数决定了属性值随时间变化的速率。通过在生成器中拖动两个控制点的手柄，用户可以直观地改变缓动曲线的形状。
在调整曲线时，界面会展示两个并排运动的小球：一个沿着你设计的曲线运动，另一个则以恒定速度进行匀速运动。这种对比能够实时演示缓动效果的实际动态。调整完成后，工具会生成对应的 cubic-bezier() 函数值，用户可以直接复制该值并应用到 CSS 代码中。
输入参数与控制规则
生成器支持通过多种方式调整缓动曲线，并对输入数值设有严格的范围限制：
- 拖动两个手柄：直接在画布上拖动控制点来改变曲线的弯曲程度。
- 第一个控制点 X 与 Y：数值输入框，其中 X 的取值范围限制在
0到1之间，Y 的取值范围限制在-0.70到1.70之间。 - 第二个控制点 X 与 Y：数值输入框，X 的取值范围同样限制在
0到1之间，Y 的取值范围限制在-0.70到1.70之间。 - 预设选择：可以直接选择内置的缓动预设，包括 "ease"、"ease-in"、"ease-out"、"ease-in-out"、"回拉进入"、"回拉退出" 以及 "回拉进出"。
边界值处理与键盘交互
为了保证生成的 CSS 代码合法，工具内置了以下输入校验和交互规则：
- 超出边界自动修正：如果用户在“第一个控制点 X”中输入了超出范围的数值（例如输入
9），在输入框失去焦点后，该数值会自动修正为上限值1。 - 空值恢复：如果清空了某个数值输入框并使其失去焦点，系统会自动恢复上一次有效的数值。
- 未完成输入等待：当输入框为空或输入了非数字字符时，系统会挂起并等待用户输入完整的数值。
- 微调控制：当选中某个控制点手柄时，按下键盘上的左方向键可以微调其数值，例如将数值减少至
0.99。
输出结果与状态反馈
调整曲线后，工具会实时更新并输出以下内容：
- 你的曲线：直观呈现当前缓动曲线的几何形状。
- cubic-bezier(x1, y1, x2, y2)：输出标准的 CSS
cubic-bezier()函数代码，其中的四个参数对应两个控制点的坐标。 - 已复制：当用户成功复制
cubic-bezier()数值后，界面会显示此状态提示。该复制操作仅提供成功状态反馈，不设显式的失败或拒绝提示。
贝塞尔曲线的数学逻辑与物理限制
在 CSS 中，三次贝塞尔曲线（Cubic Bezier）由四个点定义：起点 $(0, 0)$、终点 $(1, 1)$，以及两个自由活动的控制点 (x₁, y₁) 和 (x₂, y₂)。
- 时间与进度轴：曲线从左下角（起点）延伸至右上角（终点）。横轴（X 轴）代表时间流逝，从左向右推进；纵轴（Y 轴）代表动画的执行进度，从下往上增长。
- 时间轴的物理限制：因为时间不能倒流，所以控制点的 X 值必须严格限制在
0到1之间，确保曲线在横轴上单调递增。 - 进度轴的溢出效应：控制点的 Y 值允许超出
0到1的常规范围（限制在-0.70到1.70之间）。当 Y 值小于0时，动画会产生向后拉伸的蓄力效果（pull-back）；当 Y 值大于1时，动画在到达终点前会产生冲过头的超调效果（overshoot）。例如，选择 "回拉退出" 预设时，生成的cubic-bezier()值为cubic-bezier(0.34, 1.56, 0.64, 1)，其大于1的 Y 值会使动画产生明显的冲过头再回弹至终点的效果。 - 单向性限制：单个
cubic-bezier()函数虽然可以实现蓄力和冲过头效果，但它在数学上只能朝一个方向前进、并在终点稳定下来。它无法表达需要多次反转方向的复杂物理效果，例如多次弹跳（bounce）或来回震荡的弹性（elastic）效果。
应用场景
该生成器适用于以下开发与设计场景：
- 定制个性化缓动：当标准的 CSS 缓动关键字无法满足设计要求，需要为
transition-timing-function或animation-timing-function创建独特的自定义过渡效果时。 - 剖析标准关键字：帮助开发者理解
ease、ease-in、ease-out和ease-in-out等常用 CSS 关键字背后的具体数学坐标值。 - 实现物理动效：在 UI 动画中引入蓄力（anticipation）或超调（overshoot）等符合物理直觉的动效，提升界面的交互质感。
浏览器本地处理与隐私说明
本工具的曲线绘制与数值计算完全在用户的浏览器本地进行。你在工具中设置的任何参数和曲线数据均不会上传到 BroBroGo 服务器，确保了操作过程的私密性。
常见问题
两个手柄和四个数字是什么意思?
曲线从左下角(开始)走到右上角(结束):横轴是时间,从左到右;纵轴是进度,从下往上。两个手柄就是让曲线弯曲的控制点,每个手柄有一个 X 和一个 Y,合起来就是 cubic-bezier(x1, y1, x2, y2)。X 始终在 0 到 1 之间,而 Y 可以超出上边或低于下边,让动画在停下前先冲过头,或先往回拉一下。
生成的值怎么用到 CSS 里?
把 cubic-bezier() 复制走,填到任何需要缓动函数的地方——transition-timing-function、animation-timing-function,或者简写,比如 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)。ease、ease-in、ease-out、ease-in-out 这些关键字其实就是固定的 cubic-bezier 曲线,点对应的预设就能看到关键字背后的具体数值。
能做出弹跳(bounce)或弹性(elastic)效果吗?
单靠它做不到。一条 cubic-bezier 可以先蓄力、再冲过头——“back”预设就是把一个手柄拉出方框来实现的——但它只能朝一个方向走完再停下。弹跳和弹性会来回反转好几次,任何单条 cubic-bezier 都表达不了,那需要 CSS keyframes,或带很多分段的 linear() 函数。