Module 09 — Animation

🎯 Mục tiêu học tập

• Hiểu Animated API cơ bản: timing, spring, interpolation
• Phân biệt Animated API vs Reanimated — khi nào dùng cái nào
• Hiểu useNativeDriver tại sao mượt và limitations
• Build được gesture-driven animations (swipe, drag)

📖 Hướng dẫn học

⚡ Ôn nhanh

🧭 Vòng lặp học module này

📚 Lý thuyết chi tiết

1. Animated API (Built-in)

Animated.Value & Basic Animation

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

const fadeIn = () => {
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }).start();
};

<Animated.View style={{ opacity: fadeAnim }}>
  <Text>Hello</Text>
</Animated.View>

Animation Types

Composed Animations

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

Animated.sequence([
  Animated.timing(a, { toValue: 1, duration: 200, useNativeDriver: true }),
  Animated.timing(b, { toValue: 1, duration: 200, useNativeDriver: true }),
]).start();

Animated.stagger(100, [
  Animated.timing(item1, { toValue: 1, duration: 300, useNativeDriver: true }),
  Animated.timing(item2, { toValue: 1, duration: 300, useNativeDriver: true }),
  Animated.timing(item3, { toValue: 1, duration: 300, useNativeDriver: true }),
]).start();

2. useNativeDriver

3. Interpolation

const rotation = scrollY.interpolate({
  inputRange: [0, 100],
  outputRange: ['0deg', '360deg'],
  extrapolate: 'clamp',
});

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

Extrapolation:

4. Reanimated 2/3

Core Concepts

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
} from 'react-native-reanimated';

const offset = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: offset.value }],
  backgroundColor: interpolateColor(
    offset.value,
    [0, 200],
    ['#6c63ff', '#00d4aa']
  ),
}));

const moveRight = () => {
  offset.value = withSpring(200, { damping: 15 });
};

<Animated.View style={[styles.box, animatedStyle]} />

5. Gesture Handler

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const pan = Gesture.Pan()
  .onStart(() => {
    context.value = { x: offsetX.value, y: offsetY.value };
  })
  .onUpdate((event) => {
    offsetX.value = context.value.x + event.translationX;
    offsetY.value = context.value.y + event.translationY;
  })
  .onEnd(() => {
    offsetX.value = withSpring(0);
    offsetY.value = withSpring(0);
  });

<GestureDetector gesture={pan}>
  <Animated.View style={animatedStyle} />
</GestureDetector>

6. LayoutAnimation

import { LayoutAnimation, UIManager, Platform } from 'react-native';

if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental?.(true);
}

const toggleExpand = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  setExpanded(!expanded);
};

Khi nào dùng: Simple expand/collapse, add/remove items. Không dùng cho complex gesture animations.

7. Lottie

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animations/loading.json')}
  autoPlay
  loop
  style={{ width: 200, height: 200 }}
/>

Use cases: Loading indicators, success checkmarks, onboarding illustrations, empty states. Tìm animations tại lottiefiles.com.

8. Common Patterns

Bottom Sheet

Dùng @gorhom/bottom-sheet — dựa trên Reanimated + Gesture Handler. Snap points, backdrop, keyboard handling built-in.

Skeleton/Shimmer Loading

Animated gradient placeholder khi data loading. Libraries: react-native-skeleton-placeholder, rn-placeholder. Hoặc tự build với Reanimated + LinearGradient.

Shared Element Transitions

Smooth transition giữa screens sharing cùng element (ảnh, card). Dùng react-native-shared-element hoặc Reanimated 3 shared transitions.

9. Ví dụ thực tế: Swipe row action

const translateX = useSharedValue(0);

const pan = Gesture.Pan()
  .activeOffsetX([-10, 10])
  .failOffsetY([-8, 8])
  .onUpdate((event) => {
    translateX.value = Math.max(-96, Math.min(0, event.translationX));
  })
  .onEnd(() => {
    translateX.value = withSpring(translateX.value < -48 ? -96 : 0);
  });

const rowStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: translateX.value }],
}));

Điểm cần nhớ: activeOffsetX và failOffsetY giúp swipe ngang không tranh gesture với scroll dọc của FlatList.

❓ Câu hỏi phỏng vấn + Đáp án

🏋️ Bài tập

⚠️ Lỗi thường gặp

🏢 Case đi làm thật

🧠 Ghi nhớ nhanh

❔ Câu hỏi tự kiểm tra

✅ Checklist tự đánh giá

📎 Tài nguyên