时间轴和动效

用 frame timing、图层区间、预设动画、motion clips 和关键帧让画布内容动起来。

flare.design 的动效从选中的 frame 开始。Frame 定义场景时长,子图层定义什么时候出现、消失以及如何运动。

动效模型

层级控制内容适用场景
FrameDuration、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。

很多干净的动效只靠图层区间就够了。一个好的第一版通常是:

  1. 背景或产品从开头出现。
  2. 主体读清楚后,标题入场。
  3. 辅助文字最后出现。
  4. 装饰元素要么很轻,要么快速离开。
  5. 场景结束前,观众有足够时间读完信息。

预设动画

IN 和 OUT 预设动画是最快的动效入口。常见的 fade、slide、scale、crop、wipe 或文字入场都可以先用预设完成。

一个场景最好只有一个清晰的动效想法。太多图层同时运动,会让导出结果变得难读。

拿不准时,先减少动起来的图层数量,再考虑调 easing。如果层级不清楚,更好的 easing 通常也救不了。

Motion clips 和关键帧

当预设不够用时,可以 detach 或新增 motion clips,继续编辑 transform、opacity、color 或 motion path。需要精确 timing 或品牌化运动语言时,再使用自定义关键帧。

要经常预览。时间轴应该服务视觉层级,而不是让每个图层都动起来。

评审循环

用正常速度看场景,不要只拖动 scrubber。然后检查:

  • 第一秒是否说明了主体?
  • 文字出现时间是否足够阅读?
  • 出场是否发生在信息传达之后?
  • 运动方向是否和版式一致?
  • 如果视频循环,最后一帧是否仍然有设计感?

大改 timing 前,先复制 frame,这样可以把不同动效方向并排比较。