UI 动效参数交接
开发交付 UI 稿时，动效说明常写「弹窗 0.3 秒缓入」。但每个设计师对「缓入」的理解不同，开发还原后总差一点。设计师在工具里拖出精确的贝塞尔曲线（如 cubic-bezier(0.34, 1.56, 0.64, 1)），把四个数值直接写在标注上。开发复制粘贴即可 1:1 还原，省去「再调一下」的反复沟通。
控制点Control Points · x 夹 0–1，y 可超界回弹
P1 · X1 0 – 1
P1 · Y1 -1 – 2
P2 · X2 0 – 1
P2 · Y2 -1 – 2
cubic-bezier(.25, .1, .25, 1)ease预 设Easing Gallery · CSS 内置 + Penner
当前
★
linear
○
就绪 · 拖拽控制点实时生成缓动曲线 · 全程浏览器本地处理
第一节
关于本工具
About前端动画卡在0.4秒处突然加速，是贝塞尔曲线控制点没调准。这个编辑器用鼠标拖拽两个控制点就能即时调整缓动曲线，同时内置ease-in、ease-out等12组预设，复制生成的cubic-bezier()代码直接粘贴进CSS。所有计算在浏览器本地执行，曲线不会上传到任何服务器。
使用场景
H5 弹窗入场手感调优
运营活动页的弹窗入场，默认 ease-out 太生硬，像纸片掉落。设计师想要一种「先快后慢再轻微回弹」的拟物手感。在工具里先选预设「ease-out」，再把第三控制点向右上拖至 (0.8, 1.2)，让曲线末端越过 1.0 产生回弹。预览后确认回弹幅度不过分，直接复制代码值。
loading 动画节奏控制
App 启动时的 loading 转圈动画，匀速旋转显得机械。想做成「加速-匀速-减速」的呼吸感。在工具里把贝塞尔曲线调成三段式：前段陡升（加速），中段平直（匀速），末段平缓（减速）。通过拖拽控制点实时观察曲线形状，确保总时长 1.2 秒内完成一次完整周期，不卡顿不拖沓。
游戏 UI 按钮反馈曲线
手游按钮按下时需 0.15 秒内完成「缩小-回弹」反馈，太快则玩家无感知，太慢则影响连击操作。在工具里将曲线起点设为 (0, 0)，终点 (1, 1)，第一控制点拉到 (0.1, 0.9) 让初始下压极快，第二控制点拉至 (0.9, 0.1) 让回弹干脆。0.15 秒内完成，手感利落。
页面滚动视差效果调试
品牌落地页的背景图滚动速度需比前景文字慢 30%，形成纵深感。直接用 linear 滚动会脱节。在工具里把贝塞尔曲线调成 (0.25, 0.1, 0.25, 1)，让背景滚动先慢后快，与前景文字滚动曲线形成差异化。拖拽时对比两条曲线的相对速度差，确保视觉上不晕眩。
第二节
使用指南
Getting Started使用步骤
- 1在画布上拖拽两个控制点（P1、P2），曲线形状随拖拽实时更新
- 2从左侧预设列表点选「ease-in」「ease-out」等缓动曲线，曲线自动跳转至对应形态
- 3点「预览」按钮播放动画示例，观察缓动效果在运动轨迹上的表现
- 4点击「复制代码」按钮，将当前 cubic-bezier 值（如 cubic-bezier(0.42, 0, 0.58, 1)）存入剪贴板
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 预设：ease-in-out | P1(0.42, 0.0) P2(0.58, 1.0) 曲线形态：先慢后快再慢 | 常规：最常用缓动预设，验证预设加载后控制点坐标与曲线形态描述是否正确 |
| 预设：ease-in | P1(0.42, 0.0) P2(1.0, 1.0) 曲线形态：先慢后快 | 常规：另一种常见预设，验证 P2 锚定在 (1,1) 时曲线是否仍正确渲染 |
| 手动拖拽：P1(0.0, 0.0) P2(1.0, 1.0) | 线性曲线 曲线形态：匀速 | 边界：控制点与端点重合时退化为线性，验证工具是否识别并显示'线性'而非报错 |
| 手动拖拽：P1(0.5, 0.5) P2(0.5, 0.5) | P1(0.5, 0.5) P2(0.5, 0.5) 曲线形态：单点停顿（非标准缓动） | 边界：两个控制点完全重合，验证工具是否崩溃或给出合理提示 |
| 手动拖拽：P1(0.1, -0.2) P2(0.9, 1.3) | P1(0.1, -0.2) P2(0.9, 1.3) 曲线形态：超出[0,1]范围，产生回弹效果 | 边界：控制点纵坐标超出 0-1，验证工具是否允许并正确渲染回弹曲线 |
| 手动拖拽：P1(0.8, 0.2) P2(0.2, 0.8) | P1(0.8, 0.2) P2(0.2, 0.8) 曲线形态：先快后慢再快（非单调） | 易错：P1.x > P2.x 导致曲线非单调，新手常误以为 x 必须递增，验证工具是否仍能计算 |
| 手动输入坐标：P1(0.25, 0.1) P2(0.25, 0.9) | P1(0.25, 0.1) P2(0.25, 0.9) 曲线形态：垂直段（非标准缓动） | 易错：两个控制点 x 坐标相同导致垂直切线，验证工具是否处理此退化情况 |
常见错误对照
1.将贝塞尔曲线起点固定在 (0,0) 之外
✗ 错误
拖拽控制点使曲线起点离开左下角✓ 修复
确保第一个控制点锚定在 (0,0)，终点锚定在 (1,1)CSS 缓动函数 cubic-bezier() 的坐标系严格限定：起点 (0,0)、终点 (1,1)。若起点偏移，生成的曲线在 CSS 中无效，浏览器会回退到默认 ease。
2.控制点 X 坐标超出 [0,1] 范围导致非预期反向
✗ 错误
将 P1 的 X 拖到 1.3，P2 的 X 拖到 -0.2✓ 修复
保持两个控制点的 X 坐标均在 0 到 1 之间，例如 P1(0.2, 0.8)、P2(0.7, 0.3)CSS cubic-bezier 规范要求控制点 X 必须在 [0,1] 内，超出后曲线可能产生时间回退（非单调），导致动画出现“倒流”效果，不符合预期。
3.混淆 cubic-bezier 与缓动函数关键字
✗ 错误
在 CSS 中写 transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1); 但期望得到 ease-in-out 效果✓ 修复
使用 cubic-bezier(0.42, 0, 0.58, 1) 时，知道它等价于 ease-in-out，但直接写 ease-in-out 更简洁cubic-bezier(0.42, 0, 0.58, 1) 确实是 ease-in-out 的数学定义，但许多开发者误以为这是不同的效果。实际上 CSS 关键字就是这些坐标的别名。
4.忽略 Y 坐标超出 [0,1] 导致的弹跳效果
✗ 错误
将控制点 Y 拖到 1.5 或 -0.3 却期望平滑过渡✓ 修复
Y 坐标超出 [0,1] 时，动画会出现超出终点的弹跳效果（如 overshoot），这是有意行为与 X 不同，CSS 允许 Y 坐标超出 [0,1]，产生弹性或回弹动画。若不需要弹跳，应将 Y 限制在 [0,1] 内。
5.误以为拖拽控制点会改变曲线起点或终点位置
✗ 错误
尝试拖拽曲线起点（左下角）或终点（右上角）来调整动画范围✓ 修复
只拖拽两个控制点（P1、P2），起点和终点是固定的 (0,0) 和 (1,1)贝塞尔曲线的四个点中，起点和终点是固定的 CSS 约束，只有中间两个控制点可调。试图移动端点会破坏曲线定义。
6.将预设缓动函数直接用于非 CSS 场景（如 Canvas 动画）
✗ 错误
在 Canvas requestAnimationFrame 中直接使用 cubic-bezier(0.25, 0.1, 0.25, 1) 作为时间插值✓ 修复
在 Canvas 中需手动实现贝塞尔曲线求值函数，或使用现成库如 bezier-easingCSS 的 cubic-bezier() 是浏览器内置的缓动函数，仅对 CSS 过渡/动画生效。Canvas 或 JS 动画需要自己计算贝塞尔曲线上的点。
7.复制曲线坐标时漏掉逗号或括号
✗ 错误
从工具复制得到 0.42 0 0.58 1 直接粘贴到 CSS✓ 修复
粘贴为 cubic-bezier(0.42, 0, 0.58, 1) 完整格式CSS 函数要求严格语法：cubic-bezier(x1, y1, x2, y2)。缺少逗号或括号会导致 CSS 解析失败，整个声明被忽略。
第三节
工作原理
How It Works核心公式
B(t) = (1-t)³P₀ + 3(1-t)²t P₁ + 3(1-t)t² P₂ + t³P₃
变量说明
t参数，范围 0 到 1，表示曲线进度P₀起点坐标，通常为 (0,0)P₁第一个控制点坐标，用户拖拽设定P₂第二个控制点坐标，用户拖拽设定P₃终点坐标，通常为 (1,1)B(t)t 时刻的曲线位置 (x,y)
示例
预设缓出曲线 P₁=(0.25,0.1), P₂=(0.25,1)，取 t=0.5：B(0.5) = (1-0.5)³(0,0) + 3(1-0.5)²·0.5·(0.25,0.1) + 3(1-0.5)·0.5²·(0.25,1) + 0.5³(1,1) = (0,0) + (0.09375,0.0375) + (0.09375,0.375) + (0.125,0.125) = (0.3125,0.5375)。即动画进行到一半时，x 进度约 31%，y 进度约 54%，呈现先慢后快的缓出效果。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我拖了控制点，曲线变了但动画效果没感觉出来有变化，是不是工具坏了？＋
答
工具没坏。Cubic-Bezier 曲线只定义动画的“速率变化”，不是动画本身。如果你在浏览器开发者工具里测试，需要配合一个具体属性（比如位移、透明度）才能看出缓动效果。在本工具里拖拽后，右侧预览区会循环播放一个方块移动，那个才是实际效果。如果方块移动看起来还是匀速，检查一下曲线是不是接近直线（两个控制点都在对角线上）。
问这些预设曲线（ease-in、ease-out）和手拖出来的有什么区别？＋
答
预设曲线是标准化的固定值，直接拿来用就行，适合快速开发。比如 ease-out 对应 (0, 0, 0.58, 1.0)。手拖出来的曲线可以精确控制加速和减速的时机，比如做一个“先快后慢再快”的弹性感，预设里没有。如果只是做普通淡入淡出，用预设更快；如果需要模拟物理惯性（比如弹簧效果），就自己拖。
问为什么我按网上教程设了 cubic-bezier(0.68, -0.55, 0.27, 1.55) 但动画弹得特别夸张？＋
答
你用的这个曲线 Y 值出现了负数（-0.55）和大于 1 的值（1.55），这叫“超出边界”。在 CSS 里 cubic-bezier 的 P1 和 P2 的 x 值必须在 [0, 1] 之间，但 y 值可以超出 [0, 1]，这会制造“回弹”或“过头”效果。你设的 y 值范围大，回弹幅度就大。如果想控制回弹力度，把 y 的绝对值调小，比如 (0.68, -0.3, 0.27, 1.2) 会更温和。
问拖控制点的时候，怎么让曲线刚好经过某个特定的中间点？＋
答
Cubic-Bezier 曲线是贝塞尔曲线，不保证经过控制点本身，只保证起点 (0,0) 和终点 (1,1) 经过。两个控制点（P1、P2）只决定曲线的“形状趋势”，不经过。如果你需要曲线精确经过某个中间坐标（比如 0.5, 0.7），不能用单段 cubic-bezier 实现，需要分段贝塞尔曲线或改用 steps() 函数。本工具只支持单段曲线，无法精确过点。
问这个工具生成的代码是 CSS 里直接用的吗？复制到哪里？＋
答
是的，本工具右侧会实时生成 `cubic-bezier(x1, y1, x2, y2)` 格式的字符串。直接复制它，粘贴到 CSS 的 `transition-timing-function` 或 `animation-timing-function` 属性值里即可。例如：`transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);`。注意不要复制整段示例代码，只复制括号里的四个数字。
问拖拽的时候曲线突然跳了一下，是不是我操作不对？＋
答
大概率是拖拽时鼠标移出了控制点的可拖拽区域，或者碰到了画布边缘。本工具的控制点可拖拽范围是画布内的 0-1 区间，如果鼠标拖出画布，控制点会停在边界（0 或 1）。建议拖拽时按住鼠标不松手，直到定位到目标位置再松开。如果频繁跳动，检查鼠标是否在触摸板上有误触，或者尝试用键盘方向键微调（本工具有没有键盘支持，以页面实际标注为准）。
问这个工具和 Chrome 开发者工具里的缓动编辑比，哪个好用？＋
答
Chrome DevTools 的缓动编辑功能更强，能直接关联页面元素实时预览，并且支持预设和手动微调。本工具的优势是独立、轻量、打开即用，不需要启动开发者工具，适合快速生成一段曲线代码然后粘贴到项目里。如果只是临时查一个曲线值或者做简单调整，本工具更快；如果需要边调试边看页面效果，Chrome 的更好。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。