UD5工具箱
Q：cubic-bezier()函数的四个参数分别代表什么含义？
A：cubic-bezier(x1, y1, x2, y2)中的四个参数分别定义两个控制点P1和P2的坐标。其中x1和x2代表水平轴上的时间比例，必须在0到1之间，表示动画在整个持续时间中的时间点；y1和y2代表垂直轴上的动画进度值，理论上可以超出0到1的范围。P1控制动画前期的速率变化，P2控制动画后期的速率变化，通过调整这两个点的位置，可以创造出各种不同的缓动效果。
Q：为什么x参数必须限制在0到1之间，而y参数可以超出？
A：x轴代表时间维度，时间是单调递增的，动画不可能在未开始前就进入中间状态，也不可能在结束后仍在进行中，因此x1和x2必须在0到1范围内。而y轴代表动画进度，允许超出0到1范围意味着动画可以暂时超过目标值或低于起始值后再回归，这就是产生弹跳、过冲等特殊效果的原因。例如cubic-bezier(0.68, -0.55, 0.27, 1.55)就会产生明显的弹跳效果。
Q：如何选择合适的缓动预设？不同场景应该用哪种缓动函数？
A：选择缓动函数需要根据动画的语义来判断。对于页面元素的出现和消失，推荐使用ease或ease-in-out，过渡自然不突兀。对于需要引起注意的弹出元素，可以使用ease-out，快速到位后减速停止。对于模拟真实物理运动（如弹窗弹出），可以使用带弹跳效果的自定义曲线。对于需要匀速运动的进度条或加载动画，使用linear。一般来说，进入画面的动画用ease-out，退出画面的动画用ease-in，元素在画面内的移动用ease-in-out，这是最常用的搭配原则。
Q：在JavaScript中如何使用cubic-bezier()缓动函数？
A：在JavaScript中使用cubic-bezier有多种方式。最直接的方式是通过element.style.transition设置过渡属性。如果使用Web Animations API，可以在element.animate()的options.easing参数中传入字符串形式的cubic-bezier值。在requestAnimationFrame中实现自定义动画时，可以借助社区库如「cubic-bezier」npm包来预计算曲线上的点。对于React、Vue等框架，可以在transition组件的timing属性或CSS-in-JS的transition属性中直接使用。部分动画库如GSAP则有自己等效的缓动语法，但概念是相通的。
Q：y值超出0到1的弹跳效果在实际项目中有什么用？有哪些注意事项？
A：y值超出0到1范围产生的弹跳效果常用于增加动画的趣味性和物理感。典型应用场景包括：按钮点击时的弹性反馈、模态框弹出时的轻微过冲、列表项出现时的弹性入场、以及各类微交互动画。需要注意的是：弹跳效果虽然生动，但不宜过度使用，否则会让界面显得不专业或令用户感到烦躁；弹跳动画的持续时间不宜过长，建议控制在0.3秒到0.5秒之间；对于信息密集型的工具类产品，建议使用较为克制的缓动曲线；此外，部分性能较低的设备在渲染超出范围的动画时可能出现抖动，建议在实际设备上充分测试。
Q：cubic-bezier()和steps()缓动函数有什么区别？应该在什么时候使用？
A：cubic-bezier()创建的是平滑连续的缓动曲线，动画进度在时间轴上连续变化，适合大多数需要自然流畅过渡的场景。而steps()函数创建的是分步缓动，将动画分为固定数量的离散步骤，每一步直接跳到下一个状态，没有中间过渡。steps()适合模拟打字机效果、帧动画、以及像素风格的游戏动画等需要离散感的场景。简单来说，需要平滑过渡用cubic-bezier()，需要逐帧跳变用steps()。两者可以组合使用，但在大多数UI过渡动画中，cubic-bezier()是更常见的选择。
Q：使用本工具生成的值可以直接用于CSS的transition和animation属性吗？
A：是的，本工具生成的cubic-bezier()值可以直接用于CSS的transition-timing-function和animation-timing-function属性。在transition中使用时，只需将cubic-bezier()值赋给transition-timing-function或简写在transition属性中即可。在animation中使用时，同样赋给animation-timing-function。工具还会自动生成完整的CSS代码示例，用户可以直接复制粘贴到样式表中。需要注意的是，cubic-bezier()值在整个过渡过程中只会被计算一次，如果在animation中使用，该缓动曲线将应用于每一个关键帧间隔，而不是整个动画。