Przejdź do treści głównej

Animowany

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 →

Biblioteka Animated jest zaprojektowana, aby tworzenie i utrzymywanie animacji było płynne, wydajne i bezproblemowe. Animated koncentruje się na deklaratywnych relacjach między wejściami a wyjściami, konfigurowalnych transformacjach oraz metodach start/stop do kontrolowania wykonania animacji opartych na czasie.

Podstawowy przepływ pracy przy tworzeniu animacji polega na utworzeniu Animated.Value, podłączeniu go do jednego lub kilku atrybutów stylu animowanego komponentu, a następnie sterowaniu aktualizacjami za pomocą animacji przy użyciu Animated.timing().

uwaga

Nie modyfikuj bezpośrednio animowanej wartości. Możesz użyć Haka useRef, aby uzyskać mutowalny obiekt referencji. Właściwość current tego obiektu jest inicjalizowana podanym argumentem i utrzymuje się przez cały cykl życia komponentu.

Przykład​

Poniższy przykład zawiera komponent View, który będzie pojawiał się i znikał w oparciu o animowaną wartość fadeAnim.

Zobacz przewodnik Animacje, aby poznać dodatkowe przykłady działania Animated.

Przegląd​

Istnieją dwa typy wartości, których możesz używać z Animated:

Animated.Value może być powiązany z właściwościami stylu lub innymi propsami oraz może być interpolowany. Pojedyncza wartość Animated.Value może sterować dowolną liczbą właściwości.

Konfigurowanie animacji​

Animated dostarcza trzy typy animacji. Każdy typ zapewnia określoną krzywą animacji, która kontroluje sposób przejścia wartości od stanu początkowego do końcowego:

W większości przypadków będziesz używać timing(). Domyślnie wykorzystuje symetryczną krzywą easeInOut, która oddaje stopniowe przyspieszanie obiektu do pełnej prędkości i kończy się stopniowym zwalnianiem do zatrzymania.

Praca z animacjami​

Animacje są uruchamiane przez wywołanie start() na obiekcie animacji. start() przyjmuje funkcję zwrotną (callback) ukończenia, która zostanie wywołana po zakończeniu animacji. Jeśli animacja zakończyła się normalnie, callback otrzyma {finished: true}. Jeśli animacja zakończyła się, ponieważ wywołano na niej stop() przed ukończeniem (np. z powodu przerwania przez gest lub inną animację), callback otrzyma {finished: false}.

tsx
Animated.timing({}).start(({finished}) => {
  /* completion callback */
});

Korzystanie z natywnego sterownika​

Używając natywnego sterownika, przesyłamy wszystkie informacje o animacji do warstwy natywnej przed jej rozpoczęciem, co pozwala kodowi natywnemu wykonać animację w wątku interfejsu użytkownika bez konieczności przechodzenia przez most (bridge) w każdej klatce. Po rozpoczęciu animacji, blokada wątku JavaScript nie wpłynie na jej działanie.

Możesz użyć natywnego sterownika, ustawiając useNativeDriver: true w konfiguracji animacji. Więcej informacji znajdziesz w przewodniku Animacje.

Komponenty animowalne​

Tylko animowalne komponenty mogą być animowane. Te unikalne komponenty magicznie wiążą animowane wartości z właściwościami, wykonują ukierunkowane aktualizacje natywne, aby uniknąć kosztów procesu renderowania i rekonsyliacji Reacta w każdej klatce. Dodatkowo obsługują czyszczenie przy odmontowaniu, dzięki czemu są bezpieczne domyślnie.

Animated eksportuje następujące animowalne komponenty przy użyciu powyższego opakowania:

  • Animated.Image

  • Animated.ScrollView

  • Animated.Text

  • Animated.View

  • Animated.FlatList

  • Animated.SectionList

Komponowanie animacji​

Animacje można także łączyć w złożone sekwencje za pomocą funkcji kompozycyjnych:

Animacje można także łączyć w łańcuchy, ustawiając toValue jednej animacji jako inną wartość Animated.Value. Szczegóły w przewodniku Śledzenie wartości dynamicznych.

Domyślnie, jeśli jedna animacja zostanie zatrzymana lub przerwana, wszystkie pozostałe w grupie również zostaną zatrzymane.

Łączenie animowanych wartości​

Możesz łączyć dwie animowane wartości poprzez dodawanie, odejmowanie, mnożenie, dzielenie lub modulo, tworząc nową animowaną wartość:

Interpolacja​

Funkcja interpolate() pozwala mapować zakresy wejściowe na różne zakresy wyjściowe. Domyślnie ekstrapoluje krzywą poza podane zakresy, ale można też ograniczyć wartość wyjściową. Wykorzystuje interpolację liniową, ale obsługuje też funkcje wygładzania.

Więcej o interpolacji w przewodniku Animacje.

Obsługa gestów i innych zdarzeń​

Gesty (np. przesuwanie lub przewijanie) i inne zdarzenia można bezpośrednio mapować na animowane wartości za pomocą Animated.event(). Składnia opiera się na mapowaniu strukturalnym, co pozwala wyodrębniać wartości ze złożonych obiektów zdarzeń. Pierwszy poziom to tablica umożliwiająca mapowanie wielu argumentów, zawierająca zagnieżdżone obiekty.

Np. przy obsłudze gestów poziomego przewijania, aby zmapować event.nativeEvent.contentOffset.x na scrollX (Animated.Value):

tsx
 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

Dokumentacja

Metody​

Gdy używana jest wartość ValueXY zamiast Value, każda opcja konfiguracji może być wektorem w formie {x: ..., y: ...} zamiast skalarem.

decay()​

tsx
static decay(value, config): CompositeAnimation;

Animuje wartość od prędkości początkowej do zera z uwzględnieniem współczynnika tłumienia.

Konfiguracja jest obiektem, który może zawierać następujące opcje:

  • velocity: Prędkość początkowa. Wymagane.

  • deceleration: Współczynnik tłumienia. Domyślnie 0.997.

  • isInteraction: Określa czy animacja tworzy "uchwyt interakcji" w InteractionManager. Domyślnie true.

  • useNativeDriver: Używa natywnego sterownika, gdy true. Wymagane.

timing()​

tsx
static timing(value, config): CompositeAnimation;

Animuje wartość wzdłuż krzywej czasowej z wygładzaniem. Moduł Easing zawiera wiele predefiniowanych krzywych lub możesz użyć własnej funkcji.

Konfiguracja jest obiektem, który może zawierać następujące opcje:

  • duration: Czas trwania animacji (ms). Domyślnie 500.

  • easing: Funkcja wygładzająca definiująca krzywą animacji. Domyślnie Easing.inOut(Easing.ease).

  • delay: Rozpoczęcie animacji po opóźnieniu (milisekundy). Domyślnie 0.

  • isInteraction: Określa czy animacja tworzy "uchwyt interakcji" w InteractionManager. Domyślnie true.

  • useNativeDriver: Używa natywnego sterownika, gdy true. Wymagane.

spring()​

tsx
static spring(value, config): CompositeAnimation;

Animuje wartość zgodnie z analitycznym modelem sprężyny opartym na tłumionym oscylatorze harmonicznym. Śledzi stan prędkości tworząc płynne przejścia podczas aktualizacji toValue i może być łączony w sekwencje.

Konfiguracja jest obiektem z następującymi opcjami.

Uwaga: Można zdefiniować tylko jedną z par: bounciness/speed, tension/friction lub stiffness/damping/mass, ale nie więcej niż jedną:

Opcje friction/tension lub bounciness/speed odpowiadają modelowi sprężyny w Facebook Pop, Rebound i Origami.

  • friction: Kontroluje "sprężystość"/przesterowanie. Domyślnie 7.

  • tension: Kontroluje prędkość. Domyślnie 40.

  • speed: Kontroluje szybkość animacji. Domyślnie 12.

  • bounciness: Kontroluje sprężystość. Domyślnie 8.

Podanie parametrów stiffness/damping/mass powoduje, że Animated.spring używa analitycznego modelu sprężyny opartego na równaniach ruchu tłumionego oscylatora harmonicznego. To zachowanie jest dokładniejsze i bliższe fizyce dynamiki sprężyn, naśladując implementację CASpringAnimation w iOS.

  • stiffness: Współczynnik sztywności sprężyny. Domyślnie 100.

  • damping: Określa tłumienie ruchu sprężyny spowodowane tarciem. Domyślnie 10.

  • mass: Masa obiektu przymocowanego do końca sprężyny. Domyślnie 1.

Pozostałe opcje konfiguracyjne:

  • velocity: Początkowa prędkość obiektu przymocowanego do sprężyny. Domyślnie 0 (obiekt w spoczynku).

  • overshootClamping: Określa czy sprężyna powinna być ograniczona bez odbijania. Domyślnie false.

  • restDisplacementThreshold: Próg przemieszczenia od stanu spoczynku poniżej którego sprężyna uznawana jest za nieruchomą. Domyślnie 0.001.

  • restSpeedThreshold: Prędkość (w pikselach na sekundę) przy której sprężyna uznawana jest za nieruchomą. Domyślnie 0.001.

  • delay: Rozpoczęcie animacji po opóźnieniu (milisekundy). Domyślnie 0.

  • isInteraction: Określa czy animacja tworzy "uchwyt interakcji" w InteractionManager. Domyślnie true.

  • useNativeDriver: Używa natywnego sterownika, gdy true. Wymagane.

add()​

tsx
static add(a: Animated, b: Animated): AnimatedAddition;

Tworzy nową animowaną wartość będącą sumą dwóch animowanych wartości.

subtract()​

tsx
static subtract(a: Animated, b: Animated): AnimatedSubtraction;

Tworzy nową animowaną wartość będącą różnicą pierwszej i drugiej animowanej wartości.

divide()​

tsx
static divide(a: Animated, b: Animated): AnimatedDivision;

Tworzy nową animowaną wartość będącą ilorazem pierwszej i drugiej animowanej wartości.

multiply()​

tsx
static multiply(a: Animated, b: Animated): AnimatedMultiplication;

Tworzy nową animowaną wartość będącą iloczynem dwóch animowanych wartości.

modulo()​

tsx
static modulo(a: Animated, modulus: number): AnimatedModulo;

Tworzy nową wartość Animated będącą (nieujemną) wartością modulo podanej wartości Animated

diffClamp()​

tsx
static diffClamp(a: Animated, min: number, max: number): AnimatedDiffClamp;

Tworzy nową wartość Animated ograniczoną między dwiema wartościami. Wykorzystuje różnicę między ostatnimi wartościami, więc nawet jeśli wartość jest daleko od granic, zacznie się zmieniać, gdy wartość ponownie zacznie się zbliżać (value = clamp(value + diff, min, max)).

Przydatne np. przy zdarzeniach przewijania, aby pokazać pasek nawigacyjny podczas przewijania w górę i ukryć go przy przewijaniu w dół.

delay()​

tsx
static delay(time: number): CompositeAnimation;

Rozpoczyna animację po podanym opóźnieniu.

sequence()​

tsx
static sequence(animations: CompositeAnimation[]): CompositeAnimation;

Uruchamia tablicę animacji w kolejności, czekając na zakończenie każdej przed rozpoczęciem następnej. Jeśli aktualnie działająca animacja zostanie zatrzymana, kolejne animacje nie zostaną uruchomione.

parallel()​

tsx
static parallel(
  animations: CompositeAnimation[],
  config?: ParallelConfig
): CompositeAnimation;

Uruchamia wszystkie animacje w tablicy jednocześnie. Domyślnie, jeśli jedna animacja zostanie zatrzymana, zatrzymają się wszystkie. Można to zmienić za pomocą flagi stopTogether.

stagger()​

tsx
static stagger(
  time: number,
  animations: CompositeAnimation[]
): CompositeAnimation;

Animacje w tablicy mogą działać równolegle (nakładając się), ale uruchamiane są sekwencyjnie z kolejnymi opóźnieniami. Przydatne do efektów następujących po sobie.

loop()​

tsx
static loop(
  animation: CompositeAnimation[],
  config?: LoopAnimationConfig
): CompositeAnimation;

Zapętla daną animację w sposób ciągły - po osiągnięciu końca resetuje się i zaczyna od początku. Działa bez blokowania wątku JS, jeśli animacja potomna ma ustawione useNativeDriver: true. Dodatkowo, pętle mogą uniemożliwiać komponentom opartym na VirtualizedList renderowanie kolejnych wierszy podczas animacji. Można to naprawić, przekazując isInteraction: false w konfiguracji animacji potomnej.

Konfiguracja jest obiektem, który może zawierać następujące opcje:

  • iterations: Liczba powtórzeń animacji. Domyślnie -1 (nieskończona).

event()​

tsx
static event(
  argMapping: Mapping[],
  config?: EventConfig
): (...args: any[]) => void;

Pobiera tablicę mapowań i wyodrębnia wartości z każdego argumentu, a następnie wywołuje setValue na wynikach mapowania. Np.

tsx
onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
  {listener: (event: ScrollEvent) => console.log(event)}, // Optional async listener
)}
 ...
onPanResponderMove: Animated.event(
  [
    null, // raw event arg ignored
    {dx: this._panX},
  ], // gestureState arg
  {
    listener: (
      event: GestureResponderEvent,
      gestureState: PanResponderGestureState
    ) => console.log(event, gestureState),
  } // Optional async listener
);

Konfiguracja jest obiektem, który może zawierać następujące opcje:

  • listener: Opcjonalny asynchroniczny słuchacz.

  • useNativeDriver: Używa natywnego sterownika, gdy true. Wymagane.

forkEvent()​

jsx
static forkEvent(event: AnimatedEvent, listener: Function): AnimatedEvent;

Zaawansowane imperatywne API do nasłuchiwania animowanych zdarzeń przekazywanych przez właściwości. Pozwala dodać nowy słuchacz JavaScript do istniejącego AnimatedEvent. Jeśli animatedEvent jest słuchaczem JavaScript, połączy oba słuchacze w jeden, a jeśli animatedEvent jest null/undefined, przypisze słuchacz JavaScript bezpośrednio. Używaj wartości bezpośrednio, gdzie to możliwe.

unforkEvent()​

jsx
static unforkEvent(event: AnimatedEvent, listener: Function);

start()​

tsx
static start(callback?: (result: {finished: boolean}) => void);

Animacje są uruchamiane przez wywołanie start() na animacji. start() przyjmuje callback ukończenia, który zostanie wywołany, gdy animacja się zakończy lub gdy animacja zakończyła się, ponieważ wywołano na niej stop() przed jej zakończeniem.

Parametry:

NameTypeRequiredDescription
callback(result: {finished: boolean}) => voidNoFunction that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish

Animacje uruchamiane są przez wywołanie start() na animacji. start() przyjmuje funkcję zwrotną ukończenia, która zostanie wywołana po zakończeniu animacji lub gdy animacja zakończy się z powodu wywołania stop() przed jej ukończeniem.

tsx
Animated.timing({}).start(({finished}) => {
  /* completion callback */
});

stop()​

tsx
static stop();

Zatrzymuje wszystkie działające animacje.

reset()​

tsx
static reset();

Zatrzymuje wszystkie działające animacje i resetuje wartość do oryginalnej.

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

Value​

Standardowa klasa wartości do sterowania animacjami. Zazwyczaj inicjalizowana jako useAnimatedValue(0); lub new Animated.Value(0); w komponentach klasowych.

Więcej o API Animated.Value można przeczytać na osobnej stronie.

ValueXY​

Klasa wartości 2D do sterowania animacjami 2D, takimi jak gesty przeciągania.

Więcej informacji o API Animated.ValueXY znajdziesz na osobnej stronie.

Interpolation​

Eksportowane do użytku typu Interpolation w Flow.

Node​

Eksportowane dla ułatwienia sprawdzania typów. Wszystkie animowane wartości pochodzą z tej klasy.

createAnimatedComponent​

Umożliwia animowanie dowolnego komponentu Reacta. Używane do tworzenia Animated.View itp.

attachNativeEvent​

Imperatywne API do dołączania animowanej wartości do zdarzenia na widoku. Jeśli to możliwe, zaleca się używanie Animated.event z useNativeDriver: true.