animation-principles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion Principles

动效设计原则

Decide how something should move so it feels right — independent of the tool used to build it. This skill answers timing, easing, spacing, weight, and rhythm. It does not pick a tech stack; it produces concrete numbers (durations, cubic-bezier curves, stagger offsets, spring configs) ready to hand to any implementation.

确定元素的合理运动方式，使其观感自然——与实现工具无关。此技能可解答时序、缓动、间距、重量感和节奏相关问题。它不指定技术栈，而是输出可直接用于任何实现的具体数值（时长、cubic-bezier曲线、stagger偏移量、spring配置）。

When to use

适用场景

Motion feels stiff, floaty, mechanical, robotic, or cheap and needs diagnosis.
Choosing a clip or transition's duration, easing curve, and stagger offset.
Reviewing whether motion respects physics intuition (weight, follow-through, arcs).
Synchronizing keyframes to a musical beat or edit accent.

动效显得生硬、漂浮、机械、呆板或廉价，需要诊断优化。
为片段或过渡选择时长、缓动曲线和stagger偏移量。
检查动效是否符合物理直觉（重量感、跟随运动、弧线轨迹）。
将关键帧与音乐节拍或剪辑重音同步。

Three pillars — settle these before any number

三大核心支柱——先明确这些再谈数值

Every piece of motion should answer three questions before you pick a duration or curve. Skip them and you get technically-correct motion that feels like nothing. These are the shared vocabulary the rest of the collection refers back to.

Pillar	The question	What it drives
Emotional intent	What should the viewer feel? (joy, calm, urgency, trust, elegance)	Easing, duration, amplitude/overshoot
Visual narrative	What's the micro-story? Setup → action → resolution	Sequencing, staging, what enters when
Motion craft	How do we make it believable?	Physics, secondary motion, arcs, follow-through

在选择时长或曲线之前，每一段动效都应先回答三个问题。跳过这些步骤，你得到的只是技术上正确但毫无质感的动效。这些是后续所有内容的通用术语基础。

支柱	核心问题	影响方向
情感意图	希望观众产生什么感受？（愉悦、平静、紧迫、信任、优雅）	缓动方式、时长、振幅/过冲量
视觉叙事	微观故事是什么？铺垫 → 动作 → 收尾	序列编排、呈现时机、元素入场顺序
动效工艺	如何让动效更可信？	物理模拟、次级动效、弧线轨迹、跟随运动

Three motion layers — depth, not flatness

三层动效结构——打造层次感而非扁平化

Flat motion = only the main thing moves. Believable motion runs three layers at once:

Primary — the main action the eye follows (the hero move).
Secondary — supporting richness reacting to the primary (a shadow shifting, an icon nudging, a label settling late).
Ambient — background life that never demands attention (slow gradient drift, a low-contrast pulse).

The judgment layer (
motion-art-direction
) calls these Hero / Support / Texture — same three layers, ranked for what earns motion. Primary≈Hero, Secondary≈Support, Ambient≈Texture.

扁平化动效 = 只有主体元素运动。可信的动效同时包含三层结构：

主层 —— 视觉焦点的核心动作（核心动效）。
次层 —— 配合主层的丰富细节（阴影偏移、图标微动、标签延迟归位）。
环境层 —— 不吸引注意力的背景动态（缓慢渐变漂移、低对比度脉动）。

判断层（
motion-art-direction
）将其称为 核心/辅助/纹理 —— 同样是三层结构，按“动效优先级”划分。主层≈核心，次层≈辅助，环境层≈纹理。

Core principles

核心原则

Easing is the single biggest lever

缓动是影响最大的调节手段

Linear motion reads as robotic. Reserve

linear

for continuous loops (spinners, marquees, infinite scroll) only. Everything an eye perceives as a discrete event needs acceleration.

Match the curve to the action:

Enter / appear -> ease-out (fast start, gentle settle). Object arrives with energy and decelerates into place.
```
cubic-bezier(0.16, 1, 0.3, 1)
```
.
Exit / disappear -> ease-in (gentle start, fast end). Object accelerates away.
```
cubic-bezier(0.7, 0, 0.84, 0)
```
.
Move / reposition (stays on screen) -> ease-in-out (symmetric).
```
cubic-bezier(0.65, 0, 0.35, 1)
```
.
Playful / branded -> slight overshoot.
```
cubic-bezier(0.34, 1.56, 0.64, 1)
```
(the
```
1.56
```
pushes past 1.0, creating an overshoot-and-settle that reads as "weight").

Rule of thumb: the eye forgives a slow start far less than a slow end. When in doubt, decelerate into rest.

Hand-shaping easing (After Effects). When keyframing by hand rather than supplying a curve, the same principles map to the Graph Editor: shape the Speed Graph so the ends flatten toward zero, and push deceleration influence to 80–90% for a snappy launch and smooth settle.

F9

(Easy Ease) is only a 33% symmetric starting point — make it asymmetric. See

references/easing-graph-editor.md

for Graph Editor reading, handle/influence techniques, and step-by-step overshoot, anticipation, and bounce recipes (including a decaying-bounce expression).

线性动效会显得机械。仅在连续循环（加载 spinner、跑马灯、无限滚动）场景下保留

linear

缓动。所有被视为独立事件的视觉元素都需要加速度。

根据动作匹配曲线：

入场/出现 -> ease-out（快速启动，平缓归位）。元素带着能量抵达后减速静止。
```
cubic-bezier(0.16, 1, 0.3, 1)
```
。
退场/消失 -> ease-in（平缓启动，快速离开）。元素加速远去。
```
cubic-bezier(0.7, 0, 0.84, 0)
```
。
移动/重定位（保持在屏幕内） -> ease-in-out（对称缓动）。
```
cubic-bezier(0.65, 0, 0.35, 1)
```
。
趣味/品牌化 -> 轻微过冲。
```
cubic-bezier(0.34, 1.56, 0.64, 1)
```
（
```
1.56
```
的数值超过1.0，产生过冲后归位的效果，传递出“重量感”）。

经验法则：相比缓慢收尾，观众更难接受缓慢启动。拿不准时，优先选择减速归位。

手动调整缓动（After Effects）。当手动设置关键帧而非直接使用曲线时，同样的原则适用于Graph Editor：调整速度曲线，使末端趋近于零，并将减速影响占比设为80–90%，实现快速启动和平缓归位。

F9

（Easy Ease）只是一个33%对称的起点——要将其调整为非对称效果。详见

references/easing-graph-editor.md

中关于Graph Editor的解读、手柄/影响技巧，以及过冲、预备动作和弹跳效果的分步教程（包括衰减弹跳表达式）。

Timing communicates weight and importance

时序传递重量感与重要性

Element	Duration
Micro-interaction (hover, toggle, tap feedback)	100-200ms
UI transition (panel, modal, page region)	200-400ms
Hero / large element / full-screen	400-800ms
Cinematic camera move	800-2000ms

Distance and size scale duration. A small icon moving 20px and a full-bleed panel moving 800px should NOT share a duration — the panel needs more time or it looks weightless. A practical scaling: keep perceived velocity roughly constant by adding ~30-50% duration when distance or area roughly doubles. Heavy objects start slowly and overshoot less; light objects snap and may bounce.

元素类型	时长
微交互（悬停、切换、点击反馈）	100-200ms
UI过渡（面板、模态框、页面区域）	200-400ms
核心元素/大型元素/全屏动效	400-800ms
电影级镜头移动	800-2000ms

时长随距离和尺寸缩放。移动20px的小图标和移动800px的全屏面板不应使用相同时长——面板需要更长时间，否则会显得无重量感。实用缩放规则：当距离或面积大致翻倍时，增加约30-50%的时长，保持感知速度大致恒定。重元素启动慢、过冲小；轻元素反应快，可能带有弹跳效果。

Spacing and stagger create rhythm

间距与Stagger打造节奏

Never reveal a list, grid, or group all at once — it reads as a single flat event. Stagger each child's start.

Lists / sequential items: 40-80ms between items.
Dense grids: 20-40ms (more items, less per-item delay, or the tail drags).
Cap total reveal at roughly 600-800ms for a group; if
```
count * offset
```
exceeds that, shrink the offset or switch to a distance-based stagger (items further from an origin point start later).
Stagger direction should follow the eye: top-to-bottom, or radiating from a focal point.

The 1/3 Rule (two forms, both universal):

Distance — no element travels more than ~1/3 of the screen without an intermediate keyframe or a scale/opacity change. Long unbroken slides read as "the template moved," not "something happened."
Simultaneity — with 3+ elements, keep no more than ~1/3 in active motion at once. The rest hold or move as ambient. Everything moving together = noise with no focal point.

永远不要一次性展示列表、网格或群组的所有元素——这会被视为单一扁平化事件。为每个子元素设置延迟启动。

列表/顺序项：40-80ms的元素间隔。
密集网格：20-40ms（元素越多，单元素延迟越小，否则尾部动效拖沓）。
群组总展示时长控制在600-800ms左右；如果
```
元素数量 × 偏移量
```
超过此值，缩小偏移量或切换为基于距离的stagger（离原点越远的元素启动越晚）。
Stagger方向应符合视觉流向：从上到下，或从焦点向外辐射。

1/3法则（两种通用形式）：

距离 —— 任何元素移动超过屏幕约1/3的距离时，需添加中间关键帧或缩放/透明度变化。无中断的长距离滑动会被解读为“模板移动”，而非“事件发生”。
同步性 —— 当有3个以上元素时，同时处于活跃运动状态的元素不应超过约1/3。其余元素保持静止或作为环境动效移动。所有元素同时运动=无焦点的噪音。

Anticipation and follow-through sell physical motion

预备动作与跟随运动强化物理真实感

Anticipation: a tiny counter-move before the main action (a button dips
```
scale 0.95
```
before popping, a character crouches before jumping). 60-120ms is enough.
Follow-through / overlapping action: trailing parts keep moving after the main body stops (a hero card lands, then its shadow and label settle 40-80ms later). Stagger the settle of attached elements rather than stopping everything on the same frame.
Arcs: natural movement curves; pure straight-line translation of an organic object looks mechanical. Add a slight arc to x/y or animate a path.

预备动作：主动作前的微小反向运动（按钮在弹出前先缩小至
```
scale 0.95
```
，角色跳跃前先下蹲）。60-120ms即可。
跟随运动/重叠动作：主体停止后，附属部分继续运动（核心卡片落地后，其阴影和标签延迟40-80ms归位）。为附属元素设置归位延迟，而非所有元素在同一帧停止。
弧线轨迹：自然运动呈曲线；有机元素的纯直线平移会显得机械。为x/y轴添加轻微弧线或沿路径动画。

Beat-sync and rhythm

节拍同步与节奏

When motion accompanies audio, land impact keyframes (a hit, a cut, a reveal) on the beat, not between beats. At 120 BPM a beat is 500ms; an eighth-note grid is 250ms. Quantize key moments to that grid. For edits without music, establish a visual pulse (e.g. one major event per ~500-800ms) so the piece breathes consistently.

当动效伴随音频时，将关键帧（撞击、剪辑、展示）落在节拍上，而非节拍之间。120 BPM下，一个节拍为500ms；八分音符网格为250ms。将关键时刻对齐该网格。对于无音乐的剪辑，建立视觉脉冲（例如每~500-800ms一个主要事件），使整体节奏连贯。

Spring vs. duration-based motion

Spring动效 vs 基于时长的动效

Springs (mass / stiffness / damping) self-determine duration and feel more physical for interactive, interruptible motion (drag-release, gestures). Duration+easing is better for choreographed, timeline-locked sequences (video, scroll-tied reveals) where exact sync matters. A snappy default spring:

stiffness 300, damping 30, mass 1

. See

references/easing-curves.md

for a full spring table.

Spring（质量/刚度/阻尼）会自动确定时长，更适合交互式、可中断的动效（拖拽释放、手势操作）。时长+缓动更适合编排好的、时间轴锁定的序列（视频、滚动触发的展示），这类场景需要精确同步。明快的默认Spring配置：

stiffness 300, damping 30, mass 1

。完整的Spring配置表详见

references/easing-curves.md

。

Diagnosing common failures

常见问题诊断

Feels stiff/robotic -> using
```
linear
```
or symmetric easing on an enter; switch to ease-out.
Feels floaty/sluggish -> duration too long or ease-out too gentle; cut duration 30%, sharpen the curve.
Feels cheap/janky -> everything appears at once (no stagger), or all elements share one duration regardless of size.
Feels mechanical despite easing -> no anticipation, no follow-through, straight-line paths; add arcs and overlap.

生硬/机械感 -> 入场使用了
```
linear
```
或对称缓动；切换为ease-out。
漂浮/迟缓感 -> 时长过长或ease-out过于平缓；将时长缩短30%，调陡曲线。
廉价/卡顿感 -> 所有元素同时出现（无stagger），或所有元素使用相同时长（忽略尺寸差异）。
已用缓动但仍显机械 -> 无预备动作、无跟随运动、直线轨迹；添加弧线和重叠动效。

Quick reference

快速参考

Need	Use
Enter	`cubic-bezier(0.16, 1, 0.3, 1)` , 300-500ms
Exit	`cubic-bezier(0.7, 0, 0.84, 0)` , 200-300ms
Move	`cubic-bezier(0.65, 0, 0.35, 1)` , 300-400ms
Branded pop	`cubic-bezier(0.34, 1.56, 0.64, 1)` , 400-600ms
List stagger	40-80ms per item, cap ~700ms total
Loop only	`linear`

需求	使用方案
入场	`cubic-bezier(0.16, 1, 0.3, 1)` ，300-500ms
退场	`cubic-bezier(0.7, 0, 0.84, 0)` ，200-300ms
移动	`cubic-bezier(0.65, 0, 0.35, 1)` ，300-400ms
品牌化弹跳	`cubic-bezier(0.34, 1.56, 0.64, 1)` ，400-600ms
列表Stagger	每元素40-80ms间隔，总时长上限约700ms
仅循环场景	`linear`

Reference files

参考文件

```
references/easing-curves.md
```
— named cubic-bezier library with exact values, spring configs (Framer/react-spring/iOS), and per-element-type duration guidance.
```
references/easing-graph-editor.md
```
— After Effects Graph Editor craft: speed graph vs value graph, easing handles and influence/velocity numbers, and step-by-step snappy, overshoot, anticipation, and bounce recipes.
```
references/twelve-principles.md
```
— all 12 Disney principles, each with a concrete, numeric motion-graphics example.

```
references/easing-curves.md
```
—— 带精确数值的命名cubic-bezier库、Spring配置（Framer/react-spring/iOS），以及按元素类型划分的时长指南。
```
references/easing-graph-editor.md
```
—— After Effects Graph Editor实操：速度曲线vs数值曲线、缓动手柄与影响/速度数值，以及明快动效、过冲、预备动作和弹跳效果的分步教程。
```
references/twelve-principles.md
```
—— 迪士尼12条动画原则，每条原则都配有具体的数值化动效示例。