react-native-reanimated

React Native ReanimatedライブラリはAnimatedライブラリAPIを拡張し、ジェスチャーベースのインタラクションを使用する際の柔軟性を高めます。 Reanimatedを使用すると、UIスレッド（英語のみ）で動作するスムーズなアニメーションや対話操作を簡単に作成できます。このライブラリとAPIの詳細については、Software Mansionの公式ドキュメントのhttps://docs.swmansion.com/react-native-reanimated/（英語のみ）を参照してください。

インストール

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

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

babel.config.jsに@amazon-devices/react-native-reanimatedプラグインを追加します。

 module.exports = {
   plugins: [
     ...
     '@amazon-devices/react-native-reanimated/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 default 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 default 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ライブラリは、以下の方法のほとんどをサポートするターボモジュールを提供します。

Animations

メソッド	説明	サポートあり
`withTiming`	再生時間とイージングに基づくアニメーションを作成します。	✅はい
`withSpring`	ばねに基づくアニメーションを作成します。	✅はい
`withDecay`	摩擦を受けて動くオブジェクトを模倣するアニメーションを作成します。アニメーションは指定された速度で開始され、指定された減速率に従って徐々に減速して停止します。	✅はい
`withSequence`	複数のアニメーションを順番に実行するアニメーションモディファイアーです。	✅はい
`withRepeat`	アニメーションを指定回数または無限に繰り返すアニメーションモディファイアーです。	✅はい
`withDelay`	アニメーションを遅延して開始するアニメーションモディファイアーです。	✅はい
`SETs (Shared Element Transitions)`（共有エレメントトランジション）	コンポーネントを、ある画面のコンポーネントから別の画面のコンポーネントにスムーズに変換します。	❌いいえ

コア

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

スクロール

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

デバイス

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

スレッド

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

ワークレット化

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

ユーティリティ

メソッド	説明	サポートあり
`interpolate`	線形補間を使用して、ある範囲の値を別の範囲にマッピングします。	✅はい
`clamp`	値を指定された範囲内に制限します。	✅はい
`interpolateColor`	線形補間を使用して、入力範囲を出力カラーにマップします。	✅はい
`getRelativeCoords`	指定されたビューを基準として画面上の相対位置を特定します。	✅はい
`Layout Animations`	UIコンポーネントのレイアウトプロパティが変更されたときに自動アニメーションを有効にします。	❌いいえ

高度なAPI

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

既知の問題と制限事項

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

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

パッケージ名	Amazon NPMライブラリのバージョン	OSS NPMライブラリのバージョン	Vega OSのビルド番号	Vega SDKバージョン	リリースノート
`@amazon-devices/react-native-reanimated`	2.0.0+3.5.4	3.5.4	`OS 1.1 (201010435950)`	0.19	システム分散ライブラリとしてリリースされました。初期リリースでは下位互換性のチェックは必要ありません。

Credits

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

Vegaライブラリとサービス

インストール

例

APIリファレンス

Animations

コア

スクロール

デバイス

スレッド

ワークレット化

ユーティリティ

高度なAPI

既知の問題と制限事項

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

関連トピック

Credits

​インストール

​例

​APIリファレンス

​Animations

​コア

​スクロール

​デバイス

​スレッド

​ワークレット化

​ユーティリティ

​高度なAPI

​既知の問題と制限事項

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

​関連トピック

​Credits

インストール

例

APIリファレンス

Animations

コア

スクロール

デバイス

スレッド

ワークレット化

ユーティリティ

高度なAPI

既知の問題と制限事項

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

関連トピック

Credits