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

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

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

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

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

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