跳到主要內容

LayoutAnimation

在下次佈局發生時，自動將視圖動畫化到其新位置。

此 API 的常見用法是在函數組件中更新狀態 Hook 之前以及在類別組件中呼叫 setState 之前呼叫它。

請注意，為了使此功能在 Android 上運作，您需要透過 UIManager 設定以下標誌

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

範例​

參考文獻

方法​

configureNext()​

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

排定動畫在下次佈局時發生。

參數：​

名稱類型必填描述
configobject是請參閱下方的 config 描述。
onAnimationDidEndfunction否動畫結束時呼叫。
onAnimationDidFailfunction否動畫失敗時呼叫。

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)

Helper，用於建立一個物件（具有 create、update 和 delete 欄位）以傳遞到 configureNext。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()。

範例