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

Animated.ValueXY

パンジェスチャのような2Dアニメーションを駆動するための2D値。通常のAnimated.Valueとほぼ同じAPIですが、多重化されています。内部的には2つの通常のAnimated.Valueを含んでいます。

例​

リファレンス

メソッド​

setValue()​

setValue(value: {x: number; y: number});

値を直接設定します。これは、値で実行されているアニメーションを停止し、バインドされているすべてのプロパティを更新します。

パラメータ

名前タイプ必須説明
value{x: number; y: number}はい値

setOffset()​

setOffset(offset: {x: number; y: number});

setValue、アニメーション、またはAnimated.eventのいずれによって設定された値の上に適用されるオフセットを設定します。パンジェスチャの開始などを補正するのに便利です。

パラメータ

名前タイプ必須説明
offset{x: number; y: number}はいオフセット値

flattenOffset()​

flattenOffset();

オフセット値をベース値にマージし、オフセットをゼロにリセットします。値の最終出力は変更されません。

extractOffset()​

extractOffset();

オフセット値をベース値に設定し、ベース値をゼロにリセットします。値の最終出力は変更されません。

addListener()​

addListener(callback: (value: {x: number; y: number}) => void);

アニメーションからの更新を観察できるように、値に非同期リスナーを追加します。ネイティブで駆動される可能性があるため、値を同期的に読み取る方法がないため、これは便利です。

リスナーの識別子として機能する文字列を返します。

パラメータ

名前タイプ必須説明
callback関数はいvalueキーが新しい値に設定されたオブジェクトを受け取るコールバック関数。

removeListener()​

removeListener(id: string);

リスナーの登録を解除します。 idパラメータは、以前にaddListener()によって返された識別子と一致する必要があります。

パラメータ

名前タイプ必須説明
id文字列はい削除されるリスナーのID。

removeAllListeners()​

removeAllListeners();

登録されているすべてのリスナーを削除します。

stopAnimation()​

stopAnimation(callback?: (value: {x: number; y: number}) => void);

実行中のアニメーションまたはトラッキングを停止します。 callbackは、アニメーションの停止後に最終値を指定して呼び出されます。これは、アニメーションの位置とレイアウトを一致させるために状態を更新するのに便利です。

パラメータ

名前タイプ必須説明
callback関数いいえ最終値を受け取る関数。

resetAnimation()​

resetAnimation(callback?: (value: {x: number; y: number}) => void);

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

パラメータ

名前タイプ必須説明
callback関数いいえ元の値を受け取る関数。

getLayout()​

getLayout(): {left: Animated.Value, top: Animated.Value};

スタイルで使用するために、{x, y}を{left, top}に変換します。例：

style={this.state.anim.getLayout()}

getTranslateTransform()​

getTranslateTransform(): [
  {translateX: Animated.Value},
  {translateY: Animated.Value},
];

{x, y}を使用可能な変換変換に変換します。例：

style={{
  transform: this.state.anim.getTranslateTransform()
}}