Animacja układu

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Automatycznie animuje widoki do ich nowych pozycji podczas następnej zmiany układu.

Powszechnym sposobem użycia tego API jest wywołanie go przed aktualizacją hooka stanu w komponentach funkcyjnych i przed wywołaniem setState w komponentach klasowych.

Aby działało na Androidzie, ustaw następujące flagi poprzez UIManager:

js

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

Przykład

---

Dokumentacja

Metody

configureNext()

tsx

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

Planuje animację, która nastąpi przy kolejnej zmianie układu.

Parametry:

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.

Parametr config to obiekt z poniższymi kluczami. create zwraca prawidłowy obiekt dla config, a obiekty Presets również mogą być przekazane jako config.

• duration w milisekundach

• create, opcjonalna konfiguracja dla animowania nowych widoków

• update, opcjonalna konfiguracja dla animowania zaktualizowanych widoków

• delete, opcjonalna konfiguracja dla animowania usuwanych widoków

Konfiguracja przekazywana do create, update lub delete zawiera następujące klucze:

• type, typ animacji do użycia

• property, właściwość układu do animowania (opcjonalna, ale zalecana dla create i delete)

• springDamping (liczba, opcjonalne, tylko dla type: Type.spring)

• initialVelocity (liczba, opcjonalne)

• delay (liczba, opcjonalne)

• duration (liczba, opcjonalne)

---

create()

tsx

static create(duration, type, creationProp)

Pomocnik tworzący obiekt (z polami create, update i delete) do przekazania do configureNext. Parametr type to typ animacji, a creationProp to właściwość układu.

Przykład:

Zatrzymuje działającą animację i resetuje wartość do oryginalnej.

Typy

Wyliczenie typów animacji do użycia w metodzie create lub w konfiguracjach create/update/delete dla configureNext. (przykład użycia: LayoutAnimation.Types.easeIn)

Types
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

---

Właściwości

Wyliczenie właściwości układu do animowania, do użycia w metodzie create lub w konfiguracjach create/update/delete dla configureNext. (przykład użycia: LayoutAnimation.Properties.opacity)

Properties
opacity
scaleX
scaleY
scaleXY

---

Predefiniowane ustawienia

Zbiór predefiniowanych konfiguracji animacji do przekazania do 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

Wywołuje configureNext() z Presets.easeInEaseOut.

---

linear

Wywołuje configureNext() z Presets.linear.

---

spring

Wywołuje configureNext() z Presets.spring.

Przykład: