跳到主要内容

布局动画

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

使用此 API 的常见方法是在函数组件中更新 state 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对象参见下方 config 描述。
onAnimationDidEnd函数动画结束时调用。
onAnimationDidFail函数动画失败时调用。

config 参数是一个包含以下键的对象。create 返回一个有效的 config 对象,并且 Presets 对象也可以全部作为 config 传递。

  • duration (毫秒)
  • create,用于新视图动画的可选配置
  • update,用于已更新视图动画的可选配置
  • delete,用于视图移除时动画的可选配置

传递给 createupdatedelete 的配置具有以下键

  • type,要使用的动画类型
  • property,要动画的布局属性(可选,但推荐用于 createdelete
  • springDamping(数字,可选,仅用于 type: Type.spring
  • initialVelocity(数字,可选)
  • delay(数字,可选)
  • duration(数字,可选)

create()

tsx
static create(duration, type, creationProp)

一个帮助函数,用于创建一个对象(带有 createupdatedelete 字段),以传递给 configureNexttype 参数是一个动画类型creationProp 参数是一个布局属性

示例

属性

类型

一个动画类型枚举,用于 create 方法,或 configureNextcreate/update/delete 配置中。(示例用法:LayoutAnimation.Types.easeIn

类型
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

属性

一个布局属性枚举,用于 create 方法,或 configureNextcreate/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()

示例