Skip to main content

LayoutAnimation

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

¥Automatically animates views to their new positions when the next layout happens.

使用此 API 的常见方法是在更新功能组件中的状态钩子以及在类组件中调用 setState 之前调用它。

¥A common way to use this API is to call it before updating the state hook in functional components and calling setState in class components.

请注意，为了使其在 Android 上运行，你需要通过 UIManager 设置以下标志：

¥Note that in order to get this to work on Android you need to set the following flags via UIManager:

js
if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

示例​

¥Example

参考

¥Reference

方法​

¥Methods

configureNext()​

tsx
static configureNext(
  config: LayoutAnimationConfig,
  onAnimationDidEnd?: () => void,
  onAnimationDidFail?: () => void,
);

安排动画在下一个布局上发生。

¥Schedules an animation to happen on the next layout.

参数：​

¥Parameters:

名称类型必需的描述
configobject是的请参阅下面的配置说明。
onAnimationDidEndfunction不动画完成时调用。
onAnimationDidFailfunction不动画失败时调用。

config 参数是一个具有以下键的对象。create 为 config 返回一个有效的对象，Presets 对象也可以全部作为 config 传递。

¥The config parameter is an object with the keys below. create returns a valid object for config, and the Presets objects can also all be passed as the config.

  • duration 以毫秒为单位

    ¥duration in milliseconds

  • create，用于在新视图中设置动画的可选配置

    ¥create, optional config for animating in new views

  • update，已更新的动画视图的可选配置

    ¥update, optional config for animating views that have been updated

  • delete，用于在删除视图时对视图进行动画处理的可选配置

    ¥delete, optional config for animating views as they are removed

传递到 create、update 或 delete 的配置具有以下键：

¥The config that's passed to create, update, or delete has the following keys:

  • type，要使用的 动画类型

    ¥type, the animation type to use

  • property，要设置动画的 布局属性（可选，但建议用于 create 和 delete）

    ¥property, the layout property to animate (optional, but recommended for create and delete)

  • springDamping（数字，可选，仅与 type: Type.spring 一起使用）

    ¥springDamping (number, optional and only for use with type: Type.spring)

  • initialVelocity（数量，可选）

    ¥initialVelocity (number, optional)

  • delay（数量，可选）

    ¥delay (number, optional)

  • duration（数量，可选）

    ¥duration (number, optional)

create()​

tsx
static create(duration, type, creationProp)

创建一个对象（带有 create、update 和 delete 字段）以传递到 configureNext 的辅助程序。type 参数是 动画类型，creationProp 参数是 布局属性。

¥Helper that creates an object (with create, update, and delete fields) to pass into configureNext. The type parameter is an animation type, and the creationProp parameter is a layout property.

示例：

¥Example:

属性​

¥Properties

类型​

¥Types

用于 create 方法或 configureNext 的 create/update/delete 配置中的动画类型的枚举。（用法示例：LayoutAnimation.Types.easeIn）

¥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)

类型
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

属性​

¥Properties

要在 create 方法中或在 configureNext 的 create/update/delete 配置中使用的动画布局属性的枚举。（用法示例：LayoutAnimation.Properties.opacity）

¥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)

属性
opacity
规模 X
尺度 Y
缩放 XY

预设​

¥Presets

一组要传递到 configureNext 的预定义动画配置。

¥A set of predefined animation configs to pass into 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()。

¥Calls configureNext() with Presets.easeInEaseOut.

linear​

用 Presets.linear 调用 configureNext()。

¥Calls configureNext() with Presets.linear.

spring​

用 Presets.spring 调用 configureNext()。

¥Calls configureNext() with Presets.spring.

示例：

¥Example: