flare.design 的动效从选中的 frame 开始。Frame 定义场景时长,子图层定义什么时候出现、消失以及如何运动。
动效模型
| 层级 | 控制内容 | 适用场景 |
|---|---|---|
| Frame | Duration、poster time、fps | 定义预览和导出使用的场景 |
| 图层区间 | Start time 和 end time | 让图层随时间出现、消失或裁剪 |
| 预设动效 | IN 和 OUT animation | 快速做入场、出场、揭示或强调 |
| Motion clip | 自定义 transform、opacity、color 或 path timing | 预设接近需求,但还不够精确 |
Frame timing
编辑 timing 前先选中目标 frame。Frame 的 duration、poster time 和 fps 会决定预览和导出使用的场景。
短场景最好让第一秒保持清楚。先出现主体,再加入辅助文字和细节。
Poster time 用来选择代表这个场景的静帧。建议选主体和标题都已经清楚可读的时刻。
图层区间
Frame 内每个图层都可以有开始和结束时间。需要错开入场、裁剪视频或延迟显示辅助图层时,可以直接在 docked timeline 里拖动 timing bar。
很多干净的动效只靠图层区间就够了。一个好的第一版通常是:
- 背景或产品从开头出现。
- 主体读清楚后,标题入场。
- 辅助文字最后出现。
- 装饰元素要么很轻,要么快速离开。
- 场景结束前,观众有足够时间读完信息。
预设动画
IN 和 OUT 预设动画是最快的动效入口。常见的 fade、slide、scale、crop、wipe 或文字入场都可以先用预设完成。
一个场景最好只有一个清晰的动效想法。太多图层同时运动,会让导出结果变得难读。
拿不准时,先减少动起来的图层数量,再考虑调 easing。如果层级不清楚,更好的 easing 通常也救不了。
Motion clips 和关键帧
当预设不够用时,可以 detach 或新增 motion clips,继续编辑 transform、opacity、color 或 motion path。需要精确 timing 或品牌化运动语言时,再使用自定义关键帧。
要经常预览。时间轴应该服务视觉层级,而不是让每个图层都动起来。
评审循环
用正常速度看场景,不要只拖动 scrubber。然后检查:
- 第一秒是否说明了主体?
- 文字出现时间是否足够阅读?
- 出场是否发生在信息传达之后?
- 运动方向是否和版式一致?
- 如果视频循环,最后一帧是否仍然有设计感?
大改 timing 前,先复制 frame,这样可以把不同动效方向并排比较。