贝塞尔曲线编辑器
在线贝塞尔曲线编辑器，支持控制点拖拽、缓动预设切换、动画预览与 CSS/JavaScript 代码生成复制。
精确数值
曲线编辑器
P1:(0.25, 0.10)
P2:(0.25, 1.00)
预设缓动函数
当前预设：Ease
动画预览
位移
缩放
旋转
R
透明度
时间对比
当前曲线
Linear
Ease
Ease In
Ease Out
Back
CSS 代码
/* CSS 动画 */
.animated-element {
animation: slide-in 2s ease infinite;
}
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* 或在 transition 中使用 */
.transition-element {
transition: transform 0.3s ease;
}JavaScript 代码
// JavaScript 动画
const element = document.querySelector('.animated-element')
const duration = 2000
function easeBezier(t, p1x, p1y, p2x, p2y) {
const cx = 3 * p1x
const bx = 3 * (p2x - p1x) - cx
const ax = 1 - cx - bx
const cy = 3 * p1y
const by = 3 * (p2y - p1y) - cy
const ay = 1 - cy - by
function sampleCurveX(x) {
return ((ax * x + bx) * x + cx) * x
}
function sampleCurveY(x) {
return ((ay * x + by) * x + cy) * x
}
function solveCurveX(x) {
let t2 = x
for (let i = 0; i < 8; i += 1) {
const x2 = sampleCurveX(t2) - x
if (Math.abs(x2) < 0.001) break
const d2 = (3 * ax * t2 + 2 * bx) * t2 + cx
if (Math.abs(d2) < 0.000001) break
t2 -= x2 / d2
}
return t2
}
return sampleCurveY(solveCurveX(t))
}
function animate() {
const startTime = performance.now()
function frame(currentTime) {
const elapsed = currentTime - startTime
const progress = Math.min(elapsed / duration, 1)
const easedProgress = easeBezier(progress, 0.25, 0.1, 0.25, 1)
element.style.transform = 'translateX(' + (easedProgress * 200) + 'px)'
if (progress < 1) {
requestAnimationFrame(frame)
}
}
requestAnimationFrame(frame)
}
animate()贝塞尔曲线编辑器使用说明
贝塞尔曲线编辑器用于可视化调试 CSS 缓动函数，支持控制点拖拽、预设切换、动画预览与代码复制，适合前端动效开发和教学演示。
这是什么工具？
它可以把 cubic-bezier 的两个控制点转成可视化曲线，你可以拖动控制点或输入精确数值，实时观察动画节奏变化。
核心功能
- 支持在坐标网格中拖拽 P1/P2 控制点，快速调节缓动曲线。
- 支持 Linear、Ease、Back、Elastic、Bounce 等常见预设一键套用。
- 支持输入精确坐标，便于和设计稿或动效规范对齐。
- 支持位移、缩放、旋转、透明度四种动画效果同步预览。
- 支持自动生成 CSS 与 JavaScript 示例代码并一键复制。
使用步骤
- 先在曲线编辑器中拖动控制点，或直接输入 P1/P2 的坐标值。
- 必要时使用预设缓动函数作为起点，再按项目节奏微调。
- 点击播放动画，观察位移、缩放、旋转和透明度的变化速度。
- 在时间对比区域对照常见曲线，判断当前曲线是否符合预期。
- 确认后复制 CSS 或 JavaScript 代码，粘贴到项目中使用。
应用场景
- 前端页面交互动效调试与优化
- 组件库动效参数统一与规范制定
- 设计走查阶段的节奏对齐和联调
- 课堂教学中演示缓动函数原理
使用建议
- 优先从接近目标节奏的预设开始，可减少调参时间。
- 若动画突兀，可适当降低控制点 Y 轴极值并重复预览。
- 移动端和桌面端都建议预览一次，确认主观节奏一致。
- 交付给团队时建议附上 cubic-bezier 参数和场景说明。
隐私说明
本工具不会上传你的参数与代码，所有计算和动画预览均在浏览器本地完成。