本文へ移動

LayoutAnimation

次のレイアウト時にビューを新しい位置に自動的にアニメーションします。

このAPIの一般的な使用方法としては、関数コンポーネントでステートフックを更新する前、またはクラスコンポーネントで`setState`を呼び出す前に呼び出すことです。

Androidで動作させるには、`UIManager`を介して以下のフラグを設定する必要があります。

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

例​

リファレンス

メソッド​

configureNext()​

static configureNext(
  config: LayoutAnimationConfig,
  onAnimationDidEnd?: () => void,
  onAnimationDidFail?: () => void,
);

次のレイアウトでアニメーションを実行するようにスケジュールします。

パラメータ​

名前型必須説明
configオブジェクトはい下記のconfigの説明を参照してください。
onAnimationDidEnd関数いいえアニメーションが終了したときに呼び出されます。
onAnimationDidFail関数いいえアニメーションが失敗したときに呼び出されます。

configパラメータは、以下のキーを持つオブジェクトです。create はconfigに対して有効なオブジェクトを返し、Presets オブジェクトもすべてconfigとして渡すことができます。

  • ミリ秒単位のduration
  • create、新しいビューのアニメーションのためのオプションのconfig
  • update、更新されたビューのアニメーションのためのオプションのconfig
  • delete、ビューが削除されるときのアニメーションのためのオプションのconfig

create、update、またはdeleteに渡されるconfigには、以下のキーがあります。

  • type、使用するアニメーションの種類
  • property、アニメーションするレイアウトプロパティ（オプションですが、createとdeleteには推奨されます）
  • springDamping（数値、オプション、type: Type.springでのみ使用）
  • initialVelocity（数値、オプション）
  • delay（数値、オプション）
  • duration（数値、オプション）

create()​

static create(duration, type, creationProp)

configureNextに渡すオブジェクト（create、update、deleteフィールドを持つ）を作成するヘルパー。typeパラメータはアニメーションの種類であり、creationPropパラメータはレイアウトプロパティです。

例

プロパティ​

種類​

createメソッド、またはconfigureNextのcreate/update/delete configで使用されるアニメーションの種類の列挙。（使用例：LayoutAnimation.Types.easeIn）

種類
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

プロパティ​

createメソッド、またはconfigureNextのcreate/update/delete configで使用されるアニメーションするレイアウトプロパティの列挙。（使用例：LayoutAnimation.Properties.opacity）

プロパティ
opacity
scaleX
scaleY
scaleXY

プリセット​

configureNextに渡す、定義済みのアニメーションconfigのセット。

プリセット値
easeInEaseOutcreate(300, 'easeInEaseOut', 'opacity')
linearcreate(500, 'linear', 'opacity')
spring{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }

easeInEaseOut​

Presets.easeInEaseOutを使用してconfigureNext()を呼び出します。

linear​

Presets.linearを使用してconfigureNext()を呼び出します。

spring​

Presets.springを使用してconfigureNext()を呼び出します。

例