LayoutAnimation

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Anima automáticamente las vistas a sus nuevas posiciones cuando ocurre el siguiente diseño.

Una forma común de usar esta API es invocarla antes de actualizar el hook de estado en componentes funcionales y llamar a setState en componentes de clase.

Para que funcione en Android, debes configurar estas flags mediante UIManager:

js

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

Ejemplo

---

Referencia

Métodos

configureNext()

tsx

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

Programa una animación para ejecutarse en el próximo diseño.

Parámetros:

Name	Type	Required	Description
config	object	Yes	See config description below.
onAnimationDidEnd	function	No	Called when the animation finished.
onAnimationDidFail	function	No	Called when the animation failed.

El parámetro config es un objeto con las siguientes claves. create devuelve un objeto válido para config, y los objetos de Presets también pueden pasarse como config.

• duration en milisegundos

• create, configuración opcional para animar nuevas vistas

• update, configuración opcional para animar vistas actualizadas

• delete, configuración opcional para animar vistas al eliminarse

La configuración que se pasa a create, update o delete tiene estas claves:

• type, el tipo de animación a usar

• property, la propiedad de diseño a animar (opcional, pero recomendada para create y delete)

• springDamping (número, opcional y solo para type: Type.spring)

• initialVelocity (número, opcional)

• delay (número, opcional)

• duration (número, opcional)

---

create()

tsx

static create(duration, type, creationProp)

Herramienta que crea un objeto (con campos create, update y delete) para pasar a configureNext. El parámetro type es un tipo de animación y creationProp es una propiedad de diseño.

Ejemplo:

Propiedades

Types

Enumeración de tipos de animación para usar en el método create o en las configuraciones create/update/delete de configureNext. (ejemplo: LayoutAnimation.Types.easeIn)

Types
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

---

Properties

Enumeración de propiedades de diseño a animar para usar en el método create o en las configuraciones create/update/delete de configureNext. (ejemplo: LayoutAnimation.Properties.opacity)

Properties
opacity
scaleX
scaleY
scaleXY

---

Presets

Conjunto de configuraciones de animación predefinidas para pasar a configureNext.

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

Llama a configureNext() con Presets.easeInEaseOut.

---

linear

Llama a configureNext() con Presets.linear.

---

spring

Llama a configureNext() con Presets.spring.

Ejemplo: