motion-art-direction
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMotion Direction
动效指导
Make the creative decisions for a motion piece before anyone animates a frame. Direction is the judgment layer: it turns a brief and a brand into a small, repeatable set of motion rules — one easing vocabulary, one timing scale, one transition family — so every shot feels like it came from the same hand. Good direction is mostly subtraction: deciding what NOT to move.
在任何人开始制作一帧动画之前，为动效作品做出创意决策。指导是判断层：它将 brief 和品牌转化为一小套可重复使用的动效规则——一套缓动词汇、一个时间尺度、一类转场——让每个镜头都像出自同一人之手。好的指导主要靠做减法：决定哪些内容不应该动。
When to use
何时使用
- Starting any piece — explainer, launch film, UI demo, data story, loop — and the look/feel isn't decided yet.
- Animation feels "busy", "cheap", or "inconsistent" and the cause is decisions, not craft.
- Orchestrating other skills (gsap/lottie/shader/three.js): direction sets the rules they execute.
- Translating a brand or brief into directable, written choices a team (or an agent) can follow.
- 开始任何作品时——无论解释型视频、发布片、UI demo、数据故事还是循环动画——如果其观感尚未确定。
- 动画显得“忙碌”“廉价”或“不一致”，且原因在于决策而非工艺。
- 协调其他 skill（gsap/lottie/shader/three.js）时：指导负责设定它们执行的规则。
- 将品牌或 brief 转化为团队（或 Agent）能够遵循的可执行书面选择。
The one rule
唯一规则
Define the motion language first, then animate to it. A motion language is a short spec — pick one of each: easing family, base timing unit, transition family, stagger rhythm, motion intensity. Everything in the piece obeys it. Consistency reads as confidence; variety reads as noise. When in doubt, reuse, don't invent.
先定义动效语言，再据此制作动画。 动效语言是一份简短规范——每项只选择一个：缓动类型、基础时长单位、转场类型、错落节奏、动效强度。作品中的所有内容都应遵守。一致性传达自信；多样性则像噪声。如有疑虑，应复用现有规则，不要另创。
Direction workflow
指导工作流
| Step | Decision | Output |
|---|---|---|
| 1. Brief | Audience, one message, platform, duration, mood (3 adjectives) | One-line creative intent |
| 2. Tone & energy | Where it sits on calm↔kinetic and soft↔sharp | A point on the matrix below |
| 3. Motion language | Lock the spec table | The motion-language spec (filled) |
| 4. Hierarchy | Rank what moves: hero / support / texture | Motion hierarchy list |
| 5. Restraint pass | Cut motion that doesn't carry meaning | List of what stays static |
| 6. Shot direction | Note intent per shot, not keyframes | Direction notes (see template) |
| 7. Consistency check | Audit against the spec | Pass/fail per shot |
| 步骤 | 决策 | 输出 |
|---|---|---|
| 1. Brief | 受众、一条核心信息、平台、时长、情绪（3 个形容词） | 一句话创意意图 |
| 2. 基调与能量 | 在平静↔动感、柔和↔锐利两个维度上的位置 | 下述矩阵中的一个点 |
| 3. 动效语言 | 锁定规范表 | 已填写的动效语言规范 |
| 4. 层级 | 对发生动效的元素排序：Hero / Support / Texture | 动效层级列表 |
| 5. 克制检查 | 删去不承载意义的动效 | 保持静止的内容列表 |
| 6. 镜头指导 | 记录每个镜头的意图，而不是关键帧 | 指导备注（见模板） |
| 7. 一致性检查 | 根据规范进行审核 | 每个镜头的通过/未通过结果 |
Tone & energy matrix
基调与能量矩阵
Place the piece on two axes; the cell dictates the motion language defaults.
| Soft (organic, eased) | Sharp (precise, snappy) | |
|---|---|---|
| Calm | Luxury, wellness, editorial — slow, long eases, generous holds, minimal stagger | Premium tech, fintech — deliberate, clean linear-ish moves, tight but unhurried |
| Kinetic | Playful, lifestyle, kids — bouncy/overshoot, springy, loose timing | Sports, hype, gaming — fast cuts, hard snaps, aggressive overshoot on beats |
Pick one cell and commit. Mixing cells within a piece is the most common cause of "inconsistent" motion.
将作品放在两个轴上；所在象限决定动效语言的默认设置。
| 柔和（有机、缓动） | 锐利（精确、迅速） | |
|---|---|---|
| 平静 | 奢华、健康、编辑类内容——缓慢、长缓动、充分停顿、极少交错 | 高级科技、金融科技——从容、干净、偏线性的动效，紧凑但不急促 |
| 动感 | 趣味、生活方式、儿童——弹跳/过冲、富有弹性、节奏宽松 | 体育、高能内容、游戏——快速剪辑、果断急停、节拍上的强烈过冲 |
选择一个象限并贯彻到底。在同一作品中混用不同象限，是造成动效“不一致”的最常见原因。
Motion personality (named presets)
动效个性（具名预设）
The tone matrix tells you where the piece sits; a motion personality is the named, numeric preset you hand to whoever animates. Pick ONE per project and apply it everywhere. This is shared vocabulary — other skills (e.g. , , the video packs) can just say "use the Premium personality."
gsap-webmicro-interaction| Personality | Duration | Signature easing | Overshoot | Reads as |
|---|---|---|---|---|
| Playful | 150–300ms | | 10–20% | fun, bouncy, whimsical |
| Premium | 350–600ms | | 0% | elegant, minimal, luxury |
| Corporate | 200–400ms | | 0–3% | clean, professional, trustworthy |
| Energetic | 100–250ms | | 15–30% | bold, dynamic, hype |
Default: Corporate for UI/product, Playful for illustration/lifestyle. Maps onto the matrix — Premium≈calm-soft, Corporate≈calm-sharp, Playful≈kinetic-soft, Energetic≈kinetic-sharp. The personality fills the "easing family / base timing unit / motion intensity" rows of the spec below.
基调矩阵决定作品所处的位置；动效个性则是交给动画执行者的具名数值预设。每个项目只选择一个，并在各处统一应用。它是一套共享词汇——其他 skill（例如 、 和视频包）只需说“使用 Premium 个性”即可。
gsap-webmicro-interaction| 个性 | 时长 | 标志性缓动 | 过冲 | 呈现为 |
|---|---|---|---|---|
| Playful | 150–300ms | | 10–20% | 有趣、活泼、奇趣 |
| Premium | 350–600ms | | 0% | 优雅、极简、奢华 |
| Corporate | 200–400ms | | 0–3% | 简洁、专业、可信赖 |
| Energetic | 100–250ms | | 15–30% | 大胆、动感、高能 |
默认值：UI/产品使用 Corporate，插画/生活方式内容使用 Playful。其与矩阵的对应关系为——Premium≈平静-柔和，Corporate≈平静-锐利，Playful≈动感-柔和，Energetic≈动感-锐利。个性会填入下述规范中的“缓动类型 / 基础时长单位 / 动效强度”三行。
The motion-language spec
动效语言规范
The core artifact. Fill every row with ONE choice and reuse it everywhere.
| Property | Choose one | Example (calm-sharp / premium tech) |
|---|---|---|
| Easing family | The signature curve for ~90% of moves | |
| Base timing unit | The atomic duration; build others as multiples | 0.4s (enters 0.4s, big moves 0.8s, micro 0.2s) |
| Transition family | How shots connect | Match-cut + crossfade only; no wipes/spins |
| Stagger rhythm | Delay between grouped elements | 60ms cascade, top-to-bottom |
| Motion intensity | Distance/scale/overshoot budget | Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2% |
| Hold discipline | Minimum rest between moves | ≥ 0.3s of stillness after each beat |
Two eases maximum: one "in" (exits) and one "out" (entrances/landings). A third curve must justify its existence.
这是核心成果。每行填写一个选项，并在所有位置复用。
| 属性 | 选择一项 | 示例（平静-锐利 / 高级科技） |
|---|---|---|
| 缓动类型 | 用于约 90% 动效的标志性曲线 | |
| 基础时长单位 | 最小时间单位；其他时长按其倍数构建 | 0.4s（入场 0.4s，大幅动效 0.8s，微动效 0.2s） |
| 转场类型 | 镜头如何衔接 | 仅使用 match-cut + crossfade；不要使用 wipes/spins |
| 错落节奏 | 成组元素之间的延迟 | 60ms 级联，自上而下 |
| 动效强度 | 位移/缩放/过冲预算 | 位移 ≤ 24px，缩放 0.96→1.0，过冲 ≤ 2% |
| 停顿规范 | 动效之间的最短休息时间 | 每个节拍后静止 ≥ 0.3s |
最多使用两种缓动：一种“in”（用于离场）和一种“out”（用于入场/落位）。第三种曲线必须能够证明其存在的必要性。
Motion hierarchy
动效层级
Not everything earns motion. Rank every element, then animate down the list — and stop early. These three tiers are the universal three motion layers (see ): Hero = Primary, Support = Secondary, Texture = Ambient.
animation-principles| Tier | What it is | How it moves |
|---|---|---|
| Hero | The one thing the shot is about | Gets the boldest, slowest, most-eased move; lands on the beat |
| Support | Context that helps the hero land | Smaller, faster, eased out of the way; never competes |
| Texture | Background, grain, ambient drift | Subliminal only — slow loops, low contrast, no hard cuts |
If two elements compete for the eye in one frame, the direction has failed. Demote one to support.
并非所有内容都值得加入动效。为每个元素分级，然后按列表顺序向下赋予动效，并适时停止。这三个层级是通用的三大动效层级（见 ）：Hero = Primary，Support = Secondary，Texture = Ambient。
animation-principles| 层级 | 它是什么 | 如何运动 |
|---|---|---|
| Hero | 镜头所表达的唯一核心内容 | 采用最醒目、最缓慢、缓动最充分的动效；在节拍上落位 |
| Support | 帮助 Hero 落位的辅助语境 | 幅度更小、速度更快，以缓动方式退居辅助位置；绝不与之争夺注意力 |
| Texture | 背景、颗粒、环境漂移 | 仅做潜意识层表现——缓慢循环、低对比度、无硬切 |
如果同一画面中有两个元素争夺视线，说明指导已经失败。将其中一个降级为 Support。
Restraint — what NOT to animate
克制——哪些内容不应动效化
The senior move. For each element ask: does the motion carry meaning? If not, hold it still.
- Don't animate the entire frame at once — stagger or hold a anchor so the eye has a home.
- Don't transition the transition (no animated wipe and a spin and a fade).
- Don't loop-animate text the viewer is still reading.
- Don't add overshoot to serious/financial content — it reads as toy-like.
- One "wow" moment per piece. A second one cancels the first.
这是资深创作者的关键判断。对每个元素提问：这项动效是否承载意义？ 如果不是，就让它保持静止。
- 不要让整个画面同时动起来——采用错落，或让一个锚点保持静止，让视线有所归依。
- 不要给转场再叠加转场（不要同时使用动画擦除、旋转和淡化）。
- 不要让观众仍在阅读的文字做循环动画。
- 不要在严肃/金融类内容中加入过冲——这会显得像玩具。
- 每个作品只设置一个“惊艳”时刻。第二个会抵消第一个。
Pacing & rhythm
节奏与韵律
Pacing is the edit's heartbeat. Vary it on purpose: tension (faster, tighter) → release (a hold). Map energy across the timeline before timing individual moves — most pieces want a low-energy open, a build, a peak, and a settled end card. Cut and land key moments on the audio (see launch-video for beat-syncing); silence and stillness are pacing tools, not gaps to fill.
节奏是剪辑的心跳。要有意识地变化：张力（更快、更紧凑）→释放（保持停顿）。在为单个动效设定时长前，先规划整条时间线上的能量分布——多数作品都适合采用低能量开场、逐步构建、高潮和收束平稳的尾板。让关键时刻的剪切与落位对齐音频（节拍同步参见 launch-video）；静默与静止也是节奏工具，不是需要填满的空白。
Consistency check
一致性检查
Before sign-off, audit every shot against the spec table:
- Same easing family on comparable moves? (No stray or
linear.)ease - All durations are multiples of the base unit?
- Only the chosen transition family between shots?
- Stagger rhythm identical across grouped reveals?
- Hold discipline respected — no two moves stacked without rest?
- Exactly one hero per frame?
Any "no" is a direction defect, not a craft preference — fix it before polishing.
在签核前，根据规范表审核每个镜头：
- 同类动效是否使用相同的缓动类型？（不应出现游离的 或
linear。）ease - 所有时长是否都是基础单位的倍数？
- 镜头之间是否只使用选定的转场类型？
- 成组元素的呈现是否使用一致的错落节奏？
- 是否遵守停顿规范——没有两个动效在无间隔休息的情况下连续堆叠？
- 每一帧是否恰好只有一个 Hero？
任何一个“否”都意味着指导缺陷，而非工艺偏好——应在打磨前予以修正。
Reference files
参考文件
- — worked examples of the motion-language spec for five tone cells, a full brief template, a shot-by-shot direction-notes template with example entries, brand→motion translation tables, an easing-vocabulary cheat sheet, and a complete pre-render direction checklist.
references/direction-playbook.md
- ——五种基调象限的动效语言规范实例、完整 brief 模板、包含示例条目的逐镜头指导备注模板、品牌→动效转换表、缓动词汇速查表，以及完整的渲染前指导检查清单。
references/direction-playbook.md