LayoutAnimation

次回のレイアウトが発生したときに、ビューを新しい位置に自動的にアニメーションさせます。

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

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

js

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

使用例

---

リファレンス

メソッド

configureNext()

tsx

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

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

パラメーター:

名前	型	必須	説明
config	object	はい	以下のconfigの説明を参照してください。
onAnimationDidEnd	function	いいえ	アニメーションが終了したときに呼び出されます。
onAnimationDidFail	function	いいえ	アニメーションが失敗したときに呼び出されます。

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

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

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

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

---

create()

tsx

static create(duration, type, creationProp)

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

使用例

プロパティ

Types

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

Types
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

---

Properties

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

プロパティ
opacity
scaleX
scaleY
scaleXY

---

Presets

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

Presets	値
easeInEaseOut	create(300, 'easeInEaseOut', 'opacity')
linear	create(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()を呼び出します。

使用例