メインコンテンツへスキップ

Animated

Animatedライブラリは、アニメーションを流動的、強力、そして簡単に構築・保守できるように設計されています。Animatedは、入力と出力間の宣言的な関係、途中の構成可能な変換、そして時間ベースのアニメーション実行を制御するためのstart/stopメソッドに焦点を当てています。

アニメーションを作成するためのコアワークフローは、Animated.Valueを作成し、それを1つ以上のアニメーションコンポーネントのスタイル属性に接続し、次にAnimated.timing()を使用してアニメーションを介して更新を駆動することです。

注

アニメーション値を直接変更しないでください。変更可能な参照オブジェクトを返すには、useRef Hookを使用できます。この参照オブジェクトのcurrentプロパティは、指定された引数として初期化され、コンポーネントのライフサイクルを通じて存続します。

例​

以下の例には、アニメーション値fadeAnimに基づいてフェードインおよびフェードアウトするViewが含まれています。

Animatedの追加の動作例については、Animationsガイドを参照してください。

概要​

Animatedで使用できる値の型は2種類あります。

Animated.Valueはスタイルプロパティまたは他のプロパティにバインドでき、補間することもできます。単一のAnimated.Valueは、任意の数のプロパティを駆動できます。

アニメーションの構成​

Animatedは3種類のアニメーションタイプを提供します。各アニメーションタイプは、値が初期値から最終値へどのようにアニメーションするかを制御する特定のアニメーションカーブを提供します。

ほとんどの場合、timing()を使用します。デフォルトでは、オブジェクトが全速力に徐々に加速し、徐々に減速して停止する様子を伝える対称的なeaseInOutカーブを使用します。

アニメーションの操作​

アニメーションは、アニメーションでstart()を呼び出すことで開始されます。start()は、アニメーションが完了したときに呼び出される完了コールバックを受け取ります。アニメーションが正常に実行を終了した場合、完了コールバックは{finished: true}で呼び出されます。アニメーションが完了する前にstop()が呼び出されたために終了した場合（たとえば、ジェスチャーや別のアニメーションによって中断された場合）、{finished: false}を受け取ります。

tsx
Animated.timing({}).start(({finished}) => {
  /* completion callback */
});

ネイティブドライバの使用​

ネイティブドライバを使用することで、アニメーションの開始前にアニメーションに関するすべての情報をネイティブに送信し、ネイティブコードが毎フレームブリッジを介する必要なくUIスレッドでアニメーションを実行できるようにします。アニメーションが開始されると、JSスレッドはアニメーションに影響を与えることなくブロックできます。

アニメーション構成でuseNativeDriver: trueを指定することで、ネイティブドライバを使用できます。詳細については、Animationsガイドを参照してください。

アニメーション可能なコンポーネント​

アニメーション可能なコンポーネントのみがアニメーションできます。これらのユニークなコンポーネントは、アニメーション値をプロパティにバインドする魔法を行い、毎フレームのReactレンダリングおよび調整プロセスのコストを回避するために、ターゲットを絞ったネイティブ更新を実行します。また、アンマウント時のクリーンアップも処理するため、デフォルトで安全です。

  • createAnimatedComponent()を使用して、コンポーネントをアニメーション可能にすることができます。

Animatedは、上記のラッパーを使用して、次のアニメーション可能なコンポーネントをエクスポートします。

  • Animated.Image
  • Animated.ScrollView
  • Animated.Text
  • Animated.View
  • Animated.FlatList
  • Animated.SectionList

アニメーションの合成​

アニメーションは、合成関数を使用して複雑な方法で組み合わせることもできます。

  • Animated.delay()は、指定された遅延後にアニメーションを開始します。
  • Animated.parallel()は、複数のアニメーションを同時に開始します。
  • Animated.sequence()は、アニメーションを順番に開始し、それぞれが完了するのを待ってから次のアニメーションを開始します。
  • Animated.stagger()は、アニメーションを順番かつ並行して開始しますが、連続的な遅延を伴います。

アニメーションは、あるアニメーションのtoValueを別のAnimated.Valueに設定することで連結することもできます。詳細については、アニメーションガイドの動的な値の追跡を参照してください。

デフォルトでは、1つのアニメーションが停止または中断された場合、グループ内の他のすべてのアニメーションも停止されます。

アニメーション値の結合​

2つのアニメーション値を加算、減算、乗算、除算、または剰余演算を介して結合して、新しいアニメーション値を作成できます。

補間​

interpolate()関数は、入力範囲を異なる出力範囲にマッピングすることを可能にします。デフォルトでは、指定された範囲を超えてカーブを外挿しますが、出力値をクランプすることもできます。デフォルトでは線形補間を使用しますが、イージング関数もサポートしています。

補間の詳細については、Animationガイドを参照してください。

ジェスチャーとその他のイベントの処理​

パンやスクロールなどのジェスチャー、およびその他のイベントは、Animated.event()を使用してアニメーション値に直接マッピングできます。これは構造化されたマップ構文で行われ、複雑なイベントオブジェクトから値を抽出できます。最初のレベルは、複数の引数にマッピングできるように配列であり、その配列にはネストされたオブジェクトが含まれています。

たとえば、水平スクロールジェスチャーを操作する場合、event.nativeEvent.contentOffset.xをscrollX（Animated.Value）にマッピングするために、次のようにします。

tsx
 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

リファレンス

Methods​

指定された値がValueの代わりにValueXYである場合、各設定オプションはスカラーの代わりに{x: ..., y: ...}の形式のベクトルになる場合があります。

decay()​

tsx
static decay(value, config): CompositeAnimation;

減衰係数に基づいて、初期速度からゼロまで値をアニメーション化します。

Configは、以下のオプションを持つオブジェクトです。

  • velocity: 初期速度。必須。
  • deceleration: 減衰率。デフォルトは0.997。
  • isInteraction: このアニメーションがInteractionManager上で「インタラクションハンドル」を作成するかどうか。デフォルトはtrue。
  • useNativeDriver: trueの場合、ネイティブドライバを使用します。必須。

timing()​

tsx
static timing(value, config): CompositeAnimation;

時間のイージングカーブに沿って値をアニメーション化します。Easingモジュールには多くの定義済みカーブがありますが、独自の関数を使用することもできます。

Configは、以下のオプションを持つオブジェクトです。

  • duration: アニメーションの長さ（ミリ秒）。デフォルトは500。
  • easing: カーブを定義するイージング関数。デフォルトはEasing.inOut(Easing.ease)。
  • delay: 遅延（ミリ秒）後にアニメーションを開始します。デフォルトは0。
  • isInteraction: このアニメーションがInteractionManager上で「インタラクションハンドル」を作成するかどうか。デフォルトはtrue。
  • useNativeDriver: trueの場合、ネイティブドライバを使用します。必須。

spring()​

tsx
static spring(value, config): CompositeAnimation;

減衰調和振動に基づいた解析的バネモデルに従って値をアニメーション化します。toValueの更新時に流動的な動きを作成するために速度状態を追跡し、連結できます。

Configは、以下のオプションを持つオブジェクトです。

バネ/速度、張力/摩擦、または剛性/減衰/質量は1つしか定義できませんが、複数定義することはできません。

摩擦/張力またはバネ/速度オプションは、Facebook Pop、Rebound、およびOrigamiのバネモデルと一致します。

  • friction: 「弾み」/オーバーシュートを制御します。デフォルトは7。
  • tension: 速度を制御します。デフォルトは40。
  • speed: アニメーションの速度を制御します。デフォルトは12。
  • bounciness: 弾みを制御します。デフォルトは8。

剛性/減衰/質量をパラメータとして指定すると、Animated.springは減衰調和振動子の運動方程式に基づいた解析的なバネモデルを使用します。この動作は、バネのダイナミクスを支える物理学により正確で忠実であり、iOSのCASpringAnimationの実装に酷似しています。

  • stiffness: バネの剛性係数。デフォルトは100。
  • damping: 摩擦力によるバネの動きがどのように減衰するかを定義します。デフォルトは10。
  • mass: バネの端に取り付けられたオブジェクトの質量。デフォルトは1。

その他の構成オプションは次のとおりです。

  • velocity: バネに取り付けられたオブジェクトの初期速度。デフォルトは0（オブジェクトは静止しています）。
  • overshootClamping: バネがクランプされ、弾まないようにするかどうかを示すブール値。デフォルトはfalse。
  • restDisplacementThreshold: バネが静止しているとみなされる、静止状態からの変位のしきい値。デフォルトは0.001。
  • restSpeedThreshold: バネが静止しているとみなされる速度（ピクセル/秒）。デフォルトは0.001。
  • delay: 遅延（ミリ秒）後にアニメーションを開始します。デフォルトは0。
  • isInteraction: このアニメーションがInteractionManager上で「インタラクションハンドル」を作成するかどうか。デフォルトはtrue。
  • useNativeDriver: trueの場合、ネイティブドライバを使用します。必須。

add()​

tsx
static add(a: Animated, b: Animated): AnimatedAddition;

2つのAnimated値を加算して構成される新しいAnimated値を作成します。

subtract()​

tsx
static subtract(a: Animated, b: Animated): AnimatedSubtraction;

最初のAnimated値から2番目のAnimated値を減算して構成される新しいAnimated値を作成します。

divide()​

tsx
static divide(a: Animated, b: Animated): AnimatedDivision;

最初のAnimated値を2番目のAnimated値で除算して構成される新しいAnimated値を作成します。

multiply()​

tsx
static multiply(a: Animated, b: Animated): AnimatedMultiplication;

2つのAnimated値を乗算して構成される新しいAnimated値を作成します。

modulo()​

tsx
static modulo(a: Animated, modulus: number): AnimatedModulo;

提供されたAnimated値の（非負の）剰余である新しいAnimated値を作成します。

diffClamp()​

tsx
static diffClamp(a: Animated, min: number, max: number): AnimatedDiffClamp;

2つの値の間で制限される新しいAnimated値を作成します。最後の値との差を使用するため、値が境界から遠く離れていても、値が再び近づき始めると変化し始めます。（value = clamp(value + diff, min, max)）。

これは、スクロールイベントで、たとえば、上にスクロールするときにナビゲーションバーを表示し、下にスクロールするときに非表示にするのに役立ちます。

delay()​

tsx
static delay(time: number): CompositeAnimation;

指定された遅延の後にアニメーションを開始します。

sequence()​

tsx
static sequence(animations: CompositeAnimation[]): CompositeAnimation;

アニメーションの配列を順番に開始し、それぞれが完了するのを待ってから次のアニメーションを開始します。現在実行中のアニメーションが停止した場合、後続のアニメーションは開始されません。

parallel()​

tsx
static parallel(
  animations: CompositeAnimation[],
  config?: ParallelConfig
): CompositeAnimation;

アニメーションの配列をすべて同時に開始します。デフォルトでは、アニメーションのいずれかが停止した場合、すべてのアニメーションが停止します。これはstopTogetherフラグで上書きできます。

stagger()​

tsx
static stagger(
  time: number,
  animations: CompositeAnimation[]
): CompositeAnimation;

アニメーションの配列は並行して（重複して）実行される場合がありますが、連続的な遅延を伴って順番に開始されます。トレーリング効果を実装するのに最適です。

loop()​

tsx
static loop(
  animation: CompositeAnimation[],
  config?: LoopAnimationConfig
): CompositeAnimation;

指定されたアニメーションを継続的にループし、終了するたびにリセットして最初から再び開始します。子アニメーションがuseNativeDriver: trueに設定されている場合、JSスレッドをブロックせずにループします。さらに、ループは、アニメーションが実行されている間、VirtualizedListベースのコンポーネントがさらに行をレンダリングするのを防ぐ可能性があります。これを修正するには、子アニメーション設定でisInteraction: falseを渡すことができます。

Configは、以下のオプションを持つオブジェクトです。

  • iterations: アニメーションがループする回数。デフォルトは-1（無限）。

event()​

tsx
static event(
  argMapping: Mapping[],
  config?: EventConfig
): (...args: any[]) => void;

マッピングの配列を受け取り、それに応じて各引数から値を抽出し、マッピングされた出力に対してsetValueを呼び出します。例：

tsx
onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
  {listener: (event: ScrollEvent) => console.log(event)}, // Optional async listener
)}
 ...
onPanResponderMove: Animated.event(
  [
    null, // raw event arg ignored
    {dx: this._panX},
  ], // gestureState arg
  {
    listener: (
      event: GestureResponderEvent,
      gestureState: PanResponderGestureState
    ) => console.log(event, gestureState),
  } // Optional async listener
);

Configは、以下のオプションを持つオブジェクトです。

  • listener: オプションの非同期リスナー。
  • useNativeDriver: trueの場合、ネイティブドライバを使用します。必須。

forkEvent()​

jsx
static forkEvent(event: AnimatedEvent, listener: Function): AnimatedEvent;

propsを介して渡されるアニメーションイベントをスヌーピングするための高度な命令型API。既存のAnimatedEventに新しいJavaScriptリスナーを追加することを許可します。animatedEventがJavaScriptリスナーの場合、2つのリスナーを1つにマージし、animatedEventがnull/undefinedの場合、JavaScriptリスナーを直接割り当てます。可能な場合は値を直接使用してください。

unforkEvent()​

jsx
static unforkEvent(event: AnimatedEvent, listener: Function);

start()​

tsx
static start(callback?: (result: {finished: boolean}) => void);

アニメーションは、アニメーションでstart()を呼び出すことで開始されます。start()は、アニメーションが完了したとき、または完了する前にstop()が呼び出されたためにアニメーションが完了したときに呼び出される完了コールバックを受け取ります。

パラメータ

名前型必須説明
callback(result: {finished: boolean}) => voidNoアニメーションが正常に実行を終了した後、または完了する前にstop()が呼び出されたためにアニメーションが完了した後に呼び出される関数。

コールバックを使用した開始例

tsx
Animated.timing({}).start(({finished}) => {
  /* completion callback */
});

stop()​

tsx
static stop();

実行中のアニメーションをすべて停止します。

reset()​

tsx
static reset();

実行中のアニメーションをすべて停止し、値を元の値にリセットします。

プロパティ​

Value​

アニメーションを駆動するための標準の値クラス。通常、クラスコンポーネントではuseAnimatedValue(0);またはnew Animated.Value(0);で初期化されます。

Animated.Value APIの詳細については、別のページを参照してください。

ValueXY​

パンジェスチャなどの2Dアニメーションを駆動するための2D値クラス。

Animated.ValueXY APIの詳細については、別のページを参照してください。

Interpolation​

フローでInterpolationタイプを使用するためにエクスポートされます。

Node​

型チェックを容易にするためにエクスポートされます。すべてのアニメーション値はこのクラスから派生します。

createAnimatedComponent​

任意のReactコンポーネントをアニメーション可能にします。Animated.Viewなどを作成するために使用されます。

attachNativeEvent​

アニメーション値をビューのイベントにアタッチするための命令型API。可能な場合は、useNativeDriver: trueとともにAnimated.eventを使用することを推奨します。