Back to Details

follow-through-overlapping

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Follow Through & Overlapping Action Mastery

跟随动作与重叠动作精通

The Momentum Principle

动量原理

Nothing stops all at once. When a character halts, their hair keeps moving. When a car brakes, passengers lurch forward. Follow through and overlapping action capture how different parts of a system respond to forces at different rates—the principle that makes animation feel physically grounded.
没有物体会瞬间完全停止。角色停下时头发会继续运动，汽车刹车时乘客会向前倾。跟随动作和重叠动作捕捉了系统中不同部件对力的不同响应速率——正是这一原理让动画看起来符合物理规律。

Core Theory: Two Related Concepts

核心理论：两个关联概念

Follow Through: When the main body stops, appendages continue moving due to momentum, then settle. The termination behavior of motion.
Overlapping Action: Different parts move at different rates throughout motion, not just at stops. Hair doesn't start moving when the head starts—it drags behind, then catches up. The continuous offset of timing.
跟随动作：主体停止运动时，附属肢体因动量会继续运动，随后逐渐稳定，属于运动的终止表现。
重叠动作：运动全程中不同部件的运动速率都存在差异，并非仅在停止时才有区别。头发不会和头部同时启动——它会先滞后，随后再跟上，属于时间上的持续偏移。

The Drag Hierarchy

拖拽层级

Parts further from the root of motion drag more:
  1. Root (hips, torso): Moves first, stops first
  2. Primary extensions (limbs, head): Slight delay
  3. Secondary extensions (hands, facial features): More delay
  4. Tertiary elements (fingers, hair, cloth): Maximum drag
Each level follows the previous, creating cascading waves of motion.
距离运动根节点越远的部件，拖拽效应越明显：
  1. 根节点（胯部、躯干）：最先运动，最先停止
  2. 一级延伸部件（四肢、头部）：轻微延迟
  3. 二级延伸部件（手部、面部特征）：延迟更明显
  4. 三级元素（手指、头发、布料）：拖拽效应最强
每一层级都跟随上一层级运动，形成层叠的运动波浪效果。

Physical Properties Affecting Drag

影响拖拽效果的物理属性

  • Mass: Heavier elements have more follow through
  • Flexibility: Softer materials show more overlapping action
  • Air resistance: Flat/wide surfaces drag more
  • Attachment point: Loose connections create greater offset
  • 质量：更重的元素跟随效果更明显
  • 柔韧性：越柔软的材料重叠动作越突出
  • 空气阻力：扁平/宽大的表面拖拽效应更强
  • 连接点：松动的连接会产生更大的偏移

Interaction with Other Principles

与其他原理的关联

Timing defines follow through duration: Fast stops = long follow through; slow stops = subtle settling.
Arcs govern the follow through path: Appendages swing through curved trajectories, not linear ones.
Secondary action is often follow through: The supporting motion that enriches without distracting.
Squash/stretch appears in settling: Objects compress slightly when follow through terminates.
时长决定跟随动作持续时间：急停 = 长跟随效果；缓停 = 细微沉降效果。
弧线控制跟随动作路径：肢体沿曲线轨迹摆动，而非直线运动。
次级动作通常属于跟随动作：这类辅助动效可以丰富表现且不会分散注意力。
挤压/拉伸效果会出现在沉降阶段：跟随动作终止时物体会有轻微压缩效果。

Domain Applications

领域应用

UI/Motion Design

UI/动效设计

  • List scrolling: inertial continuation past finger release
  • Card stacks: sequential settling with offset timing
  • Modal dismissal: background elements settle after foreground
  • Pull-to-refresh: elastic overshoot and return
  • Notification badges: bounce and settle on count change
  • 列表滚动：手指松开后的惯性延续
  • 卡片栈：带时间偏移的顺序沉降
  • 模态框关闭：背景元素在前景元素之后稳定
  • 下拉刷新：弹性超调后回弹
  • 通知徽章：计数变化时的弹跳和沉降效果

Character Animation

角色动画

  • Hair and cloth simulation: constant overlapping action
  • Tail motion: follows body path with significant delay
  • Facial features: cheeks, jowls follow head rotation
  • Walk cycles: arm swing offsets from leg timing
  • Jump landing: body compresses, then appendages catch up
  • 毛发与布料模拟：持续的重叠动作
  • 尾巴运动：大幅滞后于身体运动路径
  • 面部特征：脸颊、下颌跟随头部转动
  • 行走循环：手臂摆动与腿部运动存在时间偏移
  • 跳跃落地：身体先压缩，随后肢体再跟上

Logo and Typography

Logo与排版

  • Word reveals: letters arrive with staggered settling
  • Logo builds: elements land sequentially, each with follow through
  • Kinetic typography: phrases move with internal timing offsets
  • 文字展示：字母错落到达后依次稳定
  • Logo生成：元素按顺序落地，每个都有跟随效果
  • 动态排版：短语内部存在运动时间偏移

Physics-Based UI

物理驱动UI

  • Drag and drop: object continues briefly past release point
  • Elastic boundaries: content follows finger, then snaps back
  • Spring animations: natural overshoot and settling
  • 拖拽投放：对象松开后会短暂继续运动一段距离
  • 弹性边界：内容跟随手指运动，随后回弹
  • 弹簧动画：自然的超调和沉降效果

Common Mistakes

常见错误

  1. Everything stopping simultaneously: Creates robotic, mechanical feel
  2. Excessive follow through: Elements feel disconnected, floaty
  3. No hierarchy: All parts moving with same delay
  4. Linear settling: Follow through should ease out, not stop abruptly
  1. 所有元素同时停止：会产生机器人般的机械感
  2. 跟随动作过度：元素会看起来脱节、轻飘飘
  3. 无层级差异：所有部件的延迟都相同
  4. 线性沉降：跟随动作应该缓出，而不是突然停止

The Stagger Formula

交错公式

For believable overlapping action, offset secondary elements by 2-4 frames (at 24fps) per level of hierarchy. Root moves on frame 1, primary on frame 2-3, secondary on frame 4-6, tertiary on frame 6-10.
要实现真实可信的重叠动作，每个层级的次级元素偏移2-4帧（24fps帧率下）。根节点在第1帧运动，一级部件在2-3帧，二级部件在4-6帧，三级元素在6-10帧。

The Settling Curve

沉降曲线

Follow through should never snap to rest. Use ease-out curves with slight overshoot:
  • Quick initial movement past rest position
  • Slower return toward rest
  • Possible micro-overshoot in opposite direction
  • Final ease to stillness
跟随动作绝对不能直接跳到静止状态。使用带轻微超调的缓出曲线：
  • 初始快速运动超过静止位置
  • 缓慢向静止位置回落
  • 可能会向反方向产生微小超调
  • 最终缓动到完全静止

Implementation Heuristic

实现指引

Identify all elements that could move independently. Assign each a drag value based on mass, flexibility, and distance from root. Apply timing offsets proportional to drag. Add settling oscillation to termination. When motion feels stiff, you probably need more overlapping action.
找出所有可以独立运动的元素，根据质量、柔韧性和与根节点的距离为每个元素分配拖拽值，施加与拖拽值成正比的时间偏移，为运动终止添加沉降振荡效果。如果动效看起来很僵硬，通常说明你需要增加更多重叠动作。