UD5工具箱
核心功能一览
网页动效时间轴编辑器集成了多项专业级动画编辑功能，帮助您高效地创建和调试各种 CSS 动画效果。以下是各功能模块的详细介绍：
五种属性轨道
编辑器支持五种常用的动画属性轨道，覆盖了网页动画中最常见的变换效果：
- X 位置（translateX）：控制元素在水平方向上的移动。通过在时间轴上设置不同时间点的 X 坐标值，可以创建元素从左侧滑入、从右侧滑出等水平移动动画。
- Y 位置（translateY）：控制元素在垂直方向上的移动。用于创建元素从上方掉落、向上飞出等垂直移动动画效果。
- 缩放（scale）：控制元素的大小缩放比例。值为 1 表示原始大小，大于 1 为放大，小于 1 为缩小。常用于创建元素的弹出放大、缩小消失等效果。
- 旋转（rotate）：控制元素的旋转角度。支持任意角度的旋转，可以创建元素的旋转进入、翻转效果等动画。
- 透明度（opacity）：控制元素的可见程度。值为 1 表示完全可见，值为 0 表示完全透明。常用于创建淡入淡出效果，通常与其他属性组合使用。
时间轴可视化编辑
时间轴是编辑器的核心操作区域，以水平时间线的形式展示动画的完整过程。您可以在时间轴上自由添加、删除和拖拽关键帧，精确控制每个时间点的属性值。时间轴支持缩放和滚动操作，方便您处理不同时间长度的动画。每个属性轨道独立显示，可以单独编辑，也可以批量选中多个关键帧进行统一调整。时间轴上方显示时间刻度，帮助您准确把握动画的时间节奏。
四种缓动函数
缓动函数决定了动画属性值随时间变化的速率曲线，是影响动画质感的关键因素。编辑器支持四种标准缓动函数：
- 线性（linear）：属性值以恒定速度变化，没有任何加减速效果。适合机械运动、匀速旋转等场景。
- 缓入（ease-in）：动画开始时速度较慢，逐渐加速。适合元素退出画面的动画，给人以自然的加速感。
- 缓出（ease-out）：动画开始时速度较快，逐渐减速。适合元素进入画面的动画，给人以自然的减速刹车感。
- 缓入缓出（ease-in-out）：动画开始和结束时速度较慢，中间阶段速度较快。这是最常用的缓动函数，适合大多数动画场景，动画效果自然流畅。
四种播放速度
编辑器提供四种播放速度设置，方便您从不同速度审视动画效果：
- 0.25x 速度：四分之一慢速播放，适合仔细检查动画的每一个细节和过渡效果。
- 0.5x 速度：半速播放，在保持一定流畅度的同时能够观察到更多的动画细节。
- 1x 速度：正常速度播放，展示动画的最终呈现效果。
- 2x 速度：两倍速快速播放，适合快速浏览长动画的整体效果和节奏。
五个预设动画模板
内置了五个精心设计的预设动画模板，帮助您快速上手并了解各种动画类型的制作方式：
- 弹跳（Bounce）：模拟物体落地后弹跳的效果，使用 Y 位置和缩放属性的组合，配合缓出缓动函数。
- 滑入（Slide In）：元素从画面外滑入到指定位置，使用 X 位置和透明度属性的过渡动画。
- 旋转弹出（Rotate Pop）：元素在旋转的同时放大出现，使用旋转和缩放属性的组合动画。
- 脉冲（Pulse）：元素周期性地放大和缩小，模拟心跳脉冲效果，使用缩放属性的循环动画。
- 波浪（Wave）：多个元素依次延迟出现，形成波浪般的视觉效果，使用透明度和 Y 位置的组合。
添加与删除关键帧
关键帧是动画的核心元素，定义了动画在特定时间点的属性状态。在时间轴上点击任意位置即可添加关键帧，然后通过属性面板设置该时间点的各项属性值。关键帧以菱形图标显示在时间轴上，选中后可以通过拖拽调整时间位置，或通过属性面板修改数值。不需要的关键帧可以选中后按 Delete 键或点击删除按钮移除。支持多选关键帧进行批量操作。
空格键播放/暂停
编辑器支持键盘快捷键操作，按下空格键即可在播放和暂停之间快速切换。这一快捷操作让您可以像使用视频播放器一样方便地控制动画预览，无需频繁移动鼠标点击按钮。播放过程中，时间轴上的播放头会实时移动，与预览区域的动画保持同步。再次按下空格键暂停后，播放头停留在当前位置，方便您检查该时间点的动画状态。