Az Animated.spring() módszer használata dinamikus animációkhoz a React Native alkalmazásban

A React Native animált API-könyvtára segítségével dinamikus, gördülékeny animációkat hozhat létre kis erőfeszítéssel.

Tanulja meg, hogyan hozhat létre rugószerű hatású animációkat, majd tudja meg, hogyan szabályozhatja azok időtartamát és sebességét, és hogyan alkalmazhatja őket valós helyzetekben.

Mik azok a dinamikus animációk?

A dinamikus animációk olyan animációk, ahol az animált objektumok mozgása nincs előre programozva. Ezeket a felhasználói interakciókra vagy a környezet változásaira válaszul indíthatja el. A technika a legnépszerűbb videojáték animáció, közösségi média alkalmazások vagy az interaktív média egyéb formái.

A dinamikus animációk magával ragadóbb és vonzóbb élményt nyújthatnak a felhasználók számára, mivel kiszámíthatatlan és reagáló mozgásokat tesznek lehetővé, amelyek több tényezőtől függően változhatnak.

A mobilalkalmazások animációi az évek során egyre összetettebbé váltak. A React Native alapértelmezett animált API-ja továbbfejlesztette ezeket a bonyolultságokat. A

Animált.tavasz() Az API által biztosított metódus képes animálni a React Native objektumokat, dinamikus hatást létrehozva.

Az animáció vezérlése

Amikor a Animált.tavasz() módszerrel, rendelkeznie kell az animáció felett, hogy biztosítsa a kívánt viselkedést. Az Animated egy sor módszert kínál a React Native animációk kézi vezérlésére és manipulálására.

Az egyik ilyen módszer az állj meg(), ami miatt az animáció leáll az aktuális értékén. Ez a módszer akkor hasznos, ha törölni kell egy animációt, vagy vissza kell állítania a kezdeti állapotba.

Például:

const stopAnimation = () => {
 position.stop(érték => {
 position.setValue(0);
 });
};

Vegye figyelembe, hogyan használhatja a érték beállítása() módszerrel állíthatja vissza a pozíció értékét a kezdeti állapotába 0.

Egy másik elérhető módszer az Visszaállítás(), amely visszaállítja az animációt a kezdeti állapotába. Ez a módszer akkor hasznos, ha újra kell indítania egy animációt.

Valós alkalmazások

Megismerheti a gyakorlati felhasználást Animált.tavasz() módszer egyszerű animáció elkészítésével. Egy kerek labda a felületre esik, amikor a felhasználó interakcióba lép vele, majd közvetlenül visszapattan a levegőbe. Már rendelkeznie kell egy react Native projekttel, amellyel dolgozni tud.

Először hozzon létre egy állapotváltozót a labda helyzetének nyomon követéséhez:

import React, { useState } tól től'reagál';
import { Animált } tól től"react-native";
const App = () => {
const [pozíció, setPosition] = useState(új Élénk. Érték(0));

Visszatérés (
átalakítani: [{ lefordítaniY: pozíció }] }}>
 {/* Labdakomponens itt */}
 </Animated.View>
 );
};

Használat Élénk. Érték nevű állapotváltozó létrehozásához pozíció amely követi a labda függőleges helyzetét. Csomagolja be a Kilátás komponens be Élénk. Kilátás így animációkat is alkalmazhatsz rá.

Ezután hozza létre az animációs funkciót, amely a labda leesését és felpattanását eredményezi:

const startAnimation = () => {
 Animated.spring (pozíció, {
 értékel: 300,
 súrlódás: 1,
 feszültség: 10,
 useNativeDriver: igaz,
 }).Rajt(() => {
 Animated.spring (pozíció, {
 értékel: 0,
 súrlódás: 1,
 feszültség: 10,
 useNativeDriver: igaz,
 }).Rajt();
 });
};

Használat Animált.tavasz() olyan animáció létrehozásához, amely a golyót a 0-ás kezdeti pozícióból a 300-as végső pozícióba mozgatja. Adja meg súrlódás és feszültség értékek a labda visszapattanó hatásának szabályozására beállítás közben useNativeDriver nak nek igaz a teljesítmény javítására.

Ezután implementálhatja a kódot az animáció elindításához, amikor a felhasználó interakcióba lép a labdával:

Visszatérés (

átalakítani: [{ lefordítaniY: pozíció }] }}>
 {/* Labdakomponens itt */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Ez a kód becsomagolja a Élénk. Kilátás komponens be Érinthető Visszajelzés nélkül hogy az animáció akkor induljon el, amikor a felhasználó megnyomja a labdát. Az animációt akkor is elindíthatja, amikor a komponens felcsatolódik a következő meghívásával startAnimation() funkció a React belsejében useEffect() horog.

Ezzel a kóddal egy zuhanó labda animációt kell létrehoznia Animált.tavasz().

Dinamikus animációk a React Native alkalmazásban

Látta már, hogyan valósíthat meg zuhanó golyós animációt az Animated.spring() segítségével, de számos más módon is használhatja dinamikus animációk létrehozására.

Például az Animated.spring() segítségével olyan animációkat hozhat létre, amelyek más, fizikai alapú mozgásokat szimulálnak, például lengő vagy forgó tárgyakat.

Az Animated.spring() és más animációs funkciók, például az Animated.timing() vagy az Animated.sequence() kombinálásával összetett és zökkenőmentes animációkat hozhat létre, amelyek javítják a felhasználói élményt.