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}を受け取ります。

tsx
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）にマッピングするには、次のようにします。

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

リファレンス

メソッド

与えられた値が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は、次のオプションを持つことができるオブジェクトです。

bounciness/speed、tension/friction、またはstiffness/damping/massのいずれか1つしか定義できず、複数定義はできないことに注意してください。

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

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

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

2つのアニメーション値を加算して構成される新しいアニメーション値を作成します。

`subtract()`

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

最初のアニメーション値から2番目のアニメーション値を減算して構成される新しいアニメーション値を作成します。

`divide()`

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

最初のアニメーション値を2番目のアニメーション値で除算して構成される新しいアニメーション値を作成します。

`multiply()`

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

2つのアニメーション値を乗算して構成される新しいアニメーション値を作成します。

`modulo()`

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

提供されたアニメーション値の（非負の）剰余である新しいアニメーション値を作成します。

`diffClamp()`

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

2つの値の間に制限された新しいアニメーション値を作成します。最後の値との差分を使用するため、値が境界から遠くにあっても、値が再び近づき始めると変化し始めます。(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;

アニメーションの配列をすべて同時に開始します。デフォルトでは、アニメーションの1つが停止されると、すべてが停止されます。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}) => void`	いいえ	アニメーションが正常に実行を終了した後、または完了する前にstop()が呼び出されたためにアニメーションが完了したときに呼び出される関数

コールバック付きのstartの例

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`

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`