animation-principles

动效原则

决定某个元素该如何运动，才能带来恰到好处的感觉——无论使用什么工具来制作。本技能解答时长、缓动、间距、重量感和节奏等问题。它不指定技术栈，而是提供具体数值（时长、cubic-bezier 曲线、交错偏移量、弹簧配置），可直接交给任何实现方案。

适用场景

• 动效显得僵硬、轻飘、机械、呆板或廉价，需要诊断问题。
• 为片段或转场选择时长、缓动曲线和交错偏移量。
• 检查动效是否符合对物理规律的直觉（重量感、跟随运动、轨迹）。
• 将关键帧与音乐节拍或剪辑重音同步。

三大支柱——确定任何数值之前，先明确这些

每个动效都应该先回答三个问题，再选择时长或曲线。忽略这些问题，做出来的动效或许在技术上无误，却毫无感觉。整个系列都以这套共通术语为基础。

支柱	问题	影响因素
情感意图	希望观众感受到什么？（喜悦、平静、紧迫、信任、优雅）	缓动、时长、幅度／过冲
视觉叙事	微型故事是什么？铺垫 → 动作 → 收束	顺序、调度、元素何时进入
动效技艺	如何让动效可信？	物理规律、次级运动、轨迹、跟随运动

动效的三个层次——营造深度，而非平面感

平面动效 = 只有主体在动。可信的动效会让三个层次同时运作：

• 主体层 — 视线跟随的主要动作（核心动作）。
• 辅助层 — 对主体动作做出响应的丰富细节（阴影移动、图标轻推、标签稍晚停稳）。
• 氛围层 — 从不抢夺注意力的背景动态（渐变缓慢漂移、低对比度脉动）。

判断层（motion-art-direction）将这三个层次称为 主角 / 辅助 / 纹理——仍是相同的三个层次，但按值得赋予动效的程度排序。主体层≈主角，辅助层≈辅助，氛围层≈纹理。

核心原则

缓动是影响最大的单一手段

线性运动看起来很机械。只有连续循环（加载指示器、跑马灯、无限滚动）才使用 linear。凡是眼睛能感知为离散事件的动作，都需要加速变化。

根据动作选择曲线：

• 进入／出现 -> 缓出（快速开始，柔和停稳）。元素充满动势地进入，并减速到位。cubic-bezier(0.16, 1, 0.3, 1)。
• 退出／消失 -> 缓入（缓慢开始，快速结束）。元素加速离开。cubic-bezier(0.7, 0, 0.84, 0)。
• 移动／重新定位（始终留在屏幕内） -> 缓入缓出（对称）。cubic-bezier(0.65, 0, 0.35, 1)。
• 俏皮／品牌风格 -> 轻微过冲。cubic-bezier(0.34, 1.56, 0.64, 1)（1.56 会让曲线超出 1.0，形成“过冲后停稳”的效果，呈现出“重量感”）。

经验法则：眼睛对缓慢开始的容忍度远低于缓慢结束。拿不准时，就让动作减速后停稳。

手动调整缓动（After Effects）。 手动设置关键帧而非输入曲线时，同样的原则可应用于图表编辑器：调整速度图表，使两端逐渐变平并趋近于零；将减速影响推至 80–90%，实现干脆的启动和平滑的停稳。F9（Easy Ease）只是一个 33% 的对称起点——应调整为非对称。有关图表编辑器的读法、手柄／影响值技巧，以及过冲、预备动作和弹跳的分步制作方法（包括衰减弹跳表达式），请参阅 references/easing-graph-editor.md。

时长传达分量感和重要性

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

距离和尺寸会影响时长。一个移动 20px 的小图标和一个移动 800px、铺满屏幕的面板不应共用同一时长——面板需要更多时间，否则会显得轻飘飘。一个实用的缩放方式：距离或面积大约翻倍时，将时长增加约 30-50%，以保持感知速度大致恒定。重物启动较慢，过冲较少；轻物则会迅速到位，也可能产生弹跳。

间隔和错开营造节奏

不要让列表、网格或组内元素同时出现——这会让它们看起来像一个平淡无奇的整体事件。错开每个子元素的开始时间。

• 列表 / 顺序排列的元素：元素之间间隔 40-80ms。
• 密集网格：20-40ms（元素越多，每个元素的延迟越短，否则尾部会拖得很长）。
• 将一组元素的总显示时长控制在约 600-800ms；如果 count * offset 超出该范围，就缩短间隔，或改用基于距离的错开方式（距离起点越远的元素，开始时间越晚）。
• 错开方向应顺应视线：从上到下，或从焦点向外辐射。

1/3 规则（两种形式，均具有普适性）：

• 距离——元素移动距离不得超过屏幕约 1/3，除非有中间关键帧，或尺寸 / 不透明度发生变化。长距离且不中断的滑动看起来像是“模板移动了”，而不是“发生了什么”。
• 同时运动——有 3 个或更多元素时，同时处于运动状态的元素不得超过约 1/3。其余元素应保持静止或进行环境性运动。所有元素一起移动 = 没有焦点的噪声。

预备动作和后续动作让运动更具真实感

• 预备动作：主要动作开始前，先做一个细微的反向动作（按钮弹起前先下沉 scale 0.95，角色跳跃前先蹲下）。60-120ms 就足够。
• 后续动作 / 重叠动作：主体停止后，附属部分继续运动（主视觉卡片落定后，阴影和标签再过 40-80ms 才稳定下来）。让附属元素错开稳定时间，不要让所有元素在同一帧停下。
• 弧线：自然运动会沿曲线进行；有机物体沿纯直线平移会显得机械。让 x/y 方向的运动略带弧度，或为动画路径添加弧线。

节拍同步与节奏

动作配合音频时，应让冲击性关键帧（撞击、剪切、显示）落在节拍上，而非节拍之间。120 BPM 时，每拍为 500ms；八分音符的间隔为 250ms。将关键时刻对齐到该时间网格。没有音乐的剪辑应建立视觉脉冲（例如每约 500-800ms 出现一个主要事件），让作品始终保持均匀的呼吸感。

弹簧运动与基于时长的运动

弹簧（质量 / 刚度 / 阻尼）会自行决定持续时间，交互式且可中断的运动（拖动后释放、手势）用起来更具真实感。对于编排好的、与时间线锁定的序列（视频、与滚动同步的显示），基于时长和缓动的方式更合适，因为它们对精确同步至关重要。一个利落的默认弹簧设置：stiffness 300, damping 30, mass 1。完整的弹簧参数表请参阅 references/easing-curves.md。

诊断常见问题

• 感觉僵硬 / 机械 -> 入场动画使用了 linear 或对称缓动；改用 ease-out。
• 感觉飘忽 / 迟缓 -> 时长过长，或 ease-out 过于柔和；将时长缩短 30%，并让曲线更陡。
• 感觉廉价 / 卡顿 -> 所有元素同时出现（没有错开），或不论尺寸大小都使用相同的时长。
• 缓动后仍然感觉机械 -> 没有预备动作、后续动作，路径是直线；添加弧线并让动作重叠。

快速参考

需求	使用方式
入场	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
列表错开	每个元素间隔 40-80ms，总时长上限约 700ms
仅用于循环	linear

参考文件

• references/easing-curves.md — 命名缓动曲线库，包含精确数值、弹簧配置（Framer/react-spring/iOS）以及针对不同元素类型的时长指导。
• references/easing-graph-editor.md — After Effects 图表编辑器技巧：速度图与数值图、缓动手柄及影响力/速度数值，以及制作利落、过冲、预期动作和弹跳的分步配方。
• references/twelve-principles.md — 全部 12 条迪士尼动画原则，每条都附有具体的动态图形示例及数值。