要点
- 01拖动两个控制点处理来直观塑造缓动曲线，而非猜测数值。
- 02实时球动画播放回计时，因此您可以在承诺之前感受运动。
- 03五个CSS内置预设(ease、linear、ease-in、ease-out、ease-in-out)可用作起点。
- 04cubic-bezier()值实时更新，精度为两位小数，准备粘贴到任何CSS属性。
为什么自定义缓动曲线对UI运动很重要
CSS的内置计时函数——ease、ease-in-out、linear——涵盖了大量地面，但每个UI都有默认感觉稍微错误的时刻。出现过于敏捷的工具提示、打开时超出范围的模态框、感觉机械的进度条。三次贝塞尔曲线让您调整运动以感觉自然而非机械，但cubic-bezier(0.4, 0, 0.2, 1)中的四个数字几乎不可能直接理解。
Handytool的三次贝塞尔编辑器将这些数字转变为带有两个可拖动处理的视觉曲线。移动处理，球动画立即播放回，因此您可以按感觉迭代，直到运动匹配您的意图。然后复制值并将其拖入您的CSS——完成。
如何设计CSS缓动曲线
- 01
从预设开始
选择ease、linear、ease-in、ease-out或ease-in-out作为基线。处理吸附到每个预设的正确位置。
- 02
拖动控制点处理
每个处理控制曲线的一端——开始处理塑造初始加速，结束处理塑造最终减速。移动处理会自动切换预设为"自定义"。
- 03
观看球动画
球使用您的曲线从左到右动画。调整持续时间滑块以预览缓慢对快速转换。
- 04
试验超出范围
在Y轴上拖动处理超过1或低于0以创建超出范围和欠超出范围——使菜单有力打开的"弹跳"效果。
- 05
复制CSS值
点击复制获取cubic-bezier()字符串并将其粘贴到您的样式表中的transition-timing-function或animation-timing-function中。
完全在您的浏览器中运行
编辑器是自包含的浏览器工具——页面打开后没有加载任何字体、脚本和数据。拖动处理和预览动画离线工作。用于预览球的三次贝塞尔公式与浏览器用于CSS转换的相同，因此您在编辑器中看到的内容与您的样式表会产生的内容完全相同。
没有什么需要安装，也没有什么需要注册。输出是单个CSS值——粘贴它，您就完成了。
三次贝塞尔编辑器常见问题
什么是三次贝塞尔缓动曲线？
它是由两个控制点定义的数学曲线，确定CSS转换或动画如何随时间加速。cubic-bezier(x1, y1, x2, y2)中的四个数字设置这些控制点的位置。
为什么Y值可以超过1或低于0？
0–1范围外的Y值产生超出范围和欠超出范围——曲线超过其端点后回落。这创建"弹跳"缓动曲线。X值必须保持在0–1。
我如何使用输出？
复制cubic-bezier(...)字符串并将其粘贴到任何CSS transition-timing-function或animation-timing-function值中。它在每个现代浏览器中工作。
ease-in-out实际上是什么意思？
Ease-in-out开始缓慢，在中间加速，在末尾减速——cubic-bezier(0.42, 0, 0.58, 1)。它反映了真实对象如何加速和减速，是大多数精选UI运动的默认选择。
球动画预览对CSS准确吗？
是的——预览使用浏览器应用于CSS转换的相同三次贝塞尔公式。持续时间滑块让您在承诺前感受缓慢对快速曲线。