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

Animated.Value

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

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

リファレンス

Methods​

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はいコールバック関数。