Animated

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

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

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

例

次の例には、アニメーション化された値fadeAnimに基づいてフェードインとフェードアウトするViewが含まれています。

動作中のAnimatedの追加例については、アニメーションガイドを参照してください。

概要

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

Animated.Value()（単一値用）
Animated.ValueXY()（ベクトル用）

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

アニメーションの設定

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

Animated.decay()は、初期速度で開始し、徐々に停止するまで減速します。
Animated.spring()は、基本的なバネ物理モデルを提供します。
Animated.timing()は、イージング関数を使用して、時間をかけて値をアニメーション化します。

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

アニメーションの操作

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

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

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

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

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

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

アニメーションできるのは、アニメーション可能なコンポーネントのみです。これらのユニークなコンポーネントは、アニメーション化された値をプロパティにバインドする魔法を行い、すべてのフレームで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()関数は、入力範囲を異なる出力範囲にマッピングできます。デフォルトでは、指定された範囲を超えてカーブを補外しますが、出力値をクランプすることもできます。デフォルトでは線形補間を使用しますが、イージング関数もサポートしています。

interpolate()

アニメーションガイドで、補間について詳しく読むことができます。

ジェスチャやその他のイベントの処理

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

Animated.event()

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

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

参照

メソッド

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

`decay()`

static decay(value, config): CompositeAnimation;

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

Configは、次のオプションを持つことができるオブジェクトです。

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

`timing()`

static timing(value, config): CompositeAnimation;

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

Configは、次のオプションを持つことができるオブジェクトです。

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

`spring()`

static spring(value, config): CompositeAnimation;

減衰調和振動に基づく解析的なバネモデルに従って値をアニメーション化します。速度状態を追跡して、toValueが更新されるときにスムーズな動きを作成し、チェーン接続できます。

Configは、次のオプションを持つことができるオブジェクトです。

bounciness/speed、tension/friction、またはstiffness/damping/massのいずれか1つのみを定義できますが、2つ以上は定義できません。

Facebook Pop、Rebound、およびOrigamiのバネモデルと、friction/tensionまたはbounciness/speedオプションは一致します。

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

stiffness/damping/massをパラメーターとして指定すると、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()`

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

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

`subtract()`

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

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

`divide()`

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

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

`multiply()`

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

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

`modulo()`

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

指定されたAnimated値の（非負の）剰余を返す新しいAnimated値を作成します。

`diffClamp()`

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

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

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

`delay()`

static delay(time: number): CompositeAnimation;

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

`sequence()`

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

アニメーションの配列を順番に開始し、次のアニメーションを開始する前に各アニメーションが完了するのを待ちます。現在実行中のアニメーションが停止されると、それ以降のアニメーションは開始されません。

`parallel()`

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

アニメーションの配列をすべて同時に開始します。デフォルトでは、アニメーションの1つが停止されると、すべて停止します。stopTogetherフラグでこれをオーバーライドできます。

`stagger()`

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

アニメーションの配列は並列で実行される可能性がありますが（オーバーラップ）、連続した遅延で順番に開始されます。後続効果を作成するのに適しています。

`loop()`

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

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

Configは、次のオプションを持つことができるオブジェクトです。

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

`event()`

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

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

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()`

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

プロップスを通じて渡されるアニメーションイベントを監視するための高度な命令型APIです。既存のAnimatedEventに新しいJavaScriptリスナーを追加できます。animatedEventがJavaScriptリスナーの場合、2つのリスナーを1つにマージし、animatedEventがnull/undefinedの場合、JavaScriptリスナーを直接割り当てます。可能な限り値を直接使用してください。

`unforkEvent()`

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

`start()`

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

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

パラメータ

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

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

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

`stop()`

static stop();

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

`reset()`

static reset();

実行中のアニメーションを停止し、値を元に戻します。

プロパティ

`Value`

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

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

`ValueXY`

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

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

`Interpolation`

FlowでInterpolation型を使用するためにエクスポートされます。

`Node`

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

`createAnimatedComponent`

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

`attachNativeEvent`

アニメーション値をビューのイベントにアタッチするための命令型APIです。可能であれば、useNativeDriver: trueを使用してAnimated.eventを使用することをお勧めします。

例​

概要​

アニメーションの設定​

アニメーションの操作​

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

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

アニメーションの合成​

アニメーション化された値の組み合わせ​

補間​

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

参照

メソッド​

decay()​

timing()​

spring()​

add()​

subtract()​

divide()​

multiply()​

modulo()​

diffClamp()​

delay()​

sequence()​

parallel()​

stagger()​

loop()​

event()​

forkEvent()​

unforkEvent()​

start()​

stop()​

reset()​

プロパティ​

Value​

ValueXY​

Interpolation​

Node​

createAnimatedComponent​

attachNativeEvent​

例

概要

アニメーションの設定

アニメーションの操作

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

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

アニメーションの合成

アニメーション化された値の組み合わせ

補間

ジェスチャやその他のイベントの処理

メソッド

`decay()`

`timing()`

`spring()`

`add()`

`subtract()`

`divide()`

`multiply()`

`modulo()`

`diffClamp()`

`delay()`

`sequence()`

`parallel()`

`stagger()`

`loop()`

`event()`

`forkEvent()`

`unforkEvent()`

`start()`

`stop()`

`reset()`

プロパティ

`Value`

`ValueXY`

`Interpolation`

`Node`

`createAnimatedComponent`

`attachNativeEvent`