Skip to main content
版本: 0.64

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: