无需登录 数据私有 本地保存

贝塞尔缓动函数调校工具 - 自定义动画曲线

9
0
0
0
控制点参数
P1 · X₁
P1 · Y₁
P2 · X₂
P2 · Y₂
cubic-bezier(0.25, 0.1, 0.25, 1.0)
2.0s
easing(t) => ...

常见问题与知识点

什么是贝塞尔缓动函数(cubic-bezier)?

贝塞尔缓动函数是CSS中用于控制动画速度变化的三次贝塞尔曲线。它由4个点定义:固定起点(0,0)和终点(1,1),以及两个可调控制点P1(x₁,y₁)和P2(x₂,y₂)。曲线描述动画进度随时间的变化关系——横轴代表时间进度(0→1),纵轴代表动画进度(0→1)。

cubic-bezier() 的四个参数分别代表什么?

语法:cubic-bezier(x1, y1, x2, y2)。x1和y1是第一个控制点P1的坐标,x2和y2是第二个控制点P2的坐标。x1和x2必须在[0,1]范围内,确保曲线在时间上是单调的。y1和y2可以超出[0,1]范围,产生"超出"或"回弹"的视觉效果(虽然这不是真正的物理弹跳)。

如何在CSS中使用自定义贝塞尔曲线?

直接在transition-timing-functionanimation-timing-function中使用:
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
也可以用于@keyframes中每个关键帧的animation-timing-function

ease / ease-in / ease-out / ease-in-out 的区别?

ease (默认): 缓入缓出,先加速后减速 — cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: 缓慢开始,加速结束 — cubic-bezier(0.42, 0, 1, 1)
ease-out: 快速开始,缓慢结束 — cubic-bezier(0, 0, 0.58, 1)
ease-in-out: 两端缓慢,中间加速 — cubic-bezier(0.42, 0, 0.58, 1)
linear: 匀速 — cubic-bezier(0, 0, 1, 1)

y值超出[0,1]范围会怎样?

当y₁或y₂超出[0,1]时,动画会在到达终点前"过冲"或"回退"。例如cubic-bezier(0.68, -0.55, 0.27, 1.55)会产生类似弹簧的效果。这在CSS中完全合法,可用于创造更生动的动画。但需谨慎使用,过度回弹可能让用户感到不适。

如何在JavaScript中使用贝塞尔缓动?

本工具提供JS缓动函数导出。核心原理:通过采样贝塞尔曲线建立查找表,对于任意时间进度t∈[0,1],在查找表中找到对应的缓动值。使用requestAnimationFrame配合缓动函数即可实现自定义动画。也可使用Web Animations API的effect.updateTiming()动态设置。