Jak stworzyć ciągłą animację w React Native za pomocą Animated.loop()

Jedną z kluczowych cech Animated API React Native jest Animated.loop() metoda, za pomocą której można tworzyć ciągłą animację, która powtarza się w nieskończoność.

Przyjrzymy się, jak używać metody Animated.loop() do tworzenia ciągłych animacji w React Native i nauczymy się dostosowywać i ulepszać te animacje.

Zrozumienie metody Animated.loop().

Aby użyć metody Animated.loop(), musisz najpierw utworzyć plik Ożywiony. Wartość obiekt. Ta wartość jest aktualizowana w każdej klatce pętli animacji i będzie używana do animowania komponentu docelowego.

Kiedyś animowany. Obiekt Value został utworzony, można go przekazać do metody Animated.loop() wraz z obiektem konfiguracji animacji, który definiuje zachowanie animacji.

Ten obiekt konfiguracji może zawierać właściwości, takie jak czas trwania, złagodzenie, I opóźnienie, które określają zachowanie animacji.

Zapętlanie animacji

Domyślnie metoda Animated.loop() tworzy nieskończoną pętlę animacji, co oznacza, że ​​animacja będzie się powtarzać, dopóki nie zostanie ręcznie zatrzymana. Można jednak określić czas trwania pętli animacji, ustawiając plik iteracje właściwość w obiekcie konfiguracji animacji.

Poniższy przykład pokazuje, jak użyć Animation.loop() do utworzenia zapętlonej animacji obrotu:

import Reaguj, { useState, useEffect } z'reagować';
import { Arkusz stylów, widok, animacja, obraz } z„reaguj natywnie”;
eksportdomyślnyfunkcjonowaćAplikacja() {
konst [spinValue] = useState(nowy Ożywiony. Wartość(0));
 użyjEfekt(() => {
konst spin = spinValue.interpolate({
 zakres wejściowy: [0, 1],
 zakres wyjściowy: [„0 stopni”, „360 stopni”],
 });
 animowana pętla (
 animowany.czas(
 spinWartość,
 {
 cenić: 1,
 czas trwania: 2000,
 użyjNativeDriver: PRAWDA,
 }
 )
 ).początek();
 }, []);
powrót (

 styl={{ szerokość: 200, wysokość: 200, przekształcać: [{ obracać się: spinValue }] }}
 źródło={{ ur: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst style = StyleSheet.create({
 pojemnik: {
 przewód: 1,
 elementy wyrównania: 'Centrum',
 uzasadnij Treść: 'Centrum',
 },
});

W tym przykładzie tworzymy Animated. Obiekt wartości o nazwie spinWartość i ustawić jego wartość początkową na 0. Następnie dzwonimy do pętla() metoda na Animated.timing() obiekt, który jako argument przyjmuje stan spinValue. Obiekt Animated.timing() opisuje postęp animacji w czasie, w tym przypadku obraca obraz o 360 stopni.

Aby ustawić czas trwania pętli, przeszliśmy a czas trwania właściwość do obiektu Animated.timing(), która określi, jak długo animacja będzie działać przed zapętleniem. Ustawiliśmy właściwość duration na 2000, co oznacza 2 sekundy przed ponownym uruchomieniem.

Możesz także ustawić, ile razy animacja powinna się zapętlić, przekazując iteracje właściwość do metody loop().

Załóżmy na przykład, że chcesz, aby animacja zapętliła się pięć razy przed zatrzymaniem. W takim przypadku możesz wywołać Animated.loop() za pomocą iteracje: 5. Jeśli chcesz, aby animacja zapętlała się w nieskończoność, możesz pominąć iteracje nieruchomość całkowicie.

Używając Animation.loop(), ustawiając jego czas trwania i poprawnie zastosować styl CSS do zwróconego obiektu widoku, możesz tworzyć płynne zapętlone animacje w React Native.

Praca ze złożoną animacją

Praca ze złożoną animacją nie jest tak prosta jak praca z pojedynczą animacją. Zwykle wymagają trochę więcej pracy, aby upewnić się, że zachowują się zgodnie z oczekiwaniami.

Oto dwie wskazówki, które pomogą Ci zapętlić złożone animacje w React Native:

1. Podziel animację na mniejsze części

Możesz podzielić złożone animacje na mniejsze, prostsze animacje, które można zapętlać indywidualnie. Na przykład złożoną animację, która obejmuje zarówno obrót, jak i translację, można podzielić na dwie osobne animacje, które będą zapętlane niezależnie. Dzieląc animację na mniejsze części, możesz uprościć kod i ułatwić jego obsługę.

2. Użyj metody Animated.sequence().

The Animated.sequence() Metoda pozwala na uruchamianie sekwencji animacji jedna po drugiej. Ta metoda może tworzyć złożone zapętlone animacje poprzez łączenie pojedynczych zapętlonych animacji. Możesz użyćAnimated.sequence(), aby utworzyć animację, która najpierw zanika na obrazie, obraca go, a następnie zanika, powtarzając całą sekwencję po zakończeniu.

Te wskazówki dostarczone wraz z ogólne wskazówki dotyczące optymalizacji aplikacji React Native pomogłoby Ci stworzyć wydajne zapętlone animacje.

Eksperymentuj z animacją

Zapętlone animacje w React Native mogą być potężnym narzędziem do tworzenia bardziej angażującego i dynamicznego doświadczenia użytkownika. Powinieneś eksperymentować z różnymi technikami tworzenia zapętlonych animacji, aby uzyskać atrakcyjną wizualnie i wydajną animację.