education-learning
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseEducation & Learning Animation Principles
教育与学习类动画设计原则
Apply Disney's 12 principles to create engaging, encouraging experiences that support comprehension and celebrate progress.
将迪士尼的12条动画原则应用于设计，打造具有吸引力、鼓励性的体验，助力知识理解并为学习成果喝彩。
The 12 Principles Applied
12条原则的实际应用
1. Squash & Stretch
1. 挤压与拉伸（Squash & Stretch）
- Answer Buttons: Friendly squash on selection
- Mascots/Characters: Personality through stretch
- Achievement Badges: Bounce with character
- 答题按钮：选中时呈现友好的挤压效果
- 吉祥物/角色：通过拉伸动作塑造个性
- 成就徽章：带有角色感的弹跳效果
2. Anticipation
2. 预备动作（Anticipation）
- Quiz Reveal: Build-up before showing results
- Next Lesson: Preparation for new content
- Submit Answer: Moment before feedback
- 测验结果揭晓：展示结果前的铺垫效果
- 下一课过渡：为新内容做准备的过渡
- 提交答案：反馈前的短暂停顿
3. Staging
3. 舞台呈现（Staging）
- Learning Content: Primary focus always
- Progress Indicators: Visible but not distracting
- Interactive Elements: Clear call to action
- 学习内容：始终作为视觉焦点
- 进度指示器：可见但不分散注意力
- 交互元素：清晰的行动指引
4. Straight Ahead & Pose to Pose
4. 逐帧绘制与关键帧绘制（Straight Ahead & Pose to Pose）
- Video Lessons: Continuous playback (straight ahead)
- Course Progress: Step-by-step modules (pose to pose)
- Interactive Exercises: Defined question states
- 视频课程：连续播放（逐帧绘制）
- 课程进度：分步式模块（关键帧绘制）
- 互动练习：明确的问题状态切换
5. Follow Through & Overlapping Action
5. 跟随动作与重叠动作（Follow Through & Overlapping Action）
- Correct Answer: Checkmark lands, then celebration
- Lesson Cards: Stack with natural follow-through
- Points Counter: Numbers settle after update
- 正确答案：对勾落下后触发庆祝动画
- 课程卡片：自然堆叠的跟随效果
- 积分计数器：数值更新后稳定下来
6. Slow In & Slow Out
6. 慢入慢出（Slow In & Slow Out）
- Gentle Transitions: Nothing jarring while learning
- Content Reveals: Comfortable pacing
- Modal Opens: Smooth 300-400ms
- 平缓过渡：学习过程中无突兀效果
- 内容展示：舒适的节奏
- 弹窗打开：300-400ms的平滑动画
7. Arc
7. 弧线运动（Arc）
- Progress Paths: Curved learning journeys
- Drag Answers: Natural arc to drop zones
- Reward Animations: Confetti follows arcs
- 学习路径：曲线型的学习旅程展示
- 拖拽答题：向目标区域移动的自然弧线
- 奖励动画：彩屑沿弧线飘落
8. Secondary Action
8. 次要动作（Secondary Action）
- XP Gained: Sparkles while points update
- Streak Maintained: Fire animation with counter
- Level Up: Background effects with main celebration
- 获得经验值（XP）：数值更新时伴随火花效果
- 保持连续学习天数（Streak）：计数器旁的火焰动画
- 升级：主庆祝效果搭配背景动画
9. Timing
9. 时间节奏（Timing）
- Feedback: Quick 150-200ms for responsiveness
- Celebrations: Longer 500-800ms for motivation
- Transitions: Moderate 300-400ms for clarity
- 反馈：150-200ms的快速响应
- 庆祝效果：500-800ms的较长时长以提升动力
- 过渡动画：300-400ms的适中时长以保证清晰
10. Exaggeration
10. 夸张表现（Exaggeration）
- Celebrate Success: Big positive reinforcement
- Gentle on Errors: Never discouraging
- Milestones: Mark achievements memorably
- 庆祝成功：强烈的正向强化效果
- 错误处理：温和不打击积极性
- 里程碑：令人难忘的成就标记
11. Solid Drawing
11. 扎实造型（Solid Drawing）
- Illustrations: Friendly, consistent art style
- Diagrams: Clear educational visuals
- Icons: Approachable, not intimidating
- 插画：友好、风格统一的美术设计
- 图表：清晰的教学可视化内容
- 图标：亲切无压迫感
12. Appeal
12. 吸引力（Appeal）
- Encouraging Personality: Warm and supportive
- Age-Appropriate: Match target learner
- Motivation Design: Reward-driven animations
- 鼓励性特质：温暖且支持的风格
- 适龄设计：匹配目标学习者年龄
- 激励设计：以奖励为导向的动画
Industry Timing Standards
行业时长标准
| Action | Duration | Easing |
|---|---|---|
| Answer Feedback | 200ms | ease-out |
| Correct Celebration | 600ms | spring |
| Lesson Transition | 350ms | ease-in-out |
| Progress Update | 300ms | ease-out |
| Achievement Unlock | 800ms | custom-bounce |
| 动作 | 时长 | 缓动效果 |
|---|---|---|
| 答题反馈 | 200ms | ease-out |
| 正确答案庆祝 | 600ms | spring |
| 课程过渡 | 350ms | ease-in-out |
| 进度更新 | 300ms | ease-out |
| 成就解锁 | 800ms | custom-bounce |
Key Principle
核心原则
Animation should encourage and reward. Celebrate progress generously, handle mistakes gently, and maintain engagement through thoughtful micro-interactions that make learning feel like an adventure.
动画应起到鼓励和奖励的作用。慷慨地为学习成果喝彩，温和地处理错误，通过精心设计的微交互让学习过程充满乐趣，如同一场冒险。