De methode Animated.spring() gebruiken voor dynamische animaties in React Native

De geanimeerde API-bibliotheek van React Native kan u helpen om met weinig moeite dynamische, vloeiende animaties te maken.

Leer hoe u animaties kunt maken met een lente-achtig effect, ontdek vervolgens hoe u de duur en snelheid ervan kunt regelen en hoe u ze kunt toepassen in scenario's uit de echte wereld.

Wat zijn dynamische animaties?

Dynamische animaties zijn animaties waarbij de bewegingen van geanimeerde objecten niet voorgeprogrammeerd zijn. U kunt ze starten als reactie op gebruikersinteractie of wijzigingen in de omgeving. De techniek is het populairst in animatie van videogames, toepassingen voor sociale media of andere vormen van interactieve media.

Dynamische animaties kunnen gebruikers een meer meeslepende en boeiende ervaring bieden, omdat het onvoorspelbare en responsieve bewegingen mogelijk maakt die kunnen veranderen op basis van verschillende factoren.

Animaties in mobiele apps zijn door de jaren heen steeds complexer geworden. De standaard geanimeerde API van React Native is geavanceerd om aan deze complexiteiten tegemoet te komen. De

Geanimeerd.spring() methode die de API biedt, kan React Native-objecten animeren, waardoor een dynamisch effect ontstaat.

Controle van de animatie

Bij gebruik van de Geanimeerd.spring() methode, moet u controle hebben over de animatie om ervoor te zorgen dat deze zich gedraagt ​​zoals u wenst. Animated biedt een reeks methoden om uw React Native-animaties handmatig te besturen en te manipuleren.

Een van die methoden is stop(), waardoor de animatie stopt bij de huidige waarde. Deze methode is handig wanneer u een animatie moet annuleren of terug moet zetten naar de oorspronkelijke staat.

Bijvoorbeeld:

const stopAnimatie = () => {
 positie.stop(waarde => {
 position.setValue(0);
 });
};

Let op hoe u de waarde instellen() methode om de positiewaarde terug te zetten naar de begintoestand van 0.

Een andere methode die voor u beschikbaar is, is opnieuw instellen(), waarmee de animatie wordt teruggezet naar de oorspronkelijke staat. Deze methode is handig wanneer u een animatie opnieuw moet starten.

Toepassingen in de echte wereld

U kunt een praktisch gebruik van de Geanimeerd.spring() methode door een eenvoudige animatie te bouwen. Een ronde bal valt op een oppervlak wanneer een gebruiker ermee communiceert en stuitert daarna direct terug de lucht in. Je zou al een React Native-project moeten hebben waarmee je kunt werken.

Maak eerst een statusvariabele om de positie van de bal te volgen:

importeren Reageer, { useState } van'Reageer';
importeren { Geanimeerd } van'reageren-native';
const App= () => {
const [positie, setPositie] = useState(nieuw Geanimeerd. Waarde(0));

opbrengst (
transformeren: [{ vertalenY: positie }] }}>
 {/* Kogelcomponent hier */}
 </Animated.View>
 );
};

Gebruik Geanimeerd. Waarde om een ​​toestandsvariabele te maken met de naam positie die de verticale positie van de bal zal volgen. Wikkel de Weergave onderdeel in Geanimeerd. Weergave zodat u er animaties op kunt toepassen.

Maak vervolgens de animatiefunctie die ervoor zorgt dat de bal valt en stuitert:

const beginAnimatie = () => {
 Animated.spring (positie, {
 waarderen: 300,
 wrijving: 1,
 spanning: 10,
 gebruik NativeDriver: WAAR,
 }).begin(() => {
 Animated.spring (positie, {
 waarderen: 0,
 wrijving: 1,
 spanning: 10,
 gebruik NativeDriver: WAAR,
 }).begin();
 });
};

Gebruik Geanimeerd.spring() om een ​​animatie te maken die de bal van de beginpositie van 0 naar een eindpositie van 300 zal verplaatsen. Specificeer wrijving En spanning waarden om het bounce-effect van de bal tijdens het instellen te regelen gebruik NativeDriver naar WAAR om de prestaties te verbeteren.

U kunt vervolgens de code implementeren om de animatie te activeren wanneer een gebruiker interactie heeft met de bal:

opbrengst (

transformeren: [{ vertalenY: positie }] }}>
 {/* Kogelcomponent hier */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Deze code omsluit de Geanimeerd. Weergave onderdeel in AanraakbaarZonderFeedback zodat de animatie wordt geactiveerd wanneer de gebruiker op de bal drukt. U kunt de animatie ook activeren wanneer de component wordt gemount door de startAnimatie() functie binnen React's gebruikEffect() haak.

Met deze code zou je een vallende bal-animatie moeten hebben gemaakt met behulp van Geanimeerd.spring().

Dynamische animaties in React Native

Je hebt gezien hoe je een vallende bal-animatie kunt implementeren met Animated.spring(), maar er zijn veel andere manieren waarop je dynamische animaties kunt maken.

U kunt bijvoorbeeld Animated.spring() gebruiken om animaties te maken die andere op fysica gebaseerde bewegingen simuleren, zoals zwaaiende of roterende objecten.

Door Animated.spring() te combineren met andere animatiefuncties, zoals Animated.timing() of Animated.sequence(), kunt u complexe en naadloze animaties maken die de gebruikerservaring verbeteren.