universal-tool

通用动画原则

无论使用何种工具或框架，都应遵循迪士尼的全部 12 条动画原则。

1. 挤压与拉伸

概念：物体在运动时会发生形变，同时保持体积不变。

实现方式：

• 压缩一个轴时，拉伸另一个轴
• scaleX * scaleY ≈ constant
• 在撞击、加速或减速时应用

数值：压缩至 80%，拉伸至 120%

2. 预备动作

概念：让观众为即将发生的动作做好准备。

实现方式：

• 先朝主要动作的相反方向移动
• 预备动作约占总时长的 20%
• 动作越快，预备动作越小

模式：预备 → 动作 → 稳定

3. 演出布局

概念：引导观众注意重要内容。

实现方式：

• 模糊或淡化背景元素
• 放大焦点
• 运用对比（颜色、大小、运动）
• 一次只呈现一个明确动作

4. 逐帧动画／关键姿势动画

逐帧动画：按顺序逐帧制作动画。适用于流畅、有机的运动。

关键姿势动画：先定义关键姿势，再补齐中间帧。适用于精确、经过规划的运动。

建议：UI 使用关键姿势动画，粒子和特效使用逐帧动画。

5. 跟随动作与重叠动作

概念：不同部分以不同速度运动。

实现方式：

• 错开子元素的时间
• 为次要元素添加 2-5 帧延迟
• 较轻或较松的部分会滞后
• 为每个元素使用不同曲线的缓动

6. 慢入与慢出

概念：自然运动会加速和减速。

实现方式：

• 大多数运动使用 ease-in-out
• 进入时使用 ease-out（柔和地到达）
• 退出时使用 ease-in（自然地离开）
• 仅机械运动使用线性动画

常用曲线：cubic-bezier(0.42, 0, 0.58, 1)

7. 弧线运动

概念：自然运动沿曲线路径进行。

实现方式：

• 有机元素应避免直线运动
• 使用运动路径或多点关键帧
• 抛出物体使用抛物线
• 摆动使用钟摆弧线

8. 次要动作

概念：辅助动作能强化主要动作。

实现方式：

• 添加与主要动作相辅相成的细微运动
• 示例：头发弹动、阴影移动、粒子效果
• 不应分散观众对主要动作的注意力
• 比主要动作稍晚发生

9. 时间

概念：速度传达重量、情绪和角色特征。

时长	感受	使用场景
50-150ms	干脆利落	微交互
150-300ms	响应灵敏	按钮反馈
300-500ms	平滑	页面过渡
500-800ms	从容	模态框显现
1000ms+	戏剧化	主视觉动画

10. 夸张

概念：突破现实效果，增强表现力。

实现方式：

• 将运动幅度放大至细微效果之上 20-50%
• 先越过目标位置，再稳定下来
• 夸张程度越高，效果越卡通
• UI：采用细微夸张（超出目标位置 5-15%）

11. 扎实绘制

概念：在 3D 空间中保持体积感和重量感。

实现方式：

• 考虑三个维度
• 保持透视一致
• 变换过程中保留体积感
• 使用阴影让元素显得稳固

12. 吸引力

概念：让动画令人愉悦、引人入胜。

实现方式：

• 使用平滑曲线，而非尖锐角度
• 保持时间节奏一致
• 提供清晰的视觉反馈
• 让交互响应令人满意
• 在可预期与惊喜感之间取得平衡

通用时间参考

Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms

通用缓动参考

Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic

检查清单

发布动画前：

• 是否使用了缓动（而非线性动画）？
• 时长是否适合该动作？
• 自然情况下是否遵循弧线运动？
• 重要动作是否有预备动作？
• 次要元素是否稍有延迟？
• 焦点是否明确？
• 动画是否令人满意？