react-native-reanimated

React Native Reanimated

概要

React Native 向けの UI スレッドアニメーションライブラリです。Reanimated 4.x はネイティブ UI スレッドでアニメーションを実行し、60fps のパフォーマンスを保証するため、モバイルアプリケーションでは Framer Motion に代わる選択肢となります。共有値、アニメーションスタイル、宣言的な入場／退場トランジション、ジェスチャーとの連携を提供します。

インストール：pnpm add react-native-reanimated（Expo SDK 54+ に含まれています）

ワークフロー

画面にアニメーションを追加する場合：

1. react-native-reanimated からインポートします：Animated、useSharedValue、useAnimatedStyle、withTiming
2. アニメーションさせるプロパティの共有値を作成します
3. useAnimatedStyle を使用してアニメーションスタイルを定義します
4. Animated.View、Animated.Text などに適用します
5. useReducedMotion() を確認し、true の場合はアニメーションをスキップします
6. デバイスでテストし、60fps で滑らかに動作することを確認します

入場／退場トランジションを追加する場合：

1. レイアウトアニメーションをインポートします：FadeInDown、FadeOutUp、SlideInRight など
2. Animated.View に entering と exiting プロパティを適用します
3. 修飾子を連結します：.duration(300).easing(...).delay(100)
4. 視覚効果を抑える設定への対応を確認します

ガイダンス

基本プリミティブ

• useSharedValue(initialValue)：UI スレッド上に存在する可変値です
• useAnimatedStyle(() => ({...}))：共有値からスタイルオブジェクトを導出します
• withTiming(toValue, config)：時間ベースのアニメーションです
• withSpring(toValue, config)：物理法則に基づくスプリングアニメーションです
• withDelay(ms, animation)：アニメーション開始前に遅延させます
• withSequence(...animations)：アニメーションを順番に実行します
• withRepeat(animation, count, reverse)：アニメーションを繰り返します

標準タイミング設定

demo-development.md の時間設定に準拠します。

種類	時間	用途
速い	150ms	マイクロインタラクション、触覚フィードバック
通常	300ms	デフォルトのトランジション、入場
遅い	500ms	強調、画面遷移
スタガー間隔	項目ごとに50ms	リスト項目の段階的な表示

イージング：入場には Easing.out(Easing.cubic)、トランジションには Easing.inOut(Easing.cubic)、退場には Easing.in(Easing.cubic) を使用します。

宣言的な入場／退場

Animated.View に直接適用します。AnimatePresence と異なり、親のラッパーは必要ありません。

• 入場：FadeIn、FadeInDown、FadeInUp、SlideInRight、ZoomIn
• 退場：FadeOut、FadeOutUp、FadeOutDown、SlideOutLeft、ZoomOut
• 修飾子の連結：.duration(300)、.delay(100)、.easing(Easing.out(Easing.cubic))
• スプリング：.springify().damping(15).stiffness(150)

スタガーパターン

withDelay にインデックスを掛けて使用します。

entering={FadeInDown.delay(index * 50).duration(300)}

命令型アニメーションの場合：

offset.value = withDelay(index * 50, withTiming(1, { duration: 300 }))

アクセシビリティ — 視覚効果を抑える設定

ユーザーのアクセシビリティ設定を必ず尊重してください。

const reducedMotion = useReducedMotion();

reducedMotion が true の場合：

• すべてのアニメーションをスキップします（値を即座に設定します）
• duration(0) を使用するか、入場／退場プロパティを適用しません
• コンテンツは表示します。アニメーションさせないだけです

アニメーションコンポーネント

Animated.View、Animated.Text、Animated.ScrollView などを使用します。または、アニメーション対応のコンポーネントを作成します。

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

パフォーマンス

• transform と opacity のみをアニメーションさせます — これらは UI スレッドで実行されます
• width、height、margin、padding のアニメーションは避けてください（レイアウトの再計算が発生します）
• 共有値は JS ブリッジのオーバーヘッドなしで UI スレッド上で更新されます
• useAnimatedStyle のワークレットは UI スレッドで実行されるため、純粋な処理に保ってください
• リストでは、コンテナーをアニメーションさせるのではなく、項目に entering／exiting を適用します

ベストプラクティス

• マウント／アンマウント時のアニメーションには宣言的なentering／exitingを使用します。手動で共有値を扱うよりシンプルです。
• 自然な操作感が求められる操作（ドラッグ、ジェスチャー）には、withSpringを優先します。
• UIのトランジション（画面の表示、フェードイン）には、withTimingを優先します。
• アニメーションを適用する前に、必ずuseReducedMotion()を確認します。
• 標準的な再生時間は150ms／300ms／500msに統一します。
• リスト項目を順番に表示するには、withDelay(index * 50, ...)を使用します。
• ジェスチャーによるアニメーションには、react-native-gesture-handlerを組み合わせます。
• 表示時のデフォルトのイージングには、Easing.out(Easing.cubic)を使用します。

アンチパターン

• Reanimatedではなく、React Native組み込みのAnimated APIを使用する
• レイアウトプロパティ（width、height、margin）をアニメーションさせる。代わりにtransformとopacityを使用します。
• useReducedMotion()によるアクセシビリティチェックを忘れる
• useAnimatedStyleのワークレット内で、JSスレッドに負荷のかかるロジックを実行する
• 再生時間の値をハードコードする（定数を使用します：150／300／500ms）
• 不必要にアニメーションビューを何重にもネストする（パフォーマンスのオーバーヘッドが発生します）
• 順次表示にwithDelayではなくsetTimeoutを使用する
• 実機でテストせずに表示時のアニメーションを適用する