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,
);

安排在下一次布局时发生动画。

参数：

姓名	类型	必需	描述
config	对象	是	请参见下面的配置说明。
onAnimationDidEnd	函数	否	动画结束时调用。
onAnimationDidFail	函数	否	动画失败时调用。

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)

一个辅助函数，创建一个对象（包含 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。

预设	值
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

调用 configureNext() 并传入 Presets.easeInEaseOut。

---

linear

调用 configureNext() 并传入 Presets.linear。

---

spring

调用 configureNext() 并传入 Presets.spring。

示例