---
title: "时间轴和动效"
description: "用 frame timing、图层区间、预设动画、motion clips 和关键帧让画布内容动起来。"
locale: "zh"
section: "Motion"
updated: "2026-06-22"
source: "https://flare.design/zh/docs/timeline-and-motion"
---

# 时间轴和动效

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

> 分类: Motion

[HTML](https://flare.design/zh/docs/timeline-and-motion) | [Markdown](https://flare.design/zh/docs/timeline-and-motion/index.md)

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。

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

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，这样可以把不同动效方向并排比较。