跳到主要内容

LayoutAnimation

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

在函数组件中，使用此 API 的常见方式是在更新状态 hook 之前调用它，在类组件中则是在调用 setState 之前调用它

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

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

示例​

参考

方法​

configureNext()​

React 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 的 config 包含以下键：

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

create()​

React 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 的一组预定义动画配置

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

示例：