Animation Patterns

🎬 React Native Animation Patterns

The Magic of Making Things Move

Imagine you’re a puppet master. Your strings can make puppets slide, fade, grow, and dance. In React Native, animation patterns are your invisible strings. You pull them, and your app’s elements come alive!

🎯 What We’ll Learn

Think of these as different dance moves for your app:

1. Transform Animations – Moving & rotating things
2. Opacity Animations – Fading in & out
3. Scale Animations – Growing & shrinking
4. Easing Functions – Making movement feel natural
5. Common Animation Patterns – Popular dance combos
6. Loading Animations – Keeping users entertained while waiting

1️⃣ Transform Animations

The Moving Truck Analogy 🚚

A transform is like telling a moving truck where to go. You can say:

• “Go left 50 steps” (translateX)
• “Go up 30 steps” (translateY)
• “Spin around!” (rotate)

// Move right by 100 pixels
transform: [
  { translateX: 100 }
]

Types of Transforms

Simple Code Example

// Create animated value
const slideAnim = useRef(
  new Animated.Value(0)
).current;

// Animate it!
Animated.timing(slideAnim, {
  toValue: 100,
  duration: 500,
  useNativeDriver: true,
}).start();

// Use in style
<Animated.View style={{
  transform: [
    { translateX: slideAnim }
  ]
}} />

Key Point: useNativeDriver: true makes animations super smooth because the phone’s graphics chip does the work!

2️⃣ Opacity Animations

The Light Dimmer Analogy 💡

Opacity is like a dimmer switch for lights:

• opacity: 1 = Lights fully ON (100% visible)
• opacity: 0 = Lights OFF (invisible)
• opacity: 0.5 = Half bright (50% transparent)

graph TD
    A["opacity: 0"] --> B["Invisible"]
    C["opacity: 0.5"] --> D["Half visible"]
    E["opacity: 1"] --> F["Fully visible"]

Fade In Example

const fadeAnim = useRef(
  new Animated.Value(0)
).current;

// Fade from invisible to visible
Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true,
}).start();

<Animated.View style={{
  opacity: fadeAnim
}}>
  <Text>I appear slowly!</Text>
</Animated.View>

When to Use Opacity

• ✅ Fade in new content
• ✅ Fade out deleted items
• ✅ Cross-fade between images
• ✅ Show/hide modals & popups

3️⃣ Scale Animations

The Balloon Analogy 🎈

Scaling is like blowing up a balloon:

• scale: 0 = No balloon (invisible)
• scale: 1 = Normal size
• scale: 2 = Twice as big!
• scale: 0.5 = Half the size

Growing Button Example

const scaleAnim = useRef(
  new Animated.Value(1)
).current;

// Make it grow when pressed
const onPressIn = () => {
  Animated.spring(scaleAnim, {
    toValue: 1.2,
    useNativeDriver: true,
  }).start();
};

// Return to normal
const onPressOut = () => {
  Animated.spring(scaleAnim, {
    toValue: 1,
    useNativeDriver: true,
  }).start();
};

<Animated.View style={{
  transform: [{ scale: scaleAnim }]
}}>
  <TouchableOpacity
    onPressIn={onPressIn}
    onPressOut={onPressOut}
  >
    <Text>Press Me!</Text>
  </TouchableOpacity>
</Animated.View>

Scale Types

4️⃣ Easing Functions

The Skateboard Ramp Analogy 🛹

Imagine a skateboarder:

• Linear: Same speed the whole way (boring! 😴)
• Ease-in: Starts slow, speeds up (going down a ramp)
• Ease-out: Starts fast, slows down (going up a ramp)
• Ease-in-out: Slow → Fast → Slow (smooth ride!)

graph TD
    A["🏁 Start"] --> B{Easing Type?}
    B --> C["Linear: ───────"]
    B --> D["Ease-In: ╱"]
    B --> E["Ease-Out: ╲"]
    B --> F["Ease-In-Out: ∿"]

Using Easing

import { Easing } from 'react-native';

// Bouncy like a ball!
Animated.timing(anim, {
  toValue: 1,
  duration: 500,
  easing: Easing.bounce,
  useNativeDriver: true,
}).start();

Common Easing Functions

Pro Tip 💡

// Combine easings!
Easing.bezier(0.25, 0.1, 0.25, 1)

// Custom curve - like designing
// your own skateboard ramp!

5️⃣ Common Animation Patterns

The Dance Move Library 💃

Just like dancers have standard moves, apps have common animation patterns:

Pattern 1: Fade + Slide (The Entrance)

// Slide up while fading in
const fadeAnim = useRef(
  new Animated.Value(0)
).current;
const slideAnim = useRef(
  new Animated.Value(50)
).current;

Animated.parallel([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 300,
    useNativeDriver: true,
  }),
  Animated.timing(slideAnim, {
    toValue: 0,
    duration: 300,
    useNativeDriver: true,
  }),
]).start();

<Animated.View style={{
  opacity: fadeAnim,
  transform: [{ translateY: slideAnim }]
}} />

Pattern 2: Spring Button

// Bouncy button press
Animated.spring(scaleAnim, {
  toValue: 0.95,
  friction: 3,
  tension: 100,
  useNativeDriver: true,
}).start();

Pattern 3: Staggered List

// Items appear one after another
const animations = items.map(
  (_, i) => Animated.timing(
    anims[i], {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }
  )
);

Animated.stagger(100, animations)
  .start();

Animation Composition

graph TD
    A["parallel"] --> B["All at once"]
    C["sequence"] --> D["One after another"]
    E["stagger"] --> F["Delayed starts"]

6️⃣ Loading Animations

The Entertainment While Waiting Analogy 🎪

Loading animations are like circus performers entertaining the crowd while the main show prepares!

Spinning Loader

const spinAnim = useRef(
  new Animated.Value(0)
).current;

// Spin forever!
Animated.loop(
  Animated.timing(spinAnim, {
    toValue: 1,
    duration: 1000,
    easing: Easing.linear,
    useNativeDriver: true,
  })
).start();

const spin = spinAnim.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
});

<Animated.View style={{
  transform: [{ rotate: spin }]
}}>
  <LoadingIcon />
</Animated.View>

Pulsing Dot

const pulseAnim = useRef(
  new Animated.Value(1)
).current;

Animated.loop(
  Animated.sequence([
    Animated.timing(pulseAnim, {
      toValue: 1.3,
      duration: 500,
      useNativeDriver: true,
    }),
    Animated.timing(pulseAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }),
  ])
).start();

Three Bouncing Dots

// Each dot bounces with delay
const dots = [0, 1, 2].map(() =>
  useRef(new Animated.Value(0)).current
);

const bounce = (anim, delay) => {
  Animated.loop(
    Animated.sequence([
      Animated.delay(delay),
      Animated.timing(anim, {
        toValue: -10,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(anim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
    ])
  ).start();
};

// Start each with staggered delay
dots.forEach((anim, i) =>
  bounce(anim, i * 150)
);

Popular Loading Patterns

🎯 Quick Reference

graph TD
    A["Animation Type"] --> B["Transform"]
    A --> C["Opacity"]
    A --> D["Scale"]

    B --> E["translateX/Y"]
    B --> F["rotate"]

    C --> G["0 to 1"]

    D --> H["scale"]
    D --> I["scaleX/Y"]

🚀 Key Takeaways

1. Transform = Moving & rotating (like a truck)
2. Opacity = Fading (like a dimmer)
3. Scale = Growing & shrinking (like a balloon)
4. Easing = Making movement feel natural (like a skateboard ramp)
5. Patterns = Combined moves (like dance choreography)
6. Loading = Entertainment while waiting (like a circus act)

Remember: Always use useNativeDriver: true for smooth 60fps animations!

You’ve learned the puppet master’s secrets! Now go make your apps dance! 🎭