CSS 贝塞尔曲线工具能做什么？
CSS 动画的「手感」由缓动函数决定：同样的位移，线性移动像机器人，合适的缓动像真实物体。cubic-bezier(x1, y1, x2, y2) 是 CSS 自定义缓动的标准写法，四个参数对应控制手柄坐标。本工具用拖拽曲线的方式可视化调节，实时对比动画效果，一键复制代码。
使用步骤
- 打开 CSS 贝塞尔曲线工具
- 拖动两个控制点手柄调整曲线形状
- 观察右侧动画预览（小球移动对比）
- 对照预设：ease、ease-in、ease-out、ease-in-out、线性
- 可选输入知名曲线值（如 easeOutCubic）
- 复制 cubic-bezier(0.33, 1, 0.68, 1) 代码
- 粘贴到 transition-timing-function 或 animation-timing-function
缓动原理解析
横轴是时间进度，纵轴是动画进度。曲线的斜率就是「速度」：陡峭处快、平缓处慢、水平段暂停。起点 (0,0)、终点 (1,1) 固定，两个控制点决定中途的加速减速节奏。物理世界里物体有惯性——启动慢、中途快、停止缓，缓动曲线就是在模仿这种真实感。
常用曲线推荐
- easeOutCubic(0.33, 1, 0.68, 1)：快出缓停，最百搭的入场动画
- easeInCubic(0.32, 0, 0.67, 0)：缓起快收，适合出场消失
- easeInOutCubic(0.65, 0, 0.35, 1)：对称节奏，状态切换
- easeOutBack(0.34, 1.56, 0.64, 1)：带轻微回弹，俏皮有生命力
- linear：匀速，进度条、旋转等持续动画专用
- Material 标准曲线(0.4, 0, 0.2, 1)：Google Material Design 规范
注意事项与边界情况
- 控制点 y 值可以超出 0-1 范围，做出回弹（overshoot）效果
- 回弹曲线过强会显得廉价，1.2-1.5 的超调值比较自然
- 动画时长与曲线配合：缓动强的动画需要足够时长（0.3-0.5s）才能看清节奏
- 同一界面保持缓动家族一致，不要每个动画各用一种曲线
- 尊重系统「减少动态」设置：prefers-reduced-motion 下降低动画幅度
常见问题
- 四个参数什么意思？
- 两个控制点的 (x, y) 坐标：x 是时间轴位置（0-1），y 是进度值（可超出）。
- 为什么动画方向反了？
- 控制点拖到了 y<0 或 y>1 的极端位置，回弹过头；收回到合理范围。
- transition 和 animation 都能用吗？
- 都能，分别写在 transition-timing-function 和 animation-timing-function。
- 有什么好记的推荐值？
- 出场用 easeOut(0.33,1,0.68,1)、入场用 easeIn、循环用 linear，够覆盖 90% 场景。
- 曲线动画卡顿？
- 优先动画 transform 和 opacity，避免动画 width/top 等触发布局的属性。
实战案例：给按钮做回弹按压效果
需求：按钮按下缩到 0.96、松手弹回。用 easeOutBack(0.34, 1.56, 0.64, 1) 做松手动画——第二个参数 1.56 是超调量的来源：动画会冲过目标约 56% 再回落，这就是「弹一下」的手感。想验算曲线形状，把 t=0.5 代入三次贝塞尔公式：以 ease(0.25, 0.1, 0.25, 1) 为例，中点进度是 3×0.25×0.5×0.1 + 3×0.5×0.25×1 + 0.125 = 0.5375——过半程偏快，符合「快出缓停」的直觉。
常见错误
- 回弹给过头：超调超过 1.6 显得廉价像果冻，1.2-1.5 是自然区间
- x 坐标写越界（如 1.2）：浏览器直接忽略整条声明，动画回退成默认值
- 缓动 0.2 秒看不清节奏：强缓动配 0.3-0.5 秒才看得出性格
- 界面里每个动画各用一种曲线：观感杂乱，统一缓动家族是基本功
进阶方向
- 物理弹簧（spring）比贝塞尔更真实，Framer Motion、React Spring 都是封装好的选择
- 把缓动抽成设计令牌（--ease-out-back），全站一处定义
- 配合 prefers-reduced-motion 给前庭敏感用户降级动画
- 用生成器导出曲线包做动效规范文档，交接给设计和前端共用
总结
贝塞尔曲线是动画的「性格」：拖两个控制点，决定快慢节奏。记住 easeOut 入场、easeIn 出场、linear 循环的口诀，再用工具微调细节，动画手感立刻专业起来。