运动原理 是做什么的？
决定物体如何运动才能感觉自然——独立于构建工具。本技能提供关于时间、缓动、间距、重量和节奏的具体数值，而不涉及技术栈选择。它产出可直接交给任何实现使用的具体数字（持续时间、三次贝塞尔曲线、交错偏移量、弹簧配置）。
何时使用
- 运动感觉僵硬、漂浮、机械或廉价，需要诊断。
- 选择剪辑或过渡的持续时间、缓动曲线和交错偏移量。
- 审查运动是否尊重物理直觉（重量、跟随动作、弧线）。
- 将关键帧同步到音乐节拍或编辑重音。
三大支柱——在确定任何数值之前先澄清
在选取持续时间或曲线之前，每段运动都应回答三个问题。跳过它们，你会得到技术上正确但感觉毫无生气的运动。这是后续所有参考文件共享的通用词汇。
| 支柱 | 问题 | 驱动因素 |
|---|---|---|
| 情感意图 | 观众应该感觉什么？（愉悦、平静、紧迫、信任、优雅） | 缓动、持续时间、振幅/过冲 |
| 视觉叙事 | 微观故事是什么？准备 → 动作 → 收尾 | 排序、层次安排、何时进入 |
| 运动工艺 | 如何让它令人信服？ | 物理、次级运动、弧线、跟随动作 |
三个运动层次——立体而非扁平
扁平运动 = 只有主要物体在动。令人信服的运动需要同时运行三个层次：
- 主要层——眼睛跟随的主要动作（主角运动）。
- 次级层——对主要动作作出响应的支持性丰富细节（阴影移动、图标轻推、标签延迟到位）。
- 环境层——从不要求注意的背景生机（缓慢渐变漂移、低对比度脉冲）。
判断层（
motion-art-direction）将它们称为主角 / 支持 / 纹理——相同的三个层次，按动作应得程度排序。主要层≈主角，次级层≈支持，环境层≈纹理。
核心原则
缓动是最重要的杠杆
线性运动显得机械。仅在连续循环（旋转图标、跑马灯、无限滚动）中使用 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）。 当手动设置关键帧而非提供曲线时，相同原则适用于图形编辑器：调整速度图，使两端趋于零，并将减速度影响推至 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。其余保持静止或作为环境运动。所有元素一起运动 = 没有焦点的噪音。
预判和跟随动作体现物理运动
- 预判：主要动作前的一个极小反向动作（按钮在弹出前先缩放到
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或对称缓动；改为 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 个迪士尼原则，每个都附有具体的、数值化的动态图形示例。