Q群 567530369,小伙伴们都在这里等你哦~

LayoutAnimation

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

一个常用的调用此 API 的办法是调用LayoutAnimation.configureNext,然后调用setState

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


import { UIManager } from 'react-native';

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

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

查看方法

查看属性


文档

方法

configureNext()


static configureNext(config, onAnimationDidEnd?)

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

参数:

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

create()


static create(duration, type, creationProp)

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


checkConfig()


static checkConfig(config, location, name)

属性

An enumerate of object property to be animated, used in create method.

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.