布局动画

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

当布局发生变更时，自动将视图动画过渡到新的位置。

常见用法是在函数组件中更新状态钩子前调用此 API，在类组件中调用 setState 前调用。

注意：要在 Android 上生效，需通过 UIManager 设置以下标志：

js

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

示例

---

参考

方法

configureNext()

tsx

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

安排在下一次布局时执行动画。

参数：

Name	Type	Required	Description
config	object	Yes	See config description below.
onAnimationDidEnd	function	No	Called when the animation finished.
onAnimationDidFail	function	No	Called when the animation failed.

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）。

Types
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

---

布局属性

可动画化的布局属性枚举值，用于 create 方法或 configureNext 的 create/update/delete 配置（示例：LayoutAnimation.Properties.opacity）。

Properties
opacity
scaleX
scaleY
scaleXY

---

预设配置

预定义的动画配置集合，可直接传入 configureNext。

Presets	Value
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()。

示例：