Back to Details

universal-solutions

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Universal Animation Solutions

通用动画解决方案

A complete diagnostic framework using all 12 Disney principles.
一个运用迪士尼全部12项动画原则的完整诊断框架。

The 12 Principles Checklist

12项原则检查清单

Run through each principle to diagnose any animation problem:
逐一排查每项原则，诊断任何动画问题：

1. Squash and Stretch

1. Squash and Stretch

Check: Is there appropriate flexibility? Problem sign: Rigid, lifeless motion Fix: Add subtle scale changes on impact/acceleration
检查：是否有恰当的灵活性？ 问题迹象：动作僵硬、缺乏生气 修复方案：在碰撞/加速时添加细微的缩放变化

2. Anticipation

2. Anticipation

Check: Is there buildup before action? Problem sign: Actions feel sudden or surprising Fix: Add small reverse movement or wind-up
检查：动作前是否有铺垫？ 问题迹象：动作显得突兀或出乎意料 修复方案：添加小幅度反向动作或预备动作

3. Staging

3. Staging

Check: Is the important thing clear? Problem sign: Users miss key information Fix: Isolate animated element, reduce competing motion
检查：重点内容是否清晰？ 问题迹象：用户错过关键信息 修复方案：隔离动画元素，减少竞争性动效

4. Straight Ahead vs Pose-to-Pose

4. Straight Ahead vs Pose-to-Pose

Check: Is the approach right for the effect? Problem sign: Uncontrolled or too rigid motion Fix: Use keyframes for UI; frame-by-frame for organic
检查：实现方式是否符合预期效果？ 问题迹象：动作不受控或过于僵硬 修复方案：UI动画使用关键帧；有机动效使用逐帧绘制

5. Follow Through

5. Follow Through

Check: Do things settle naturally? Problem sign: Abrupt, mechanical endings Fix: Add overshoot and settle, or soft deceleration
检查：元素是否自然收尾？ 问题迹象：动作结束生硬、机械 修复方案：添加过冲和回落效果，或柔和减速

6. Slow In and Slow Out

6. Slow In and Slow Out

Check: Is there proper easing? Problem sign: Robotic, linear motion Fix: Apply ease-out for entrances, ease-in for exits
检查：是否有恰当的缓动效果？ 问题迹象：动作机械、呈线性 修复方案：入场时使用缓出效果，退场时使用缓入效果

7. Arcs

7. Arcs

Check: Is the motion path natural? Problem sign: Unnatural straight-line movement Fix: Add curved paths for organic motion
检查：运动路径是否自然？ 问题迹象：运动路径为不自然的直线 修复方案：为有机动效添加曲线路径

8. Secondary Action

8. Secondary Action

Check: Do supporting elements enhance? Problem sign: Flat, one-dimensional animation Fix: Add subtle complementary movements
检查：辅助元素是否起到增强作用？ 问题迹象：动画平淡、缺乏层次感 修复方案：添加细微的补充动效

9. Timing

9. Timing

Check: Is the speed appropriate? Problem sign: Too fast or too slow Fix: Micro: 100-200ms, Transitions: 200-400ms
检查：速度是否合适？ 问题迹象：过快或过慢 修复方案：微动效：100-200ms，过渡动效：200-400ms

10. Exaggeration

10. Exaggeration

Check: Is the drama level right? Problem sign: Too subtle or too dramatic Fix: Match exaggeration to context importance
检查：戏剧化程度是否恰当？ 问题迹象：过于平淡或过于夸张 修复方案：根据场景重要性调整夸张程度

11. Solid Drawing

11. Solid Drawing

Check: Is rendering correct? Problem sign: Visual glitches, distortion Fix: Use transform/opacity only, check GPU layers
检查：渲染是否正确？ 问题迹象：视觉故障、变形 修复方案：仅使用transform/opacity属性，检查GPU图层

12. Appeal

12. Appeal

Check: Does it feel right? Problem sign: Hard to articulate wrongness Fix: Align motion with brand/emotional intent
检查：动效是否符合预期感受？ 问题迹象：难以明确描述的违和感 修复方案：使动效与品牌/情感意图保持一致

Quick Diagnostic

快速诊断步骤

  1. Describe the problem in one sentence
  2. Identify which principle relates most directly
  3. Check adjacent principles (problems cluster)
  4. Apply targeted fix from that principle
  1. 用一句话描述问题
  2. 确定最直接相关的原则
  3. 检查相邻原则（问题往往集中出现）
  4. 应用对应原则的针对性修复方案

Master Troubleshooting Checklist

高级故障排查清单

  • Does animation serve a purpose?
  • Is timing appropriate (usually 150-300ms)?
  • Is easing applied (not linear)?
  • Does it respect 
    prefers-reduced-motion
    ?
  • Is only transform/opacity being animated?
  • Is motion guiding attention correctly?
  • Does it match brand/emotional context?
  • Can users complete tasks without it?
  • Test on slowest target device
  • Get user feedback with emotional vocabulary
  • 动画是否有明确用途？
  • 时长是否合适（通常150-300ms）？
  • 是否应用了缓动效果（而非线性）？
  • 是否遵循
    prefers-reduced-motion
    设置？
  • 是否仅对transform/opacity属性做动画？
  • 动效是否正确引导注意力？
  • 是否符合品牌/情感场景？
  • 用户能否在无动画情况下完成任务？
  • 在目标设备中性能最差的机型上测试
  • 用情感词汇收集用户反馈

When to Remove Animation

何时移除动画

Remove animation entirely if:
  • It doesn't serve clear purpose
  • Users complain or skip it
  • It delays task completion
  • It causes accessibility issues
  • Performance is unacceptable
  • You can't articulate why it exists
在以下情况中完全移除动画：
  • 没有明确用途
  • 用户抱怨或跳过动画
  • 动画延迟任务完成
  • 引发无障碍问题
  • 性能无法接受
  • 无法说明动画存在的理由