精准掌控CSS动画节奏
在前端开发中，流畅自然的动画往往是提升用户体验的关键。CSS 的 transition 和 animation 属性支持通过 cubic-bezier() 函数来定义缓动曲线（Easing function）。标准的线性（linear）或平滑（ease）往往无法满足复杂的交互需求。
我们的贝塞尔曲线生成器允许您通过可视化界面直接操作曲线的四个关键控制点。横轴代表动画的执行时间，纵轴代表动画的完成进度。通过调整这些控制点，您可以让动画表现出起步缓慢、中段加速或是结尾急停等细腻的物理反馈效果。
突破常规的越界与回弹效果
标准的贝塞尔曲线将动画进度限制在 0 到 1 的范围内，但在实际的 UI 设计中，我们经常需要实现类似弹簧的回弹（Bounce）或蓄力（Anticipation）效果。本工具完全支持控制点的 Y 轴坐标超出 0 到 1 的标准区间。
当您将控制点向上拖拽超过顶部边界时，动画会在到达终点前产生“冲过头”的越界效果；向下拖拽低于底部边界时，则会在动画开始前产生向反方向蓄力的视觉错觉。请注意，为了保证时间的正常流逝，X 轴的坐标始终被严格限制在 0 到 1 之间，以确保生成有效的 CSS 代码。
纯前端处理与实时预览
调节动画曲线最忌讳的就是盲人摸象。本工具内置了实时渲染的 Canvas 坐标系和动画预览模块。当您拖动控制手柄时，演示元素会立即以当前的缓动曲线进行运动，帮助您直观地感受动画的“呼吸感”。您还可以自由修改动画的持续时间，以测试曲线在不同速度下的表现。
作为一款注重隐私和效率的开发者工具，ToolMole 的贝塞尔曲线生成器完全基于浏览器的 JavaScript 和 Canvas API 运行。这意味着所有的数学计算和动画渲染都在您的本地设备上完成，不需要连接服务器，没有任何数据上传，甚至在离线状态下也能正常生成并复制您需要的代码。
常见问题
如何为我的动画选择合适的缓动曲线？
这取决于动画的交互场景。对于界面元素的入场动画，建议使用“减速”曲线（Ease-out），让元素快速进入视野然后平滑停止；而出场动画则适合“加速”曲线（Ease-in），让元素缓慢启动后迅速离开。
可以制作类似弹簧的物理回弹效果吗？
可以。虽然标准的 cubic-bezier 不包含物理弹簧模型，但您可以将曲线的控制点（Y轴）拖出 0 到 1 的范围。当 Y 值大于 1 时，就会产生超过目标位置再拉回的视觉回弹效果。
UI 界面过渡动画的推荐时长是多少？
对于大多数微交互（如按钮悬停、菜单展开），推荐的动画时长在 150 毫秒到 300 毫秒之间。时间过短会让动画显得生硬，过长则会让用户觉得界面反应迟钝、拖沓。
生成的贝塞尔曲线代码兼容所有浏览器吗？
是的。cubic-bezier() 是 CSS3 的标准规范，目前所有现代浏览器（包括 Chrome、Firefox、Safari 和 Edge）都完全支持该函数。您可以放心将其应用于生产环境的样式表中。
这个工具会收集我设计的动画数据吗？
绝对不会。本工具完全在您的浏览器本地运行，所有的控制点坐标计算和动画预览都在客户端完成，您的任何操作数据都不会被发送或存储到外部服务器。
发现问题或有改进建议？ 告诉我们