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?)
计划下一次布局要发生的动画。
参数：
| 名称 | 类型 | 必需 | 说明 |
|---|---|---|---|
| config | object | 是 | 看下面的说明 |
| onAnimationDidEnd | function | 否 | 动画结束后的回调 |
| onAnimationDidFail | function | 否 | 动画失败后的回调 |
config
duration动画持续时间，单位是毫秒。create，配置创建新视图时的动画。（参阅Anim类型）update，配置被更新的视图的动画。（参阅Anim类型）
create()
static create(duration, type, creationProp)
用来创建configureNext所需的 config 参数的辅助函数。
示例：
- 函数式组件
- Class 组件
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.
| Presets | Value |
|---|---|
| easeInEaseOut | create(300, 'easeInEaseOut', 'opacity') |
| linear | create(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:
- 函数式组件
- Class 组件