Animated.Value
アニメーションを駆動するための標準値です。1つの`Animated.Value`は複数のプロパティを同期的に駆動できますが、一度に1つのメカニズムによってのみ駆動できます。新しいメカニズム（新しいアニメーションの開始や`setValue`の呼び出しなど）を使用すると、以前のメカニズムは停止します。
通常、クラスコンポーネントでは`useAnimatedValue(0);`または`new Animated.Value(0);`で初期化されます。
リファレンス
メソッド
setValue()
setValue(value: number);
値を直接設定します。これは、値で実行されているアニメーションを停止し、バインドされているすべてのプロパティを更新します。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| value | 数値 | はい | 値 |
setOffset()
setOffset(offset: number);
`setValue`、アニメーション、または`Animated.event`のいずれによって設定された値に関係なく、設定された値に加えて適用されるオフセットを設定します。パンジェスチャの開始などを補償するのに役立ちます。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| offset | 数値 | はい | オフセット値 |
flattenOffset()
flattenOffset();
オフセット値をベース値にマージし、オフセットをゼロにリセットします。値の最終的な出力は変更されません。
extractOffset()
extractOffset();
オフセット値をベース値に設定し、ベース値をゼロにリセットします。値の最終的な出力は変更されません。
`addListener()`
addListener(callback: (state: {value: number}) => void): string;
アニメーションからの更新を観察できるように、値に非同期リスナーを追加します。ネイティブで駆動される可能性があるため、値を同期的に読み取る方法がないため、これは役立ちます。
リスナーの識別子として機能する文字列を返します。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| コールバック | 関数 | はい | `value`キーが新しい値に設定されたオブジェクトを受け取るコールバック関数。 |
removeListener()
removeListener(id: string);
リスナーの登録を解除します。 `id`パラメータは、以前に`addListener()`によって返された識別子と一致する必要があります。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| id | 文字列 | はい | 削除されるリスナーのID。 |
removeAllListeners()
removeAllListeners();
登録されているすべてのリスナーを削除します。
stopAnimation()
stopAnimation(callback?: (value: number) => void);
実行中のアニメーションまたはトラッキングを停止します。 `callback`は、アニメーションの停止後に最終値で呼び出されます。これは、レイアウトに合わせてアニメーションの位置に状態を更新するのに役立ちます。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| コールバック | 関数 | いいえ | 最終値を受け取る関数。 |
resetAnimation()
resetAnimation(callback?: (value: number) => void);
アニメーションを停止し、値を元の値にリセットします。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| コールバック | 関数 | いいえ | 元の値を受け取る関数。 |
interpolate()
interpolate(config: InterpolationConfigType);
プロパティを更新する前に値を補間します。たとえば、0〜1を0〜10にマッピングします。
`AnimatedInterpolation.js`を参照してください
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| 設定 | オブジェクト | はい | 下記参照。 |
`config`オブジェクトは、次のキーで構成されています。
- `inputRange`：数値の配列
- `outputRange`：数値または文字列の配列
- `easing`（オプション）：入力数値が与えられた場合に数値を返す関数
- `extrapolate`（オプション）： 'extend'、 'identity'、または 'clamp'などの文字列
- `extrapolateLeft`（オプション）： 'extend'、 'identity'、または 'clamp'などの文字列
- `extrapolateRight`（オプション）： 'extend'、 'identity'、または 'clamp'などの文字列
`animate()`
animate(animation, callback);
通常は内部でのみ使用されますが、カスタムアニメーションクラスで使用できます。
パラメータ
| 名前 | タイプ | 必須 | 説明 |
|---|---|---|---|
| アニメーション | アニメーション | はい | `Animation.js`を参照してください。 |
| コールバック | 関数 | はい | コールバック関数。 |