React Native Reanimated コードジェネレーター

React Native Reanimated を使用してパフォーマンスの高いアニメーションコードを生成します。v3 と v4 の両方をサポートしています。

バージョン検出

プロジェクトの package.json をチェックしてバージョンを確認します:

• v4 (New Architecture のみ): react-native-worklets を別の依存関係として必要
• v3 (Legacy と New Architecture をサポート): 単一パッケージのインストール

セットアップ

Reanimated v4 (最新)

npm install react-native-reanimated react-native-worklets

Babel プラグイン: 'react-native-worklets/plugin' (プラグインリストの最後である必要があります)。 Expo の場合: Babel 設定は不要です。インストール後に npx expo prebuild を実行してください。

Reanimated v3

npm install react-native-reanimated

Babel プラグイン: 'react-native-reanimated/plugin' (プラグインリストの最後である必要があります)。

コアパターン

すべてのアニメーションは 3 つのステップに従います:

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

function Component() {
  // 1. 共有値を作成 (UI スレッド上に存在)
  const offset = useSharedValue(0);

  // 2. スタイルにバインド
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  // 3. アニメーションをトリガー
  const handlePress = () => {
    offset.value = withTiming(200, { duration: 500 });
  };

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

アニメーション選択

ユーザーの要望	関数	主なパラメータ
スムーズな固定期間のトランジション	withTiming(to, {duration, easing})	デフォルト: 300ms、Easing.inOut(Easing.quad)
自然なバウンス感	withSpring(to, {mass, damping, stiffness})	デフォルト: mass=1、damping=10、stiffness=100
フリング後の勢い	withDecay({velocity, clamp})	ジェスチャーからの初速度が必要
スプリング範囲のクランプ	withClamp({min, max}, withSpring(to))	v4: スプリングのオーバーシュートを制限
ループ/パルス/シェイク	withRepeat(anim, reps, reverse)	reps=0 で無限ループ (v4)、reps=-1 (v3)
複数ステップの振付	withSequence(anim1, anim2, ...)	順番に実行
遅延開始	withDelay(ms, anim)	任意のアニメーションを遅延

スプリングの調整: damping を低く (5–8) = よりバウンス、stiffness を高く (150–200) = スナップ感が強い、mass を高く (2–3) = より重い。

クイックパターン

フェード

const opacity = useSharedValue(0);
const style = useAnimatedStyle(() => ({ opacity: opacity.value }));
// 表示: opacity.value = withTiming(1);
// 非表示: opacity.value = withTiming(0);

側面からのスライド

const translateX = useSharedValue(-SCREEN_WIDTH);
const style = useAnimatedStyle(() => ({
  transform: [{ translateX: translateX.value }],
}));
// エンター: translateX.value = withSpring(0);

押下時のスケール

const scale = useSharedValue(1);
const style = useAnimatedStyle(() => ({
  transform: [{ scale: scale.value }],
}));
// イン:  scale.value = withSpring(0.95);
// アウト: scale.value = withSpring(1);

インターポレーション

import { interpolate, Extrapolation } from 'react-native-reanimated';

const style = useAnimatedStyle(() => ({
  opacity: interpolate(scrollY.value, [0, 100], [1, 0], Extrapolation.CLAMP),
  transform: [{
    scale: interpolate(scrollY.value, [0, 100], [1, 0.8], Extrapolation.CLAMP),
  }],
}));

スクロール連動アニメーション

const scrollY = useSharedValue(0);
const scrollHandler = useAnimatedScrollHandler({
  onScroll: (event) => { scrollY.value = event.contentOffset.y; },
});
<Animated.ScrollView onScroll={scrollHandler}>{children}</Animated.ScrollView>

または useScrollOffset (v4) / useScrollViewOffset (v3) でシンプルに:

const ref = useAnimatedRef<Animated.ScrollView>();
const scrollOffset = useScrollOffset(ref); // 自動的にスクロール位置を追跡
<Animated.ScrollView ref={ref}>{children}</Animated.ScrollView>

レイアウトアニメーション (マウント/アンマウント)

組み込みプリセット — 共有値は不要です:

import Animated, { FadeIn, SlideInRight, SlideOutLeft } from 'react-native-reanimated';

<Animated.View entering={FadeIn.duration(400).delay(100)} exiting={SlideOutLeft.duration(300)}>
  {content}
</Animated.View>

プリセット: FadeIn/Out、SlideIn/OutLeft/Right/Up/Down、ZoomIn/Out、BounceIn/Out、FlipInEasyX/Y、LightSpeedIn/Out、PinwheelIn/Out、RollIn/Out、RotateIn/Out、StretchIn/Out。

モディファイアー: .duration(ms)、.delay(ms)、.springify()、.damping(n)、.stiffness(n)、.randomDelay()、.reduceMotion()、.withCallback()。

レイアウトトランジション (位置/サイズの変更)

コンポーネントの位置またはサイズが変更されたときにアニメーション化します:

import { LinearTransition, SequencedTransition } from 'react-native-reanimated';

<Animated.View layout={LinearTransition.springify().damping(15)} />

トランジション: LinearTransition、SequencedTransition、FadingTransition、JumpingTransition、CurvedTransition、EntryExitTransition。

キーフレームアニメーション (複雑なエンター/エキジット)

import { Keyframe } from 'react-native-reanimated';

const enteringAnimation = new Keyframe({
  0: { opacity: 0, transform: [{ translateY: -50 }] },
  50: { opacity: 0.5, transform: [{ translateY: -25 }], easing: Easing.out(Easing.quad) },
  100: { opacity: 1, transform: [{ translateY: 0 }] },
}).duration(500);

<Animated.View entering={enteringAnimation}>{content}</Animated.View>

カスタムアニメーション、レイアウトトランジション、リストアニメーションについては、references/layout-animations.md を参照してください。

CSS アニメーション (v4 のみ)

スタイルプロップを直接使用した宣言的な CSS ライクアニメーション:

<Animated.View style={{
  animationName: {
    from: { opacity: 0, transform: [{ translateY: -20 }] },
    to: { opacity: 1, transform: [{ translateY: 0 }] },
  },
  animationDuration: '500ms',
  animationTimingFunction: 'ease-out',
}} />

サポートプロップ: animationName、animationDuration、animationDelay、animationIterationCount、animationDirection、animationFillMode、animationPlayState、animationTimingFunction。

CSS トランジション (v4 のみ)

スタイル値が変更されたときの自動トランジション:

<Animated.View style={{
  width: isExpanded ? 200 : 100,
  transitionProperty: 'width',
  transitionDuration: '300ms',
  transitionTimingFunction: 'ease-in-out',
}} />

複数プロパティ: transitionProperty: ['width', 'opacity', 'transform'] と対応する transitionDuration: ['300ms', '200ms', '500ms']。

CSS アニメーション/トランジションの詳細リファレンス (キーフレーム、タイミング関数、例) については、references/css-animations-detailed.md を参照してください。

共有要素トランジション (実験的)

ナビゲーション中に画面間でコンポーネントをアニメーション化します:

// スクリーン A
<Animated.Image sharedTransitionTag={`photo-${id}`} source={...} />

// スクリーン B (同じタグ)
<Animated.Image sharedTransitionTag={`photo-${id}`} source={...} />

@react-navigation/native-stack とフィーチャーフラグが必要です。セットアップとカスタマイズについては、references/shared-element-transitions.md を参照してください。

ジェスチャー統合

ドラッグ、ピンチ、フリング、および他のジェスチャー駆動アニメーションについては、references/gesture-patterns.md を参照してください。

必須: react-native-gesture-handler + アプリルートでの <GestureHandlerRootView>。

完全な API リファレンス

フック署名、アニメーションパラメータ、v3↔v4 の違い、高度な API の完全な説明については、references/api-reference.md を参照してください。

ワークレット & 高度な API

ワークレット、'worklet' ディレクティブ、runOnJS/runOnUI、useAnimatedReaction、useFrameCallback、measure、dispatchCommand、パフォーマンスのコツの理解については、references/worklets-advanced.md を参照してください。

実世界のコンポーネントパターン

アコーディオン、ボトムシート、フリップカード、FAB の完全な実装については、references/component-patterns.md を参照してください。

テスト、色、サポートプロパティ

Jest を使用したアニメーションのテスト、interpolateColor を使用した色アニメーション、プラットフォーム別のアニメーション可能なプロパティの完全なリストについては、references/testing-and-properties.md を参照してください。

ルール

• 常に Animated.View/Text/Image/ScrollView/FlatList を使用します — プレーンな RN コンポーネントをアニメーション化しないでください
• v4: runOnJS/runOnUI を使用 (再エクスポート)、または react-native-worklets から scheduleOnRN/scheduleOnUI をインポート
• v3: 重い JS スレッドロジックには runOnJS(fn)() を使用
• interpolate で常に Extrapolation.CLAMP を使用します — 明示的にエクストラポレーションが必要な場合を除く
• 結合: withSequence(withTiming(1.2, {duration: 100}), withSpring(1))
• useReducedMotion() を使用してアクセシビリティ設定を尊重
• 実デバイスでテストします — シミュレーターのパフォーマンスは大きく異なります
• v4: useAnimatedKeyboard は廃止 → react-native-keyboard-controller を使用

---

react-native-reanimated by Software Mansion (MIT License) に基づく