跳到主要内容

LayoutAnimation

在下一次布局发生时自动将视图动画到其新位置。

使用此 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,
);

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

参数：​

名称类型必填描述
configobject是见下面的配置说明。
onAnimationDidEndfunction否动画完成时调用。
onAnimationDidFailfunction否动画失败时调用。

config 参数是一个包含以下键的对象。 create 返回一个有效的配置对象，同时 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 参数是一个布局属性(layoutanimation.md#properties)。

示例：

属性​

类型​

动画类型的枚举，用于 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​

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

linear​

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

spring​

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

示例：