universal-tool

仓库: dylantarre/animation-principles
安装量: 40
排名: #17979

安装

npx skills add https://github.com/dylantarre/animation-principles --skill universal-tool

Apply all 12 Disney animation principles regardless of your tool or framework.

1. Squash and Stretch

Concept: Objects deform when moving, maintaining volume.

Implementation:

  • When compressing one axis, expand the other

  • scaleX * scaleY ≈ constant

  • Apply on impact, acceleration, or deceleration

Values: Compress to 80%, expand to 120%

2. Anticipation

Concept: Prepare the audience for an action.

Implementation:

  • Move opposite to the main action first

  • ~20% of total duration for wind-up

  • Smaller anticipation for faster actions

Pattern: Wind-up → Action → Settle

3. Staging

Concept: Direct viewer attention to what matters.

Implementation:

  • Blur or fade background elements

  • Scale up the focal point

  • Use contrast (color, size, motion)

  • One clear action at a time

4. Straight Ahead / Pose to Pose

Straight Ahead: Animate frame-by-frame sequentially. Good for fluid, organic motion.

Pose to Pose: Define key poses, then fill in between. Good for precise, planned motion.

Recommendation: Use pose-to-pose for UI, straight ahead for particles/effects.

5. Follow Through and Overlapping Action

Concept: Different parts move at different rates.

Implementation:

  • Offset timing of child elements

  • Add 2-5 frame delay for secondary elements

  • Lighter/looser parts drag behind

  • Use easing with different curves per element

6. Slow In and Slow Out

Concept: Natural motion accelerates and decelerates.

Implementation:

  • Use ease-in-out for most movements

  • Ease-out for entrances (arrives gently)

  • Ease-in for exits (leaves naturally)

  • Linear only for mechanical motion

Common curve: cubic-bezier(0.42, 0, 0.58, 1)

7. Arc

Concept: Natural movement follows curved paths.

Implementation:

  • Avoid straight-line motion for organic elements

  • Use motion paths or multi-point keyframes

  • Parabolic arcs for thrown objects

  • Pendulum arcs for swings

8. Secondary Action

Concept: Supporting actions reinforce the main action.

Implementation:

  • Add subtle movements that complement primary

  • Examples: hair bounce, shadow movement, particle effects

  • Should not distract from main action

  • Slightly delayed from primary

9. Timing

Concept: Speed conveys weight, mood, and character.

| 50-150ms | Snappy | Micro-interactions

| 150-300ms | Responsive | Button feedback

| 300-500ms | Smooth | Page transitions

| 500-800ms | Deliberate | Modal reveals

| 1000ms+ | Dramatic | Hero animations

10. Exaggeration

Concept: Push beyond realistic to enhance clarity.

Implementation:

  • Scale movements 20-50% beyond subtle

  • Overshoot then settle

  • More exaggeration = more cartoony

  • UI: subtle exaggeration (5-15% overshoot)

11. Solid Drawing

Concept: Maintain volume and weight in 3D space.

Implementation:

  • Consider all three dimensions

  • Maintain consistent perspective

  • Preserve volume during transformations

  • Use shadows to ground elements

12. Appeal

Concept: Make it pleasing and engaging.

Implementation:

  • Smooth curves over sharp angles

  • Consistent timing patterns

  • Clear visual feedback

  • Satisfying interaction responses

  • Balance between predictable and delightful

Universal Timing Reference

Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms

Universal Easing Reference

Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic

Checklist

Before shipping animation:

Does it have easing (not linear)? Is timing appropriate for the action? Does it follow arcs where natural? Is there anticipation for significant actions? Do secondary elements have slight delays? Is the focal point clear? Does it feel satisfying?

← 返回排行榜