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 從公開儲存庫中收錄這些內容。

檢舉或申請下架