跳到主要内容

LayoutAnimation

当下一个布局发生时，自动将视图动画到新位置。

使用此 API 的常见方法是在函数组件中更新状态 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对象是参见下面的配置说明。
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`。

预设值
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​

使用 `Presets.easeInEaseOut` 调用 `configureNext()`。

linear​

使用 `Presets.linear` 调用 `configureNext()`。

spring​

使用 `Presets.spring` 调用 `configureNext()`。

示例