react-native-reanimated

React Native ReanimatedライブラリはAnimatedライブラリAPIを拡張し、ジェスチャーベースのインタラクションを使用する際の柔軟性を高めます。 Reanimatedを使用すると、UIスレッド（英語のみ）で動作するスムーズなアニメーションや対話操作を簡単に作成できます。

テクニカルドキュメント

このライブラリとAPIの詳細については、Software Mansionの公式ドキュメントのhttps://docs.swmansion.com/react-native-reanimated/（英語のみ）を参照してください。

インストール

該当するReact Nativeバージョンのタブを選択してください。RN 0.83では、追加の依存関係として@amazon-devices/react-native-workletsが必要であることに注意してください。これにより、コアのマルチスレッドインフラストラクチャが提供され、ワークレットが使用可能になります。ワークレットとは、別のスレッド（UIスレッドなど）で実行できるJavaScript関数です。ワークレットは、JavaScriptスレッドをブロックすることなく、Reanimatedでスムーズにアニメーションと対話操作を実行するための基盤となります。

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

React Native 0.72
React Native 0.83

"dependencies": {
      ...
      "@amazon-devices/react-native-reanimated": "~2.0.0",
}

"dependencies": {
      ...
      "@amazon-devices/react-native-worklets": "~1.0.0",
      "@amazon-devices/react-native-reanimated": "~4.0.0",
}

babel.config.jsにReanimated Babelプラグインを追加します。

 module.exports = {
   plugins: [
     ...
     '@amazon-devices/react-native-worklets/plugin',
   ],
 };

Metroバンドラーのキャッシュをクリアするには、次のコマンドを実行します。
npm start --reset-cache
npm installコマンドを実行して、package-lock.jsonファイルを再インストールします。

詳細およびコンテキストについては、Software MansionのドキュメントのInstallation（英語のみ）を参照してください。

例

次の例は、withTimingメソッドを使用して、単純なアニメーションを無限ループで実行する方法を示しています。

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

export function App() {
  const offset = useSharedValue(200);

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

  React.useEffect(() => {
    offset.value = withRepeat(
      withTiming(-offset.value, { duration: 1500 }),
      -1,
      true
    );
  }, []);

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

次の例は、withSpring関数を使用して、ばねに基づくアニメーションを実行する方法を示しています。

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

const initialOffset = 200;

export function App() {
  const offset = useSharedValue(initialOffset);

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

  React.useEffect(() => {
    offset.value = withRepeat(withSpring(-offset.value), -1, true);
  }, []);

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

APIサポート

VegaのReanimatedライブラリは、以下の一覧に記載されているメソッドのほとんどをサポートするターボモジュールを提供します。

アニメーション

メソッド	説明
`withTiming`	再生時間とイージングに基づくアニメーションを作成します。
`withSpring`	ばねに基づくアニメーションを作成します。
`withDecay`	摩擦を受けて動くオブジェクトを模倣するアニメーションを作成します。アニメーションは指定された速度で開始され、指定された減速率に従って徐々に減速して停止します。
`withSequence`	複数のアニメーションを順番に実行するアニメーションモディファイアーです。
`withRepeat`	アニメーションを指定回数または無限に繰り返すアニメーションモディファイアーです。
`withDelay`	アニメーションを遅延して開始するアニメーションモディファイアーです。
`withClamp`	アニメーションが動く範囲を制限して、あらかじめ定義された範囲内にとどめるアニメーションモディファイアーです。

コア

メソッド	説明
`useSharedValue`	コンポーネントの共有値を定義します。
`useAnimatedStyle`	`StyleSheet`スタイルに似た、アニメーション化できるスタイルオブジェクトを作成します。
`useAnimatedProps`	共有値を使用してアニメーション化できる、アニメーション化されたプロパティオブジェクトを作成します。
`useAnimatedRef`	ビューの参照を取得します。`scrollTo`、`useScrollViewOffset`の各関数と共に使用されます。
`useDerivedValue`	既存の共有値に基づいて新しい共有値を作成します。既存の共有値はリアクティブな状態に保たれます。
`createAnimatedComponent`	任意のReact Nativeコンポーネントのアニメーションバージョンを作成します。コンポーネントを`createAnimatedComponent`でラップすると、そのコンポーネントに関連付けられているプロパティやスタイルをReanimatedでアニメーション化できます。
`cancelAnimation`	共有値とペアになっている実行中のアニメーションをキャンセルします。

スクロール

メソッド	説明
`scrollTo`	スクロールビューのアニメーション化された参照を使用して、UIスレッドで指定のオフセットまで同期的にスクロールします。これにより、遅延のないスムーズなスクロールを実行できます。
`useScrollViewOffset`	`ScrollView`のオフセットに基づいてアニメーションを作成します。このフックは、`ScrollView`が水平方向か垂直方向かを自動的に検出します。
`useAnimatedScrollHandler`	React Nativeのスクロール可能なコンポーネントで使用できるイベントハンドラーの参照を返す便利なフックです。

デバイス

メソッド	説明
`useAnimatedSensor`	デバイスのセンサー（加速度計、ジャイロスコープ、重力センサー、磁場センサー、回転センサー）からのデータに基づいてアニメーションを作成します。
`useReducedMotion`	リダクションモーションシステム設定を問い合わせます。

スレッド

メソッド	説明
`runOnJS`	UIスレッドでは実行できない非workletized関数を非同期で実行します。
`runOnUI`	UIスレッドでワークレット化された関数を非同期的に実行します。
`createWorkletRuntime`	新しいJSランタイムを作成して、おそらくJSまたはUIスレッドとは異なるスレッドでワークレットを実行します。

ワークレット化

ワークレット化とは、JavaScript関数を、UIスレッドでコピーして実行できるシリアル化可能なオブジェクトに変換することです。関数には「ワークレット」というマークが付いています。ディレクティブはReanimatedBabelプラグインによって自動的に選択され、ワークレット化されます。

ユーティリティ

メソッド	説明
`interpolate`	線形補間を使用して、ある範囲の値を別の範囲にマッピングします。
`clamp`	値を指定された範囲内に制限します。
`interpolateColor`	線形補間を使用して、入力範囲を出力カラーにマップします。
`getRelativeCoords`	指定されたビューを基準として画面上の相対位置を特定します。

高度なAPI

メソッド	説明
`measure`	UIスレッド上の画面上のビューの寸法と位置を同期的に取得します。
`useAnimatedReaction`	共有値の変化に応答します。
`useFrameCallback`	フレームが更新されるたびに関数を実行します。
`useEvent`	ネイティブイベントで呼び出されるイベントハンドラを返す低レベルのフック。`useAnimatedGestureHandler`や`useAnimatedScrollHandler`などのカスタムイベントハンドラーフックを作成するために使用されます。
`useHandler`	ワークレットを再構築する必要があるかどうかを示すコンテキストオブジェクトと値を返す低レベルのフック。`useAnimatedGestureHandler`や`useAnimatedScrollHandler`などのカスタムイベントハンドラーフックを作成するために使用されます。
`dispatchCommand`	UIスレッドからネイティブコンポーネントのコマンドを同期的にディスパッチします。
`setNativeProps`	コンポーネントのプロパティを更新します。
`useComposedEventHandler`	`useEvent`ベースのイベントハンドラー（`useAnimatedScrollHandler`や独自のカスタムイベントハンドラーなど）を組み合わせて単一のイベントハンドラーを作成します。
`makeMutable`	`useSharedValue`フックによって内部で使用され、共有値を作成します。

例外

VegaのReanimatedライブラリには、APIサポートに関していくつかの例外があります。 Vegaは以下のフックとメソッドをサポートしていません。

useAnimatedSensor
useAnimatedKeyboard
useReducedMotion
FabricのレイアウトアニメーションLayout Animations

CSS遷移CSS Transitions
CSSアニメーションCSS Animations

SETs (Shared Element Transitions)（共通要素遷移）

Vegaでの既知の問題

高速リフレッシュが使用された後、withRepeatを使用するアニメーションがリピートを停止します。
高速リフレッシュが使用された後、アニメーションでスタイルが更新されません。

サポートされているバージョン

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
~2.0.x+3.5.4	0.23以前	`OS 1.1 (1401010009820)`以前	0.72
~4.0.x+4.1.3	0.24	`OS 1.2 (2101020054720)`	0.72、0.83

クレジット

このプロジェクトは、Shopify、Expo.io（英語のみ）、Software Mansion（英語のみ）の協力により構築され、維持されています。

Vegaライブラリとサービス

テクニカルドキュメント

インストール

例

APIサポート

アニメーション

コア

スクロール

デバイス

スレッド

ワークレット化

ユーティリティ

高度なAPI

例外

Vegaでの既知の問題

サポートされているバージョン

関連リソース

クレジット

​テクニカルドキュメント

​インストール

​例

​APIサポート

​アニメーション

​コア

​スクロール

​デバイス

​スレッド

​ワークレット化

​ユーティリティ

​高度なAPI

​例外

​Vegaでの既知の問題

​サポートされているバージョン

​関連リソース

​クレジット

テクニカルドキュメント

インストール

例

APIサポート

アニメーション

コア

スクロール

デバイス

スレッド

ワークレット化

ユーティリティ

高度なAPI

例外

Vegaでの既知の問題

サポートされているバージョン

関連リソース

クレジット