Fitness Wellness

dylantarre/animation-principles/skills/08-by-industry/fitness-wellness

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

Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences

仅含说明Design & Creative
AI 生成的概览

运用迪士尼十二项动画原则,指导健身、健康、运动追踪与冥想应用的动画设计。

功能
该技能为健身与健康界面的动画提供设计指导,将迪士尼十二项动画原则对应到训练按钮、进度环、活动图标、计时器和冥想引导等元素上。它还列出行业时间标准,给出按钮按下、进度环完成、训练切换、冥想淡入淡出和成就弹出等动作的时长与缓动方式。产出的是设计方向,而非代码或文件。
适用场景
适用于为健身应用、健康平台、运动追踪器或冥想体验设计动效或动画时。适合用来选择与活动强度相匹配的时长、缓动和庆祝性动效。
运行要求
无需任何工具、软件包、运行时或凭据;仅为说明性内容,不附带脚本。

Fitness & Wellness Animation Principles

Apply Disney's 12 principles to create motivating, energizing experiences that celebrate achievement and support healthy habits.

The 12 Principles Applied

1. Squash & Stretch

  • Workout Buttons: Energetic squash on tap
  • Progress Rings: Pulse with achievement
  • Activity Icons: Bounce with completion

2. Anticipation

  • Workout Start: Countdown builds energy
  • Timer Begin: Ready-set-go sequence
  • Goal Completion: Suspenseful approach

3. Staging

  • Current Exercise: Full focus on active movement
  • Stats Display: Supporting role during workout
  • Rest Periods: Recovery metrics highlighted

4. Straight Ahead & Pose to Pose

  • Live Workouts: Continuous timer flow (straight ahead)
  • Exercise Sequence: Move-by-move progression (pose to pose)
  • Meditation Guides: Defined breathing phases

5. Follow Through & Overlapping Action

  • Workout Complete: Badge lands, then stats appear
  • Calorie Counter: Numbers settle with follow-through
  • Activity Rings: Animate sequentially with overlap

6. Slow In & Slow Out

  • High Energy Moments: Quick, punchy timing
  • Recovery/Meditation: Slow, calming easing
  • Transitions: Match current activity intensity

7. Arc

  • Progress Circles: Smooth arc completion
  • Running Routes: Curved path visualization
  • Gesture Controls: Natural arced movements

8. Secondary Action

  • Goal Hit: Fireworks while achievement saves
  • Personal Record: Crown appears with celebration
  • Streak Maintained: Fire burns while counter updates

9. Timing

  • Intense Moments: Fast 100-150ms for energy
  • Mindfulness: Slow 500-700ms for calm
  • Standard UI: Moderate 200-300ms

10. Exaggeration

  • Celebrate Big: Fitness thrives on motivation
  • Personal Records: Dramatic achievement reveals
  • Streak Milestones: Memorable celebrations

11. Solid Drawing

  • Body Mechanics: Accurate movement demonstrations
  • Data Visualization: Clear, readable metrics
  • Exercise Illustrations: Proper form representation

12. Appeal

  • Motivational Energy: Uplifting, encouraging motion
  • Dual Modes: Intensity for workouts, calm for wellness
  • Achievement Focus: Every win feels significant

Industry Timing Standards

ActionDurationEasing
Button Press150msease-out
Ring Complete600msspring
Workout Transition250msease-in-out
Meditation Fade500msease-in-out
Achievement Pop800mscustom-bounce

Key Principle

Match animation energy to activity intensity. Workouts demand energetic, motivating motion while meditation requires calm, breathing-synced animations. Always celebrate progress.

来源与署名

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

许可证: 无许可证

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

举报或申请下架