动画视图与设计视图使用同一份界面数据。选择元素后,可以配置入场和退场效果。
元素入场
入场预设包括:
默认时长为 320ms。每个元素都可以单独设置时长和延迟。
元素退场
退场预设包括:
默认时长为 240ms。也可以根据入场效果快速生成对应退场:上浮对应下沉,缩放出现对应缩小消失。
时长和延迟可设置为 0~60000ms。数值为 0 时相当于立即完成。
动画列表与预演
动画视图会分别列出入场和退场序列。你可以:
- 播放单个元素;
- 播放当前选择;
- 播放整个序列;
- 多选元素后批量应用预设;
- 拖动列表调整播放顺序。
先给一个代表元素调好时长和缓动,再多选同类元素批量应用,通常比逐个设置更快。
错峰动画
批量应用时可以设置错峰间隔,让菜单项按顺序出现。例如 5 个按钮、每项间隔 60ms,会形成连续展开的节奏。
错峰会把结果写成每个元素自己的明确延迟。之后如果修改前一个元素的时长,后面元素的延迟不会自动重新计算;需要重新批量应用错峰,或手动调整。
页面退出动画
除了元素退场,还可以为整页配置淡出过渡,并设置时长与延迟。关闭界面时,引擎会等待退出动画完成,再真正卸载界面。
对于模态菜单,建议保持退出动画简短,避免玩家点击关闭后感觉操作没有响应。常用范围是 150~300ms。
设计建议
- 标题与主按钮可以使用轻微错峰,建立视觉顺序。
- 常驻 HUD 应尽量克制,避免每次状态变化都播放大幅动画。
- 弹窗背景与内容可以分开:遮罩淡入,内容缩放出现。
- 进入和退出的方向尽量保持对应,界面会更自然。
- 动画完成后到预览视图测试真实点击、关闭和模态流程。
动画不应承担关键状态提示的唯一职责。玩家可能快速操作,或者设备性能不同;重要信息仍需通过文字、颜色和布局表达。