React Nativeアニメーション完全ガイド｜Animated・Reanimated・Skiaの使い分けと実装例

import { useRef, useEffect } from 'react';
import { Animated, View, StyleSheet } from 'react-native';

function FadeInBox() {
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 800,
      useNativeDriver: true,
    }).start();
  }, [opacity]);

  return (
    <Animated.View style={[styles.box, { opacity }]}>
      <View />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#3b82f6',
    borderRadius: 8,
  },
});

// 順番に実行
Animated.sequence([
  Animated.timing(scaleValue, { toValue: 1.2, duration: 200, useNativeDriver: true }),
  Animated.timing(scaleValue, { toValue: 1.0, duration: 200, useNativeDriver: true }),
]).start();

// 同時に実行
Animated.parallel([
  Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }),
  Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
]).start();

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

const backgroundColor = opacity.interpolate({
  inputRange: [0, 0.5, 1],
  outputRange: ['#ef4444', '#eab308', '#22c55e'],
});

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

function ScaleButton() {
  const scale = useSharedValue(1);

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

  const handlePressIn = () => {
    scale.value = withTiming(0.95, { duration: 100 });
  };

  const handlePressOut = () => {
    scale.value = withTiming(1, { duration: 100 });
  };

  return (
    <Animated.View style={[styles.button, animatedStyle]}>
      <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
        <Text>タップ</Text>
      </Pressable>
    </Animated.View>
  );
}

// バネアニメーション
scale.value = withSpring(1.2, {
  damping: 10,
  stiffness: 100,
});

// 繰り返しアニメーション
rotation.value = withRepeat(
  withTiming(360, { duration: 2000, easing: Easing.linear }),
  -1, // 無限ループ
  false
);

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function DraggableCard() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const savedX = useSharedValue(0);
  const savedY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onStart(() => {
      savedX.value = translateX.value;
      savedY.value = translateY.value;
    })
    .onUpdate((event) => {
      translateX.value = savedX.value + event.translationX;
      translateY.value = savedY.value + event.translationY;
    })
    .onEnd(() => {
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

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

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.card, animatedStyle]}>
        <Text>ドラッグできるカード</Text>
      </Animated.View>
    </GestureDetector>
  );
}

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useAnimatedScrollHandler,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';

function CollapsibleHeader() {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => ({
    height: interpolate(
      scrollY.value,
      [0, 150],
      [200, 60],
      Extrapolation.CLAMP
    ),
    opacity: interpolate(
      scrollY.value,
      [0, 100],
      [1, 0.8],
      Extrapolation.CLAMP
    ),
  }));

  return (
    <View style={{ flex: 1 }}>
      <Animated.View style={[styles.header, headerStyle]}>
        <Text>ヘッダー</Text>
      </Animated.View>
      <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16}>
        {/* コンテンツ */}
      </Animated.ScrollView>
    </View>
  );
}

import { Canvas, Circle, Path, Skia } from '@shopify/react-native-skia';
import { useSharedValue, withTiming } from 'react-native-reanimated';

function CircularProgress({ progress }: { progress: number }) {
  const animatedProgress = useSharedValue(0);

  useEffect(() => {
    animatedProgress.value = withTiming(progress, { duration: 1000 });
  }, [progress]);

  const radius = 80;
  const strokeWidth = 10;
  const center = radius + strokeWidth;
  const size = center * 2;

  return (
    <Canvas style={{ width: size, height: size }}>
      {/* 背景の円 */}
      <Circle
        cx={center}
        cy={center}
        r={radius}
        color="#e5e7eb"
        style="stroke"
        strokeWidth={strokeWidth}
      />
      {/* プログレスの円弧 */}
      <Circle
        cx={center}
        cy={center}
        r={radius}
        color="#3b82f6"
        style="stroke"
        strokeWidth={strokeWidth}
        strokeCap="round"
        start={0}
        end={animatedProgress}
      />
    </Canvas>
  );
}

import LottieView from 'lottie-react-native';

function SuccessAnimation() {
  return (
    <LottieView
      source={require('./assets/success.json')}
      autoPlay
      loop={false}
      style={{ width: 200, height: 200 }}
    />
  );
}

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

// Android では事前に有効化が必要
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental?.(true);
}

function ExpandableList() {
  const [expanded, setExpanded] = useState(false);

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

  return (
    <View>
      <Pressable onPress={toggleExpand}>
        <Text>タップして展開</Text>
      </Pressable>
      {expanded && (
        <View style={{ height: 200, backgroundColor: '#dbeafe' }}>
          <Text>展開されたコンテンツ</Text>
        </View>
      )}
    </View>
  );
}

import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';

function AnimatedList({ items }: { items: string[] }) {
  return (
    <View>
      {items.map((item, index) => (
        <Animated.View
          key={item}
          entering={FadeIn.delay(index * 100)}
          exiting={FadeOut}
          layout={Layout.springify()}
          style={styles.listItem}
        >
          <Text>{item}</Text>
        </Animated.View>
      ))}
    </View>
  );
}

const AnimatedItem = React.memo(({ item }: { item: ItemType }) => {
  const animatedStyle = useAnimatedStyle(() => ({
    // スタイル定義
  }));

  return (
    <Animated.View style={animatedStyle}>
      <Text>{item.name}</Text>
    </Animated.View>
  );
});

# react-native-reanimated
npx expo install react-native-reanimated

# Gesture Handler
npx expo install react-native-gesture-handler

# React Native Skia
npx expo install @shopify/react-native-skia

# Lottie
npx expo install lottie-react-native

# react-native-reanimated
npm install react-native-reanimated

# babel.config.js にプラグイン追加（配列の末尾に記載）
# plugins: ['react-native-worklets/plugin']

# Gesture Handler
npm install react-native-gesture-handler

# iOS のネイティブ依存をインストール
cd ios && pod install && cd ..

// NG: 通常関数をワークレット内で呼ぶ
const format = (v: number) => `${v}px`;
const style = useAnimatedStyle(() => ({
  width: format(width.value), // エラー
}));

// OK: ワークレット内で完結させる
const style = useAnimatedStyle(() => ({
  width: width.value,
}));