Używanie metody Animated.spring() do dynamicznych animacji w React Native

Biblioteka Animated API React Native może pomóc w tworzeniu dynamicznych, płynnych animacji przy niewielkim wysiłku.

Dowiedz się, jak tworzyć animacje z efektem przypominającym wiosnę, a następnie dowiedz się, jak kontrolować ich czas trwania i szybkość oraz stosować je w rzeczywistych scenariuszach.

Czym są dynamiczne animacje?

Animacje dynamiczne to animacje, w których ruchy animowanych obiektów nie są wcześniej zaprogramowane. Możesz je uruchomić w odpowiedzi na interakcję użytkownika lub zmiany w środowisku. Technika jest najbardziej popularna w animacja gier wideo, aplikacje mediów społecznościowych lub inne formy mediów interaktywnych.

Dynamiczne animacje mogą zapewnić użytkownikom bardziej wciągające i wciągające wrażenia, ponieważ umożliwiają nieprzewidywalne i responsywne ruchy, które mogą się zmieniać w zależności od kilku czynników.

Animacje w aplikacjach mobilnych z biegiem lat stawały się coraz bardziej złożone. Domyślny animowany interfejs API React Native został udoskonalony, aby dostosować się do tych złożoności. The

animowany.wiosna() udostępniana przez API metoda może animować obiekty React Native, tworząc dynamiczny efekt.

Sterowanie animacją

Podczas korzystania z animowany.wiosna() metody, musisz mieć kontrolę nad animacją, aby upewnić się, że zachowuje się tak, jak chcesz. Animated zapewnia zestaw metod do ręcznego kontrolowania i manipulowania animacjami React Native.

Jedną z takich metod jest zatrzymywać się(), co powoduje zatrzymanie animacji na bieżącej wartości. Ta metoda jest przydatna, gdy trzeba anulować animację lub zresetować ją do stanu początkowego.

Na przykład:

konst stopAnimacja = () => {
 pozycja.stop(wartość => {
 pozycja.ustawWartość(0);
 });
};

Zwróć uwagę, jak możesz użyć ustalić wartość() metoda resetowania wartości pozycji do stanu początkowego 0.

Inną dostępną metodą jest Resetowanie(), która przywraca animację do stanu początkowego. Ta metoda jest przydatna, gdy trzeba ponownie uruchomić animację.

Aplikacje w świecie rzeczywistym

Możesz zbadać praktyczne zastosowanie animowany.wiosna() poprzez zbudowanie prostej animacji. Okrągła piłka spadnie na powierzchnię, gdy użytkownik wejdzie z nią w interakcję, a następnie odbije się z powrotem w powietrze. Powinieneś już mieć projekt natywny, z którym możesz pracować.

Najpierw utwórz zmienną stanu, aby śledzić położenie piłki:

import Reaguj, { stan użycia } z'reagować';
import { Animowane } z„reaguj natywnie”;
konst Aplikacja = () => {
konst [pozycja, setPosition] = useState(nowy Ożywiony. Wartość(0));

powrót (
przekształcać: [{ przetłumacz Y: pozycja }] }}>
 {/* Składnik kuli tutaj */}
 </Animated.View>
 );
};

Używać Ożywiony. Wartość aby utworzyć zmienną stanu o nazwie pozycja który będzie śledził pionową pozycję piłki. Zawiń Pogląd składnik w Ożywiony. Pogląd więc możesz zastosować do niego animacje.

Następnie utwórz funkcję animacji, która sprawi, że piłka spadnie i podskoczy:

konst startAnimacja = () => {
 Animated.spring (pozycja, {
 cenić: 300,
 tarcie: 1,
 napięcie: 10,
 użyjNativeDriver: PRAWDA,
 }).początek(() => {
 Animated.spring (pozycja, {
 cenić: 0,
 tarcie: 1,
 napięcie: 10,
 użyjNativeDriver: PRAWDA,
 }).początek();
 });
};

Używać animowany.wiosna() stworzyć animację, która przesunie piłkę z początkowej pozycji 0 do końcowej pozycji 300. Sprecyzować tarcie I napięcie wartości, aby kontrolować efekt odbicia piłki podczas ustawiania użyjNativeDriver Do PRAWDA aby poprawić wydajność.

Następnie możesz zaimplementować kod uruchamiający animację, gdy użytkownik wchodzi w interakcję z piłką:

powrót (

przekształcać: [{ przetłumacz Y: pozycja }] }}>
 {/* Składnik kuli tutaj */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Ten kod otacza plik Ożywiony. Pogląd składnik w Dotykowy bez informacji zwrotnej tak, aby animacja uruchamiała się, gdy użytkownik naciska piłkę. Możesz także wyzwolić animację podczas montowania komponentu, wywołując metodę startAnimacja() funkcjonować wewnątrz Reacta użyjEfektu() hak.

Za pomocą tego kodu powinieneś utworzyć animację spadającej piłki za pomocą animowany.wiosna().

Dynamiczne animacje w React Native

Widziałeś już, jak zaimplementować animację spadającej piłki za pomocą funkcji Animated.spring(), ale istnieje wiele innych sposobów jej wykorzystania do tworzenia dynamicznych animacji.

Na przykład można użyć Animated.spring() do tworzenia animacji symulujących inne ruchy oparte na fizyce, takie jak kołysanie lub obracanie obiektów.

Łącząc Animated.spring() z innymi funkcjami animacji, takimi jak Animated.timing() lub Animated.sequence(), możesz tworzyć złożone i płynne animacje, które poprawiają wrażenia użytkownika.