Education Learning

dylantarre/animation-principles/skills/08-by-industry/education-learning

作者 dylantarre83597134ba8f无许可证99 个星标收录于 2026年10月8日更新于 2026年10月8日仓库9个月前更新

Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences

AI 生成的概览

将迪士尼十二项动画原则应用于教育和在线学习界面的设计指导。

功能
该技能为在线学习平台、辅导应用和技能培养类产品提供动画设计指导。它把迪士尼十二项动画原则逐一对应到具体的学习界面场景,如答题按钮、测验结果揭晓、进度指示和成就徽章。它还列出了常见动作(如答题反馈、庆祝动画、课程切换和成就解锁)建议的时长与缓动曲线。
适用场景
适用于为教育类产品设计动效或微交互时,例如辅导应用、课程平台或测验界面。适合用于决定反馈节奏、庆祝动画和过渡效果,以支持理解与学习动力。
运行要求
无需任何工具、软件包或凭据;仅为说明性内容,不包含脚本。

Education & Learning Animation Principles

Apply Disney's 12 principles to create engaging, encouraging experiences that support comprehension and celebrate progress.

The 12 Principles Applied

1. Squash & Stretch

  • Answer Buttons: Friendly squash on selection
  • Mascots/Characters: Personality through stretch
  • Achievement Badges: Bounce with character

2. Anticipation

  • Quiz Reveal: Build-up before showing results
  • Next Lesson: Preparation for new content
  • Submit Answer: Moment before feedback

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

  • 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

  • Correct Answer: Checkmark lands, then celebration
  • Lesson Cards: Stack with natural follow-through
  • Points Counter: Numbers settle after update

6. Slow In & Slow Out

  • Gentle Transitions: Nothing jarring while learning
  • Content Reveals: Comfortable pacing
  • Modal Opens: Smooth 300-400ms

7. Arc

  • Progress Paths: Curved learning journeys
  • Drag Answers: Natural arc to drop zones
  • Reward Animations: Confetti follows arcs

8. Secondary Action

  • XP Gained: Sparkles while points update
  • Streak Maintained: Fire animation with counter
  • Level Up: Background effects with main celebration

9. Timing

  • Feedback: Quick 150-200ms for responsiveness
  • Celebrations: Longer 500-800ms for motivation
  • Transitions: Moderate 300-400ms for clarity

10. Exaggeration

  • Celebrate Success: Big positive reinforcement
  • Gentle on Errors: Never discouraging
  • Milestones: Mark achievements memorably

11. Solid Drawing

  • Illustrations: Friendly, consistent art style
  • Diagrams: Clear educational visuals
  • Icons: Approachable, not intimidating

12. Appeal

  • Encouraging Personality: Warm and supportive
  • Age-Appropriate: Match target learner
  • Motivation Design: Reward-driven animations

Industry Timing Standards

ActionDurationEasing
Answer Feedback200msease-out
Correct Celebration600msspring
Lesson Transition350msease-in-out
Progress Update300msease-out
Achievement Unlock800mscustom-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.

来源与署名

来源:dylantarre/animation-principles位于skills/08-by-industry/education-learning提交8359713

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架