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

Animated.Value

アニメーションを駆動するための標準的な値です。1つの Animated.Value は複数のプロパティを同期的に駆動できますが、一度に駆動できるメカニズムは1つだけです。新しいメカニズムを使用すると（例：新しいアニメーションを開始する、または setValue を呼び出す）、以前のメカニズムは停止します。

通常は useAnimatedValue(0); またはクラスコンポーネントでは new Animated.Value(0); で初期化されます。

リファレンス

メソッド​

setValue()​

tsx
setValue(value: number);

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

パラメータ

名前型必須説明
valuenumberはい値

setOffset()​

tsx
setOffset(offset: number);

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

パラメータ

名前型必須説明
offsetnumberはいオフセット値

flattenOffset()​

tsx
flattenOffset();

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

extractOffset()​

tsx
extractOffset();

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

addListener()​

tsx
addListener(callback: (state: {value: number}) => void): string;

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

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

パラメータ

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

removeListener()​

tsx
removeListener(id: string);

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

パラメータ

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

removeAllListeners()​

tsx
removeAllListeners();

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

stopAnimation()​

tsx
stopAnimation(callback?: (value: number) => void);

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

パラメータ

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

resetAnimation()​

tsx
resetAnimation(callback?: (value: number) => void);

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

パラメータ

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

interpolate()​

tsx
interpolate(config: InterpolationConfigType);

プロパティを更新する前に値を補間します。例：0-1を0-10にマッピングする。

AnimatedInterpolation.js を参照してください。

パラメータ

名前型必須説明
configobjectはい下記を参照してください。

config オブジェクトは以下のキーで構成されます

  • inputRange: 数値の配列
  • outputRange: 数値または文字列の配列
  • easing (任意): 入力値を受け取り、数値を返す関数
  • extrapolate (任意): 'extend'、'identity'、または 'clamp' のような文字列
  • extrapolateLeft (任意): 'extend'、'identity'、または 'clamp' のような文字列
  • extrapolateRight (任意): 'extend'、'identity'、または 'clamp' のような文字列

animate()​

tsx
animate(animation, callback);

通常は内部でのみ使用されますが、カスタムのAnimationクラスで使用される可能性があります。

パラメータ

名前型必須説明
animationAnimationはいAnimation.js を参照してください。
callbackfunctionはいコールバック関数。