react-native-animations

React Native アニメーションスキル

Reanimated 3、Gesture Handler、レイアウトアニメーションを使った高パフォーマンスなアニメーションを学びます。

前提条件

• React Native の基礎知識
• JavaScript のクロージャの理解
• トランスフォームとスタイルに関する知識

学習目標

このスキルを完了すると、次のことができるようになります。

• Reanimated で滑らかな 60fps のアニメーションを作成する
• Gesture Handler で複雑なジェスチャーを処理する
• レイアウトの入場・退場アニメーションを実装する
• パフォーマンスを考慮してアニメーションを最適化する
• ジェスチャーとアニメーションを組み合わせる

---

対象トピック

1. インストール

npm install react-native-reanimated react-native-gesture-handler

# babel.config.js
module.exports = {
  plugins: ['react-native-reanimated/plugin'],
};

2. Reanimated の基礎

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

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

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

  const handlePress = () => {
    scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
  };

  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </Pressable>
  );
}

3. Gesture Handler

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

function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onUpdate((e) => {
      translateX.value = e.translationX;
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

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

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

4. レイアウトアニメーション

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

function AnimatedList({ items }) {
  return (
    <Animated.View layout={Layout.springify()}>
      {items.map((item) => (
        <Animated.View
          key={item.id}
          entering={FadeIn}
          exiting={FadeOut}
          layout={Layout.springify()}
        >
          <Text>{item.title}</Text>
        </Animated.View>
      ))}
    </Animated.View>
  );
}

5. アニメーションのタイミング

関数	用途
withTiming	線形で、時間を制御できるアニメーション
withSpring	自然な、物理ベースのアニメーション
withDecay	運動量ベースのアニメーション（フリング）
withSequence	複数のアニメーションを順番に実行
withRepeat	アニメーションをループ

---

クイックスタートの例

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

function SwipeCard() {
  const translateX = useSharedValue(0);

  const gesture = Gesture.Pan()
    .onUpdate((e) => { translateX.value = e.translationX; })
    .onEnd(() => { translateX.value = withSpring(0); });

  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { rotate: `${interpolate(translateX.value, [-200, 200], [-15, 15])}deg` },
    ],
  }));

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.card, style]} />
    </GestureDetector>
  );
}

---

よくあるエラーと解決策

エラー	原因	解決策
"Attempted to call from worklet"	runOnJS がありません	runOnJS() でラップします
アニメーションが実行されない	'worklet' がありません	'worklet' ディレクティブを追加します
ジェスチャーが機能しない	ルートビューがありません	GestureHandlerRootView を追加します

---

検証チェックリスト

• アニメーションが 60fps で動作する
• ジェスチャーがスムーズに反応する
• 低価格帯のデバイスでもフレーム落ちがない
• レイアウトアニメーションでカクつきが発生しない

---

使い方

Skill("react-native-animations")

連携エージェント: 05-react-native-animation