布局动画
在下一次布局发生时,自动将视图动画到其新位置。
使用此 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
,用于视图移除时动画的可选配置
传递给 create
、update
或 delete
的配置具有以下键
type
,要使用的动画类型property
,要动画的布局属性(可选,但推荐用于create
和delete
)springDamping
(数字,可选,仅用于type: Type.spring
)initialVelocity
(数字,可选)delay
(数字,可选)duration
(数字,可选)
create()
tsx
static create(duration, type, creationProp)
一个帮助函数,用于创建一个对象(带有 create
、update
和 delete
字段),以传递给 configureNext
。type
参数是一个动画类型,creationProp
参数是一个布局属性。
示例
属性
类型
一个动画类型枚举,用于 create
方法,或 configureNext
的 create
/update
/delete
配置中。(示例用法:LayoutAnimation.Types.easeIn
)
类型 |
---|
spring |
linear |
easeInEaseOut |
easeIn |
easeOut |
keyboard |
属性
一个布局属性枚举,用于 create
方法,或 configureNext
的 create
/update
/delete
配置中。(示例用法:LayoutAnimation.Properties.opacity
)
属性 |
---|
opacity |
scaleX |
scaleY |
scaleXY |
预设
一组预定义的动画配置,用于传递给 configureNext
。
预设 | 值 |
---|---|
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
使用 Presets.easeInEaseOut
调用 configureNext()
。
linear
使用 Presets.linear
调用 configureNext()
。
spring
使用 Presets.spring
调用 configureNext()
。
示例