运动原理
决定物体应该如何运动才能感觉自然——独立于用于构建它的工具。本技能可解答时长、缓动、间距、重量和节奏问题。它不选择技术栈；而是生成具体的数值（时长、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；如果
计数 * 偏移超过此值，则减少偏移量或切换到基于距离的交错（距离原点较远的元素较晚开始）。 - 交错方向应跟随视线：从上到下，或从焦点向外辐射。
1/3 法则（两种形式，均通用）：
- 距离 —— 没有元素在缺少中间关键帧或缩放/透明度变化的情况下移动超过约屏幕的 1/3。长的无间断滑动读作“模板移动了”，而非“某事发生了”。
- 同时性 —— 对于 3 个及以上的元素，同一时间保持不超过约 1/3 处于活动运动状态。其余保持或作为环境运动。所有元素同时运动 = 没有焦点的噪音。
预期和跟随动作体现物理运动
- 预期：主要动作前的一个微小反向运动（按钮在弹起前下压至
scale 0.95，角色在跳跃前下蹲）。60-120ms 就足够了。 - 跟随动作 / 交叠动作：主要物体停止后，尾部部分继续移动（主角卡片落地，然后其阴影和标签在 40-80ms 后稳定）。交错附属元素的稳定时间，而不是让所有东西在同一帧上停止。
- 弧线：自然的运动曲线；纯直线的平移有机物体看起来机械。为 x/y 添加一个轻微的弧线或沿路径动画。
节拍同步和节奏
当运动伴随音频时，将冲击关键帧（一次打击、一次剪辑、一次揭示）落在节拍上，而不是两拍之间。在 120 BPM 下，一拍是 500ms；一个八分音符网格是 250ms。将关键时刻量化到该网格上。对于没有音乐的视频剪辑，建立一个视觉脉搏（例如，每约 500-800ms 一个主要事件），使作品保持一致的呼吸感。
弹簧 vs. 基于时长/缓动的运动
弹簧（质量 / 刚度 / 阻尼）自行确定时长，对于交互式、可中断的运动（拖拽释放、手势）感觉更物理。时长+缓动更适合编舞式的、时间线锁定的序列（视频、滚动关联揭示），其中需要精确的同步。一个干脆的默认弹簧：stiffness 300, damping 30, mass 1。完整弹簧表参见 references/easing-curves.md。
诊断常见故障
- 感觉僵硬/机械 -> 进入动画使用了
linear或对称缓动；切换到缓出。 - 感觉漂浮/缓慢 -> 时长过长或缓出过于平缓；缩短时长 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—— 命名 cubic-bezier 库，包含精确值、弹簧配置（Framer/react-spring/iOS）以及按元素类型划分的时长指导。references/easing-graph-editor.md—— After Effects 图形编辑器工艺：速度图与值图，缓动手柄和影响力/速度数值，以及干脆、过冲、预期和弹跳方法的逐步说明。references/twelve-principles.md—— 全部 12 个迪士尼原理，每个都附有具体的、数字化的运动图形示例。