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

LayoutAnimation

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

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

Androidでこれを機能させるには、UIManagerを介して以下のフラグを設定する必要があることに注意してください。

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

例​

リファレンス

Methods​

configureNext()​

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

次のレイアウトで発生するアニメーションをスケジュールします。

パラメーター:​

名前型必須説明
configobjectはい以下の設定の説明を参照してください。
onAnimationDidEndfunctionNoアニメーションが終了したときに呼び出されます。
onAnimationDidFailfunctionNoアニメーションが失敗したときに呼び出されます。

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

  • duration（ミリ秒単位）
  • create、新しいビューをアニメーションするためのオプション設定
  • update、更新されたビューをアニメーションするためのオプション設定
  • delete、削除されるビューをアニメーションするためのオプション設定

create、update、またはdeleteに渡される設定には、次のキーがあります。

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

create()​

tsx
static create(duration, type, creationProp)

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

使用例

プロパティ​

タイプ​

createメソッド、またはconfigureNextのcreate/update/delete設定で使用されるアニメーションタイプの列挙。(使用例: LayoutAnimation.Types.easeIn)

タイプ
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

プロパティ​

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

プロパティ
opacity
scaleX
scaleY
scaleXY

プリセット​

configureNextに渡す、事前に定義されたアニメーション設定のセット。

プリセット値
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()を呼び出します。

使用例