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

Animated.ValueXY

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

使用例​

リファレンス

メソッド​

setValue()​

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

値を直接設定します。これにより、その値で実行中のすべてのアニメーションが停止し、関連付けられたすべてのプロパティが更新されます。

パラメータ

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

setOffset()​

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

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

パラメータ

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

flattenOffset()​

tsx
flattenOffset();

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

extractOffset()​

tsx
extractOffset();

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

addListener()​

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

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

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

パラメータ

名前型必須説明
callbackfunctionはい新しい値に設定されたvalueキーを持つオブジェクトを受け取るコールバック関数です。

removeListener()​

tsx
removeListener(id: string);

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

パラメータ

名前型必須説明
idstringはい削除されるリスナーのIDです。

removeAllListeners()​

tsx
removeAllListeners();

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

stopAnimation()​

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

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

パラメータ

名前型必須説明
callbackfunctionいいえ最終値を受け取る関数。

resetAnimation()​

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

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

パラメータ

名前型必須説明
callbackfunctionいいえ元の値を受け取る関数。

getLayout()​

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

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

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

getTranslateTransform()​

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

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

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