Jak tworzyć lepiej reagujące natywne animacje

Aplikacje mobilne często wykorzystują animację, aby ożywić wrażenia użytkownika. Ale tworzenie wysokiej jakości animacji może być wyzwaniem.

Na szczęście istnieją koncepcje i techniki, których możesz użyć, aby poprawić swoje umiejętności animacji. Następnie możesz je zastosować, aby stworzyć lepsze, płynniejsze animacje dla następnej aplikacji mobilnej React Native.

Reaguj na natywne animacje

The Reaguj natywną animacją biblioteka jest najpopularniejszym sposobem tworzenia animacji w aplikacji React Native.

Tak jak Wbudowana biblioteka animacji ReactAnimated API jest częścią biblioteki Animated opartej na JavaScript. Animated zapewnia zestaw klas i metod, które pozwalają tworzyć płynne i płynne animacje. Istnieje kilka innych świetnych opcji tworzenia animacji React Native, takich jak Reanimated.

Tworzenie dobrych animacji w React Native to jednak nie tylko użycie odpowiedniej biblioteki czy ustawienie odpowiednich właściwości. Chodzi również o zrozumienie zasad animacji i ich zastosowanie w kontekście tworzenia aplikacji mobilnych. Oto kilka kluczowych zasad, które należy zrozumieć i zapamiętać podczas tworzenia animacji.

Dostosowanie czasu trwania animacji

Animacje powinny być płynne i naturalne dla użytkownika. Osiągnięcie tego może zależeć od tego, jak poradzisz sobie z czasem trwania poszczególnych tworzonych animacji.

Czas trwania odnosi się do czasu potrzebnego do pełnego uruchomienia animacji. Domyślnie animacje w React Native mają czas trwania 500 milisekund, ale możesz je dostosować, aby były szybsze lub wolniejsze.

Czas trwania animacji należy dostosować do jej złożoności. Prosta animacja, taka jak zanikanie, może wymagać tylko krótkiego czasu trwania, podczas gdy bardziej złożona animacja, taka jak wsuwanie z efektem odbijania, może wymagać dłuższego czasu, aby była naturalna i płynna.

z Animacja.timing() możesz utworzyć niestandardową animację czasową dostosowaną do swoich potrzeb.

Oto przykład, jak dodać niestandardowy czas trwania do prostej animacji narastania:

import Reaguj, { useRef } z'reagować';
import { Animowane, Zobacz } z„reaguj natywnie”;
konst FadeInView = (rekwizyty) => {
konst fadeAnim = useRef(nowy Ożywiony. Wartość(0)).aktualny; 
 React.useEffect(() => {
 animowany.czas(
 zniknąćAnim,
 {
 cenić: 1,
 czas trwania: 2000, // ustaw niestandardowy czas trwania
 użyjNativeDriver: PRAWDA,
 }
 ).początek();
 }, [zanikAnim]);
powrót (
 styl={{
... styl rekwizytów,
 krycie: fadeAnim,
 }}
 >
 {rekwizyty.dzieci}
 </Animated.View>
 );
}
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (
przewód: 1, wyrównaj elementy: 'Centrum', uzasadnij treść: 'Centrum'}}>
szerokość: 250, wysokość: 50, kolor tła: „pudrowy błękit”}}>
rozmiar czcionki: 28, tekstWyrównaj: 'Centrum', margines: 10}}>Zanikanie W</Text>
 </FadeInView>
 </View>
 );
}

Wybierając czas trwania animacji, ważne jest, aby zachować właściwą równowagę między szybkością a płynnością.

Spróbuj zacząć od dłuższego czasu trwania podczas pierwszego eksperymentu. Dłuższy czas daje więcej czasu na dostosowanie funkcji wygładzania i dopracowanie animacji. Zawsze możesz później skrócić czas trwania, gdy będziesz zadowolony z ogólnego efektu.

Użyj funkcji wygładzania

Proste animacje mogą mieć stałą prędkość, ale zmiana szybkości może dać bardziej naturalny efekt. Funkcje dynamiki kontrolują tempo zmian animacji w czasie. Mogą spowolnić animacje, a następnie przyspieszyć. Ustawienie różnych prędkości w miarę postępu animacji może stworzyć płynną i wciągającą animację.

Weźmy ten przykład użycia funkcji wygładzania:

import Reaguj, { useRef } z'reagować';
import { Animowane, Zobacz } z„reaguj natywnie”;
konst FadeInView = (rekwizyty) => {
konst fadeAnim = useRef(nowy Ożywiony. Wartość(0)).aktualny; 
 React.useEffect(() => {
 animowany.czas(
 zniknąćAnim,
 {
 cenić: 1,
 czas trwania: 2000,
 wygładzanie: Animated.easeOut, // użyj tutaj funkcji wygładzania
 użyjNativeDriver: PRAWDA,
 }
 ).początek();
 }, [zanikAnim]);
powrót (
 styl={{
... styl rekwizytów,
 krycie: fadeAnim,
 }}
 >
 {rekwizyty.dzieci}
 </Animated.View>
 );
}
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (
przewód: 1, wyrównaj elementy: 'Centrum', uzasadnij treść: 'Centrum'}}>
szerokość: 250, wysokość: 50, kolor tła: „pudrowy błękit”}}>
rozmiar czcionki: 28, tekstWyrównaj: 'Centrum', margines: 10}}>Zanikanie</Text>
 </FadeInView>
 </View>
 );
}

Ten kod używa Animated.easeOut funkcja do kontrolowania tempa zmian krycia animowanego Pogląd. The Animated.timing() Metoda użyje funkcji wygładzania, aby stopniowo zmieniać krycie od 0 do 1 w ciągu dwóch sekund, aby animacja wydawała się zwalniać, gdy dotrze do końca.

Możesz użyć różnych typów funkcji wygładzania, aby animacje wyglądały bardziej płynnie, w tym wygładzania, wygładzania i wygładzania.

Wybór odpowiedniej funkcji wygładzania może mieć duży wpływ na postrzeganą jakość animacji aplikacji. Warto poświęcić trochę czasu, aby się nimi pobawić i zobaczyć, co najlepiej sprawdza się w konkretnych przypadkach użycia.

Klatki kluczowe pomagają w złożonych animacjach

Klatki kluczowe to znaczniki, które pozwalają wskazać momenty w animacji, w których chcesz wprowadzić zmiany we właściwościach, takich jak położenie, skala lub obrót. To jak zaznaczanie punktów w czasie, aby poprowadzić animację.

Możesz skorzystać z zestawu klatki kluczowe, aby ustawić określone wartości dla dowolnej właściwości chcesz animować. Pomaga to kontrolować czas i zachowanie, zwłaszcza w przypadku złożonych animacji, takich jak te, które obejmują ruch postaci.

Aby utworzyć podstawową animację klatki kluczowej, musisz określić klatki kluczowe, pomiędzy którymi chcesz animować, oraz całkowity czas trwania.

Załóżmy na przykład, że chcesz animować kwadrat od pozycji początkowej (0, 0) do pozycji końcowej (100, 100) w ciągu jednej sekundy.

Możesz utworzyć tablicę klatek kluczowych w następujący sposób:

konst klatki kluczowe = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

W tym przypadku są trzy klatki kluczowe: jedna na początku animacji, jedna w środku i jedna na końcu. Następnie możesz przekazać tę tablicę klatek kluczowych do biblioteki animacji wraz z czasem trwania wynoszącym 1000 milisekund, aby utworzyć płynną animację między klatkami kluczowymi.

W niektórych bibliotekach konieczne będzie również określenie funkcji wygładzania, aby sterować postępem animacji. Możesz jednak zastosować podstawową ideę określania klatek kluczowych i czasu trwania do większości bibliotek animacji.

Skorzystaj z urządzenia z akceleracją sprzętową

Akceleracja sprzętowa może być potężnym narzędziem do optymalizacji wydajności animacji React Native. Wykorzystując sprzęt graficzny urządzenia, możesz odciążyć procesor, a tym samym uzyskać płynniejsze i bardziej responsywne animacje.

Procesor graficzny urządzenia będzie następnie natywnie przetwarzał animowane wartości i style, zamiast konieczności wykonywania tego przez wątek JavaScript.

Akceleracja sprzętowa może nie być dostępna na wszystkich urządzeniach, dlatego ważne jest, aby przetestować animacje na różnych rzeczywistych urządzeniach, aby zapewnić najlepszą wydajność.