creating-reanimated-animations

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

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

バージョンの検出

プロジェクトの package.json を確認して、バージョンを判別します。

• v4（New Architecture のみ）：別の依存関係として react-native-worklets が必要です
• v3（Legacy と New Architecture をサポート）：パッケージを 1 つインストールするだけです

セットアップ

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. Create shared value (lives on UI thread)
  const offset = useSharedValue(0);

  // 2. Bind to style
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  // 3. Trigger animation
  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 }));
// Show: opacity.value = withTiming(1);
// Hide: opacity.value = withTiming(0);

横からスライド

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

押下時に拡大縮小

const scale = useSharedValue(1);
const style = useAnimatedStyle(() => ({
  transform: [{ scale: scale.value }],
}));
// In:  scale.value = withSpring(0.95);
// Out: 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); // auto-tracks scroll position
<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 をお読みください。

共有要素のトランジション（実験的）

ナビゲーション中に、画面間でコンポーネントをアニメーションさせます。

// Screen A
<Animated.Image sharedTransitionTag={`photo-${id}`} source={...} />

// Screen B (same tag)
<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 をご覧ください。

Worklets と高度な API

worklet、'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 を使用してください。

---

Software Mansion による react-native-reanimated をベースにしています（MIT License）