CUBIC-BEZIER EDITOR · EASING
贝塞尔曲线编辑器
三次贝塞尔可视化设计 · cubic-bezier 缓动函数 · 实时动画预览
Cubic-Bezier 编辑
拖拽控制点/缓动曲线预设
412 次访问
曲线编辑
动画预览
预设缓动
CSS 代码
关于本工具
了解工具定位 · 使用场景 · 对比优势
拖拽曲线控制点，实时预览缓动效果，并生成可直接用于 CSS 的 cubic-bezier 函数。前端开发者调整动画节奏、UI 设计师微调过渡曲线时，无需反复切回代码编辑器。所有计算在浏览器内完成，曲线参数不上传服务器。
使用场景
UI 动效调优
前端开发者在实现页面入场动画时，默认的 ease 曲线过于生硬。通过拖拽贝塞尔控制点，可实时预览弹窗缩放、列表滑入的缓动效果，找到视觉反馈最自然的曲线参数（如 cubic-bezier(0.34, 1.56, 0.64, 1) 模拟弹性回弹），避免反复修改代码后刷新预览的低效流程。
游戏过场动画
游戏设计师为角色死亡动画配置缓动曲线，希望有“先慢后快再慢”的坠落感。使用预设库中的 ease-in-out 变体作为起点，拖拽控制点微调加速区间，实时预览使曲线匹配期望的运动节奏，导出参数后直接集成到 Unity 的 Animation Curve 中。
交互动效原型
产品经理在 Figma 原型中需要模拟“卡片滑动删除”的物理手感。打开本工具，从预设库选择 ease-out 曲线，再拖拽第一个控制点降低初始速度，使滑动动作在松手后快速减速，复制生成的 cubic-bezier 值粘贴到原型软件的缓动参数中，无需手动计算。
数据可视化过渡
数据可视化工程师制作柱状图更新动画时，默认线性过渡导致视觉跳跃。使用本工具将缓动曲线调整为 cubic-bezier(0.25, 0.46, 0.45, 0.94)，使柱子从底部升起时先快后慢，符合人眼对“重量感”的预期，同时对比多条曲线的速度曲线图，选择最平滑的参数。
CSS 动画调试
全栈工程师在开发产品落地页的视差滚动效果时，需要自定义 scroll-driven 动画的缓动曲线。通过拖拽控制点生成 cubic-bezier 函数，直接复制到 CSS transition-timing-function 属性中，实时调整曲线形态直到背景层与前景层的移动节奏同步，无需反复刷新页面。
对比矩阵本工具 vs 竞品 vs 传统方法
| 维度 | 本工具 (bezier.tl654.com) | Ceaser (cubic-bezier.com) | 手动编写 CSS |
|---|---|---|---|
| 数据隐私 | 纯浏览器处理，曲线数据不上传服务器 | 纯浏览器处理，曲线数据不上传服务器 | 不涉及数据，仅在代码中编写 |
| 操作方式 | 拖拽控制点 + 预设库选择 | 拖拽控制点 + 预设库选择 | 手动输入 cubic-bezier(n,n,n,n) 参数 |
| 调试反馈 | 实时预览曲线动画效果 | 实时预览曲线动画效果 | 需刷新浏览器或使用 DevTools 预览 |
| 预设数量 | 内置 20+ 缓动预设 | 内置 10+ 缓动预设 | 无预设，需自行记忆或查询标准值 |
| 导出格式 | 复制 CSS 代码片段 | 复制 CSS 代码片段 | 直接在 CSS 文件中编写 |
| 离线可用 | 完全离线，无需网络 | 完全离线，无需网络 | 完全离线，无需网络 |
| 学习成本 | 零学习成本，拖拽即用 | 零学习成本，拖拽即用 | 需理解贝塞尔曲线参数含义 |
使用指南
上手步骤 · 输入输出 · 避坑提示
使用步骤
- 从预设缓动列表（ease-in / ease-out / ease-in-out）选择一个起点，或直接拖拽曲线上的两个控制点（P1、P2）调整形状
- 拖拽控制点时，右侧预览区域实时显示动画效果（位置 / 透明度变化）
- 点击「复制 CSS」按钮，将当前 cubic-bezier(n,n,n,n) 值复制到剪贴板
- 将复制的值粘贴到 CSS transition / animation 的 timing-function 属性中
输入输出示例7 个典型场景，覆盖常规、边界与易错
| 输入 | 输出 | 说明 |
|---|---|---|
| ease-in-out (0.42, 0.0, 0.58, 1.0) | 生成的 CSS 代码：cubic-bezier(0.42, 0.0, 0.58, 1.0)；曲线形态：先加速后减速，两端平缓 | 典型场景：最常用的缓动预设，适合元素入场和退场 |
| ease-out (0.0, 0.0, 0.58, 1.0) | 生成的 CSS 代码：cubic-bezier(0.0, 0.0, 0.58, 1.0)；曲线形态：快速启动后逐渐减速 | 典型场景：用户交互反馈，如按钮点击后的弹起效果 |
| linear (0.0, 0.0, 1.0, 1.0) | 生成的 CSS 代码：cubic-bezier(0.0, 0.0, 1.0, 1.0)；曲线形态：一条直线，匀速运动 | 典型场景：进度条或机械运动，无任何缓动效果 |
| 自定义：P1(0.1, 0.8)，P2(0.9, 0.2) | 生成的 CSS 代码：cubic-bezier(0.1, 0.8, 0.9, 0.2)；曲线形态：先快后慢再快，有回弹感 | 边界 case：控制点 Y 值接近 1.0，产生强烈弹性错觉 |
| 自定义：P1(0.0, 1.5)，P2(1.0, -0.5) | 生成的 CSS 代码：cubic-bezier(0.0, 1.5, 1.0, -0.5)；曲线形态：超出 0~1 范围，产生过冲和回弹 | 边界 case：Y 值超出 [0,1]，曲线会超出边界，产生弹跳效果 |
| 自定义：P1(0.5, 0.5)，P2(0.5, 0.5) | 生成的 CSS 代码：cubic-bezier(0.5, 0.5, 0.5, 0.5)；曲线形态：接近线性但略有偏移 | 易错 case：两个控制点重合，曲线退化为近似直线 |
| 自定义：P1(0.0, 0.0)，P2(0.0, 0.0) | 生成的 CSS 代码：cubic-bezier(0.0, 0.0, 0.0, 0.0)；曲线形态：所有点重合，运动瞬间完成 | 易错 case：控制点全为 (0,0)，曲线退化为一个点，动画无过渡 |
常见错误对照8 个常踩的坑 · 错误 → 修复
1. 误以为 P1 和 P2 必须按时间顺序排列
错误
P1=(0.1, 0.8), P2=(0.9, 0.2) 时，觉得曲线会先快后慢修复
P1=(0.1, 0.8), P2=(0.9, 0.2) 表示先快（P1 高 y）后慢（P2 低 y），且 P1.x < P2.x 满足标准 cubic-bezier 定义cubic-bezier 的 P1.x 和 P2.x 必须在 [0,1] 内且 P1.x ≤ P2.x（时间单调递增），但 P1.y 和 P2.y 可任意（超出 [0,1] 产生弹性/回弹效果）
2. 把控制点 y 值限制在 0~1 之间
错误
P1=(0.25, 0.5), P2=(0.75, 1.0) 认为 y 不能超过 1修复
P1=(0.25, 1.5), P2=(0.75, -0.5) 实现弹性回弹效果CSS cubic-bezier() 允许 y 值超出 [0,1] 产生 overshoot 或 bounce 效果；只有 x 值必须严格在 [0,1] 内保证时间单调
3. 用 cubic-bezier 模拟线性时把 P1 和 P2 设为 (0, 0) 和 (1, 1) 以外的值
错误
P1=(0.2, 0.2), P2=(0.8, 0.8) 以为也是线性修复
P1=(0, 0), P2=(1, 1) 才是标准线性只有 P1=(0,0) 且 P2=(1,1) 时贝塞尔曲线退化为直线；其他对称点（如 0.2,0.2 和 0.8,0.8）实际产生 S 形缓入缓出
4. 混淆 CSS 函数名：cubic-bezier 写成 bezier 或 cubicbezier
错误
animation-timing-function: bezier(0.25, 0.1, 0.25, 1);修复
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);CSS 标准只支持 cubic-bezier() 函数名，无简写；拼写错误或省略 cubic 前缀会导致 CSS 解析失败，回退到默认 ease
5. 把四个参数顺序记成 (x1, y1, x2, y2) 以外的顺序
错误
cubic-bezier(0.5, 0.25, 1, 0.25) 把 P1 和 P2 的 x/y 互换修复
cubic-bezier(0.25, 0.5, 0.25, 1) 正确顺序：P1.x, P1.y, P2.x, P2.y参数顺序固定为 P1.x, P1.y, P2.x, P2.y；交换任意一对坐标会完全改变曲线形状，且可能导致 x 不单调
6. 以为预设名（ease-in-out）和 cubic-bezier 值一一对应且可互换
错误
ease-in-out 等价于 cubic-bezier(0.42, 0, 0.58, 1) 但误写成 cubic-bezier(0.4, 0, 0.6, 1)修复
CSS 预设 ease-in-out 精确对应 cubic-bezier(0.42, 0, 0.58, 1)；近似值（如 0.4, 0, 0.6, 1）会产生肉眼可见的差异CSS 规范为每个预设关键字定义了精确的贝塞尔参数，微调 P1.x/P2.x 0.02 即可改变缓动节奏，尤其在短时间动画中差异明显
7. 在非 CSS 环境（如 Canvas/WebGL）直接使用 CSS 坐标范围
错误
在 Canvas 动画中直接使用 cubic-bezier(0.25, 0.1, 0.25, 1) 作为插值函数修复
在 Canvas 中需手动实现贝塞尔曲线求值（如 De Casteljau 算法）或使用第三方库（如 bezier-easing）CSS cubic-bezier() 是浏览器渲染引擎内置的缓动函数，Canvas/WebGL 环境不自动支持；需用数学方法计算 t 时刻的曲线值
8. 把控制点 x 值设为 0~1 范围外
错误
cubic-bezier(1.2, 0.5, 0.8, 0.3) 让 P1.x=1.2修复
cubic-bezier(1, 0.5, 0.8, 0.3) 将 P1.x 限制在 [0,1] 内CSS 规范要求 P1.x 和 P2.x 必须在 [0,1] 闭区间内，否则整个 cubic-bezier() 声明无效，动画回退到 ease
工作原理
公式推导 · 流程图解 · 依据出处
核心公式
B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3
变量说明
B(t)— t 时刻曲线上的点坐标t— 参数，取值范围 0 到 1P0— 起点坐标（通常为 (0,0)）P1— 第一个控制点坐标P2— 第二个控制点坐标P3— 终点坐标（通常为 (1,1)）
示例
缓动曲线预设「ease-in-out」对应控制点 P1=(0.42,0), P2=(0.58,1)。取 t=0.5 代入：B(0.5) = 0.125×(0,0) + 0.375×(0.42,0) + 0.375×(0.58,1) + 0.125×(1,1) = (0.375, 0.5)。即动画进行到一半时，进度为 50%，符合对称缓动特征。
适用范围
标准三次贝塞尔曲线公式，适用于 CSS transition-timing-function、动画缓动曲线编辑。仅定义在 t∈[0,1] 区间，超出范围不保证单调性。P0 和 P3 固定为 (0,0) 和 (1,1) 时，曲线表示进度-时间映射关系。
原理图
用户输入
本地处理
输出结果
辅助功能
开发者集成
3 种主流语言 · 复制即用
// 三次贝塞尔曲线求值：给定四个控制点 (P0, P1, P2, P3) 和参数 t (0~1)，返回曲线上点的坐标
function cubicBezier(t, P0, P1, P2, P3) {
const u = 1 - t;
return u*u*u * P0 + 3*u*u*t * P1 + 3*u*t*t * P2 + t*t*t * P3;
}
// 示例：缓入缓出曲线 (0, 0.42, 0.58, 1)
const t = 0.5;
const x = cubicBezier(t, 0, 0.42, 0.58, 1);
const y = cubicBezier(t, 0, 0.42, 0.58, 1);
console.log(`t=${t} → (x=${x.toFixed(4)}, y=${y.toFixed(4)})`); // t=0.5 → (x=0.5000, y=0.5000)
// 实际缓动：将时间比例 t 映射为动画进度
function easeInOut(t) {
return cubicBezier(t, 0, 0.42, 0.58, 1);
}
console.log(easeInOut(0.25)); // ≈0.1309import numpy as np
def cubic_bezier(t, p0, p1, p2, p3):
"""三次贝塞尔曲线求值，t 为 0~1 浮点数"""
u = 1 - t
return u**3 * p0 + 3 * u**2 * t * p1 + 3 * u * t**2 * p2 + t**3 * p3
# 示例：CSS ease-out 曲线 (0, 0, 0.58, 1)
t = 0.5
x = cubic_bezier(t, 0, 0, 0.58, 1)
y = cubic_bezier(t, 0, 0, 0.58, 1)
print(f"t={t} → (x={x:.4f}, y={y:.4f})") # t=0.5 → (x=0.5000, y=0.5000)
# 批量生成缓动曲线点（用于动画帧）
ts = np.linspace(0, 1, 5)
points = [(cubic_bezier(t, 0, 0, 0.58, 1), cubic_bezier(t, 0, 0, 0.58, 1)) for t in ts]
print(points) # [(0.0, 0.0), (0.0625, 0.0625), (0.5, 0.5), (0.9375, 0.9375), (1.0, 1.0)]package main
import "fmt"
// cubicBezier 计算三次贝塞尔曲线在 t 处的值（单一维度）
func cubicBezier(t, p0, p1, p2, p3 float64) float64 {
u := 1 - t
return u*u*u*p0 + 3*u*u*t*p1 + 3*u*t*t*p2 + t*t*t*p3
}
func main() {
// 示例：CSS ease-in-out 曲线 (0.42, 0, 0.58, 1)
t := 0.5
x := cubicBezier(t, 0, 0.42, 0.58, 1)
y := cubicBezier(t, 0, 0.42, 0.58, 1)
fmt.Printf("t=%.1f → (x=%.4f, y=%.4f)\n", t, x, y) // t=0.5 → (x=0.5000, y=0.5000)
// 生成 0~1 的 5 个采样点
for i := 0; i <= 4; i++ {
t := float64(i) / 4
x := cubicBezier(t, 0, 0.42, 0.58, 1)
y := cubicBezier(t, 0, 0.42, 0.58, 1)
fmt.Printf("t=%.2f → (%.4f, %.4f)\n", t, x, y)
}
}常见问题
8 个高频疑问
拖拽控制点的时候，曲线预览和实际动画效果对不上，是哪里出了问题？
工具预览的是「缓动曲线」本身（即动画进度与时间的关系），但最终动画效果还受 duration、delay、iteration count 等因素影响。如果预览看起来平缓，实际动画却很快，检查 CSS 里是否设置了 animation-duration 过短（比如 0.2s）。另外，浏览器渲染帧率（60fps vs 30fps）也会让视觉感受有差异，建议在 Chrome DevTools 的 Performance 面板里录制一段动画，对比曲线斜率与帧时间线是否一致。
拖出来的曲线坐标值能直接复制到 CSS 里用吗？格式是什么？
可以。工具输出的坐标格式是 cubic-bezier(x1, y1, x2, y2)，四个值分别对应两个控制点的横纵坐标，范围限定在 [0, 1] 之间（超出可能导致动画异常）。复制后直接粘贴到 CSS 的 transition-timing-function 或 animation-timing-function 属性里即可。注意：x 值必须严格在 0 到 1 之间，y 值可以超出但可能引起回弹效果，部分老旧浏览器不支持 y 值 <0 或 >1。
为什么我拉出的曲线是平滑的，但动画还是感觉一卡一卡的？
曲线平滑不等于动画流畅。如果动画卡顿，通常是以下原因之一：1）动画元素触发了重排（layout），比如同时改变 width 和 transform，建议只操作 transform 和 opacity；2）设备 GPU 合成层未开启，检查 CSS 是否加了 will-change: transform；3）曲线在起点或终点附近斜率过陡（接近垂直），导致短时间内进度变化剧烈，浏览器帧率跟不上。可以尝试将控制点向 (0,0) 和 (1,1) 方向微调，降低初始加速度。
这个工具和 CodePen 上的贝塞尔曲线编辑器比，有什么不一样？
CodePen 上的编辑器通常只是单一曲线预览，而本工具侧重「预设库 + 手动微调」结合：左侧提供 ease、ease-in、ease-out 等 7 个常用预设，右侧可以拖拽自定义并实时对比。另外，本工具所有计算在浏览器内完成，无网络请求，响应更即时。CodePen 适合做完整 Demo 演示，本工具更适合快速提取曲线值嵌入项目。如果只需一个坐标值，本工具更轻量。
拖拽控制点时不小心拖出边界了，曲线变得很奇怪，怎么恢复？
控制点的 x 坐标默认限制在 0-1 之间，但 y 坐标允许超出（产生弹性效果）。如果拖拽过度导致曲线不可控，可以点击下方的「重置为默认」按钮，曲线会回到 ease 预设（0.25, 0.1, 0.25, 1）。如果需要手动修正，直接点击坐标输入框，手动输入合法数值即可覆盖拖拽结果。建议先拖到大致位置，再用输入框微调到精确值。
这个工具生成的曲线值，能用在微信小程序或者 Flutter 里吗？
微信小程序的 WXSS 支持 CSS 标准的 cubic-bezier() 函数，直接复制坐标值即可使用。Flutter 的 Curves 类不直接支持 cubic-bezier，但可以用 Cubic 类自定义：Cubic(x1, y1, x2, y2) 传入四个值即可。注意 Flutter 的坐标系统与 CSS 一致（横轴时间 0-1，纵轴进度 0-1），但 Flutter 的默认动画时长单位是毫秒，与 CSS 的秒不同，需要自行换算 duration。
为什么我复制了坐标值，但动画效果跟预览完全不一样？
最常见的原因是 CSS 中 animation-direction 或 animation-fill-mode 影响了实际表现。例如设置了 alternate 会让动画来回播放，曲线在回程时相当于反向映射，看起来和预览的单向曲线不同。另外，如果动画元素有多个属性同时变化（如 transform 和 opacity），各属性共用同一个 timing-function，但实际渲染时浏览器可能对每个属性独立插值，导致整体效果与曲线预览有偏差。建议先让单个属性变化做测试。
工具支持导出 SVG 或 JSON 格式的曲线数据吗？
当前版本支持直接复制 CSS 代码（cubic-bezier(x1,y1,x2,y2)），以及 JSON 格式的坐标对象（{x1,y1,x2,y2}）。不支持导出为 SVG 路径，因为贝塞尔曲线缓动函数与 SVG 的贝塞尔曲线（用于图形路径）虽然数学原理相同，但坐标系和应用场景完全不同。如果需要可视化曲线图片，可以截图预览区域。未来版本可能会增加导出为 PNG 图片的功能。
相关工具
「阴影 / 边框」下的其他工具