Dowiedz się, jak animować komponenty w React Native w łatwy i lepszy sposób.

Animacje mogą tchnąć życie w aplikację, czyniąc ją bardziej wciągającą i intuicyjną dla użytkownika. Ale jeśli dopiero zaczynasz przygodę z animacjami React Native, rozpoczęcie może być nieco zniechęcające.

Poznaj animacje React Native i dowiedz się, jak zacząć tworzyć piękne, płynne animacje.

Jak działają animacje Basic React Native?

Animacje mogą tworzyć płynne przejścia między różnymi ekranami lub elementami. Mogą wyróżniać informacje lub przekazywać informacje zwrotne na temat działań użytkownika. Animacje mogą być proste lub złożone i mogą wykorzystywać różne techniki, takie jak ruchoma grafika 2D lub 3D.

Przenośność React Native sprawia, że ​​warto z niego korzystać jeśli kierujesz reklamy na kilka platform. Jedną z jego najmocniejszych cech jest możliwość tworzenia pięknych animacji dla aplikacji mobilnych.

Możesz animować obiekt React Native, po prostu zmieniając stan pozycji żądanego komponentu.

Na przykład:

instagram viewer 
import Reaguj, { useState, useEffect } z'reagować';
import { Widok, arkusz stylów } z„reaguj natywnie”;
konst Aplikacja = () => {
// Zainicjuj stan, aby śledzić pozycję pudełka
konst [polePozycja, ustawPozycjaPola] = użyjStan(0);


// Użyj haka useEffect, aby aktualizować pozycję pola co 1 sekundę
 użyjEfekt(() => {
konst interwał = setInterval(() => {
// Zaktualizuj pozycję pola, dodając 10 do bieżącej pozycji
 setBoxPosition(prevPozycja => prevPozycja + 10);
 }, 1000);


// Zwróć funkcję czyszczącą, aby wyczyścić interwał, gdy komponent
// odmontowuje
powrót() => clearInterval (interwał);
 }, []);


// Ustaw pozycję ramki za pomocą zmiennej stanu w stylu wbudowanym
konst styl pudełka = {
 przekształć: [{ przetłumacz Y: pozycja pola }]
 };


powrót (


 </View>
 );
};


konst style = StyleSheet.create({
 pojemnik: {
 przewód: 1,
 elementy wyrównania: 'Centrum',
 uzasadnij Treść: 'Centrum',
 },
 skrzynka: {
 szerokość: 100,
 wysokość: 100,
 kolor tła: 'niebieski',
 },
});
eksportdomyślny Aplikacja;

Ten kod renderuje niebieskie pole, które co sekundę przesuwa się w dół. Animacja działa przy użyciu UżyjEfekt hook, aby utworzyć licznik czasu, który aktualizuje plik polePozycja zmienna stanu co 1 sekundę.

Chociaż może to działać w niektórych sytuacjach, nie jest to najlepsza opcja. Aktualizacje stanu w React Native działają asynchronicznie, ale animacje polegają na synchronicznych aktualizacjach stanu, aby działać poprawnie. Implementacja animacji asynchronicznie spowoduje, że aktualizacje stanu nie będą natychmiast odzwierciedlane w renderowanych danych wyjściowych komponentu, co zakłóci synchronizację animacji.

Jest to kilka bibliotek animacji, takich jak Ożywiony biblioteka, Reaguj-rodzimy-reanimowany, I reagują-natywnie-animowalne do tworzenia wydajnych animacji w React Native. Każda z tych bibliotek animacji rozwiązuje problem asynchronicznych aktualizacji stanu i jest idealnie idealna.

React Native Animated API

Animated to API udostępniane przez React Native. Możesz go użyć do tworzenia płynnych animacji, które reagują na interakcje użytkownika lub zmiany stanu.

Animated API umożliwia tworzenie animowanych wartości, które można interpolować i mapować na różne właściwości stylu komponentów. Następnie można aktualizować te wartości w miarę upływu czasu, korzystając z różnych metod animacji. Style twoich komponentów będą następnie aktualizowane wraz ze zmianą animowanych wartości, co spowoduje płynne animacje.

Animated działa bardzo dobrze z systemem układu React Native. Z tego powodu Twoje animacje będą odpowiednio zintegrowane z resztą interfejsu użytkownika, aby uzyskać jeszcze lepszy wygląd.

Aby rozpocząć korzystanie z Animated w projekcie React Native, musisz zaimportować plik Ożywiony moduł z „reaguj natywnie” do swojego kodu:

import { Animowane } z„reaguj natywnie”;

Po zaimportowaniu Animated możesz rozpocząć tworzenie animacji. Aby to zrobić, najpierw utwórz animowaną wartość, którą będziesz manipulować podczas animacji:

konst wartość animowana = nowy Ożywiony. Wartość(0);

The Ożywiony. Wartość jest klasą w React Native Animated API, która reprezentuje zmienną wartość. Możesz zainicjować go wartością początkową, a następnie aktualizować go w miarę upływu czasu, korzystając z różnych metod animacji udostępnianych przez Animated API, takich jak .wyczucie czasu(), .wiosna(), I .rozkład(), określając czas trwania animacji, funkcję wygładzania i inne parametry.

Animowana wartość jest podobna do wartości stanu w komponencie React.

Możesz zainicjować plik Ożywiony. Wartość z początkową wartością stanu komponentu, a następnie aktualizować ją w miarę upływu czasu za pomocą ustaw stan metoda.

Na przykład masz komponent, który ma wartość stanu liczyć, która reprezentuje liczbę kliknięć tego przycisku przez użytkownika.

Możesz utworzyć Ożywiony. Wartość i zainicjuj go wartością stanu początkowego liczyć:

konst Aplikacja = () => {
konst [liczba, ustawLiczba] = użyjStan(0);
konst wartość animowana = nowy Ożywiony. Wartość (liczba);
};

Następnie za każdym razem, gdy liczyć aktualizacje wartości stanu, możesz zaktualizować animowana wartość zbyt:

konst przycisk uchwytuKliknij = () => {
 setCounter (liczba + 1);
 Animated.timing (animatedValue, {
 doWartość: liczba + 1,
 czas trwania: 500,
 użyjNativeDriver: PRAWDA
 }).początek();
};

Ten przykład aktualizuje animowana wartość używając Animated.timing() metoda za każdym razem, gdy użytkownik kliknie przycisk. The animowana wartość steruje animacją i zmienia wartość w ciągu 500 milisekund.

Odnosząc się Ożywiony. Wartość do wartości stanu w ten sposób możesz tworzyć animacje reagujące na zmiany stanu komponentu.

Teraz, gdy już wiesz, jak manipulować animowaną wartością, możesz przystąpić do interpolacji animowanej wartości i odwzorowania jej na właściwość stylu komponentu za pomocą Animated.interpolate() metoda.

Na przykład:

konst krycie = animowanaValue.interpolate({
 zakres wejściowy: [0, 1],
 zakres wyjściowy: [0, 1]
});
powrót (

 {/* Twoja zawartość komponentu */}
 </View>
);

Spowoduje to utworzenie animacji, która stopniowo zanika w Pogląd składnika, gdy animowana wartość zmienia się z 0 na 1.

Zrozumienie typów animacji

Zrozumienie typów animacji i sposobu ich działania jest ważne dla tworzenia dobrych animacji.

Używając użyjNativeDriver Opcja z Animowanym poprawia wydajność. Ta opcja umożliwia odciążenie animacji do natywnego wątku interfejsu użytkownika. Może znacznie poprawić wydajność, zmniejszając ilość wymaganego przetwarzania JavaScript.

Jednak nie wszystkie typy animacji obsługują natywny sterownik. Próba użycia natywnego sterownika z animacjami, które wymagają zmiany koloru lub układu, może spowodować nieoczekiwane zachowanie.

Ponadto animacje obejmujące złożone sekwencje mogą powodować znaczne problemy z wydajnością na urządzeniach o ograniczonej mocy obliczeniowej lub pamięci. Te deficyty wydajności mogą być również zauważalne, jeśli twój projekt React Native działa w niższej wersji, która tego nie robi obsługują silnik Hermesa.

Zrozumienie mocnych stron i ograniczeń różnych typów animacji może pomóc w wyborze odpowiedniego podejścia do danego przypadku użycia.

Poczuj się komfortowo dzięki natywnym animacjom React

Animacje to potężne narzędzie do tworzenia angażujących i dynamicznych interfejsów użytkownika w aplikacjach React Native. Animated API zapewnia elastyczny i wydajny sposób tworzenia zarówno prostych, jak i złożonych animacji sekwencji.

Mimo to ważne jest, aby wziąć pod uwagę wpływ animacji na wydajność i wybrać odpowiednie podejście i bibliotekę do zastosowania w danej sytuacji.