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

Animated.ValueXY

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

例​

リファレンス

Methods​

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が呼び出されます。これは、アニメーション位置をレイアウトと一致するように状態を更新するのに役立ちます。

パラメータ

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

resetAnimation()​

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

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

パラメータ

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

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}を使用可能な変換（translation transform）に変換します（例）。

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