跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.71

LayoutAnimation

当布局变化时,自动将视图运动到它们新的位置上。

一个常用的调用此 API 的办法是在状态更新前调用。

注意如果要在Android上使用此动画,则需要在代码中启用:

import { UIManager } from 'react-native';

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

上面这段代码应该写在任何组件加载之前,比如可以写到 index.js 的开头。

示例


文档

方法

configureNext()

static configureNext(config, onAnimationDidEnd?, onAnimationDidFail?)

计划下一次布局要发生的动画。

参数:

名称类型必需说明
configobject看下面的说明
onAnimationDidEndfunction动画结束后的回调
onAnimationDidFailfunction动画失败后的回调
config
  • duration 动画持续时间,单位是毫秒。
  • create,配置创建新视图时的动画。(参阅Anim类型)
  • update,配置被更新的视图的动画。(参阅Anim类型)

create()

static create(duration, type, creationProp)

用来创建configureNext所需的 config 参数的辅助函数。

示例:

Properties

Types

An enumeration of animation types to be used in the create method, or in the create/update/delete configs for configureNext. (example usage: LayoutAnimation.Types.easeIn)

Types
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

Properties

An enumeration of layout properties to be animated to be used in the create method, or in the create/update/delete configs for configureNext. (example usage: LayoutAnimation.Properties.opacity)

Properties
opacity
scaleX
scaleY
scaleXY

Presets

A set of predefined animation config.

PresetsValue
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

Shortcut to bind configureNext() methods with Presets.easeInEaseOut.


linear

Shortcut to bind configureNext() methods with Presets.linear.


spring

Shortcut to bind configureNext() methods with Presets.spring.

Example usage: