跳至主要内容

LayoutAnimation

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

使用此 API 的一种常见方法是在函数组件中更新状态钩子之前调用它，并在类组件中调用 setState。

请注意，为了使其在 **Android** 上正常工作，您需要通过 UIManager 设置以下标志

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

示例​

参考

方法​

configureNext()​

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

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

参数：​

名称类型必填描述
config对象是请参见下面的 config 描述。
onAnimationDidEnd函数否动画完成后调用。
onAnimationDidFail函数否动画失败时调用。

config 参数是一个具有以下键的对象。 create 返回一个有效的 config 对象，并且 预设 对象也可以全部作为 config 传递。

  • duration（以毫秒为单位）
  • create，用于为新视图设置动画的可选配置
  • update，用于为已更新的视图设置动画的可选配置
  • delete，用于在移除视图时为其设置动画的可选配置

传递给 create、update 或 delete 的配置具有以下键

  • type，要使用的 动画类型
  • property，要设置动画的 布局属性（可选，但建议用于 create 和 delete）
  • springDamping（数字，可选，仅适用于 type: Type.spring）
  • initialVelocity（数字，可选）
  • delay（数字，可选）
  • duration（数字，可选）

create()​

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

预设值
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()。

示例