Hoe u beter reageert op native animaties

Mobiele apps maken vaak gebruik van animatie om de gebruikerservaring te verlevendigen. Maar het maken van hoogwaardige animaties kan een uitdaging zijn.

Gelukkig zijn er concepten en technieken die je kunt gebruiken om je animatievaardigheden te verbeteren. U kunt ze vervolgens toepassen om betere, vloeiendere animaties te maken voor uw volgende React Native mobiele applicatie.

Reageer op inheemse animaties

De Reageer native geanimeerd bibliotheek is de meest populaire manier om animaties te maken in een React Native-app.

Net als React's ingebouwde animatiebibliotheek, maakt de geanimeerde API deel uit van de op JavaScript gebaseerde geanimeerde bibliotheek. Animated biedt een reeks klassen en methoden waarmee u vloeiende en vloeiende animaties kunt maken. Er zijn verschillende andere geweldige opties voor het maken van React Native-animaties, zoals Reanimated.

Het maken van goede animaties in React Native gaat echter niet alleen over het gebruik van de juiste bibliotheek of het instellen van de juiste eigenschappen. Het gaat ook om het begrijpen van de principes van animatie en hoe deze toe te passen in de context van de ontwikkeling van mobiele apps. Dus hier zijn een paar belangrijke principes die u moet begrijpen en in acht moet nemen bij het maken van uw animaties.

Animatieduur aanpassen

Animaties moeten vloeiend en natuurlijk aanvoelen voor een gebruiker. Het bereiken van dit kan afhangen van hoe u omgaat met de duur van bepaalde animaties die u maakt.

Duur verwijst naar de hoeveelheid tijd die nodig is om een ​​animatie volledig uit te voeren. Animaties in React Native hebben standaard een duur van 500 milliseconden, maar je kunt ze aanpassen om sneller of langzamer te gaan.

U moet de duur van de animatie aanpassen aan de complexiteit ervan. Een eenvoudige animatie, zoals een fade-in, heeft misschien maar een korte duur nodig, terwijl een complexere animatie, zoals een slide-in met een bounce-effect, misschien langer nodig heeft om natuurlijk en vloeiend aan te voelen.

Met de Animatie.timing() methode, kunt u een aangepaste getimede animatie maken die aan uw behoeften voldoet.

Hier is een voorbeeld van hoe je een aangepaste duur kunt toevoegen aan een eenvoudige fade-in-animatie:

importeren Reageer, { useRef } van'Reageer';
importeren { Geanimeerd, bekijken } van'reageren-native';
const FadeInView = (rekwisieten) => {
const fadeAnim = gebruikRef(nieuw Geanimeerd. Waarde(0)).huidig; 
 Reageer.useEffect(() => {
 Geanimeerde.timing(
 vervagenAnim,
 {
 waarderen: 1,
 duur: 2000, // stel aangepaste duur in
 gebruik NativeDriver: WAAR,
 }
 ).begin();
 }, [fadeAnim]);
opbrengst (
 stijl={{
 ...rekwisieten.stijl,
 dekking: fadeAnim,
 }}
 >
 {rekwisieten.kinderen}
 </Animated.View>
 );
}
exporterenstandaardfunctieapp() {
opbrengst (
buigen: 1, alignItems: 'centrum', rechtvaardigenInhoud: 'centrum'}}>
breedte: 250, hoogte: 50, Achtergrond kleur: 'poederblauw'}}>
lettertypegrootte: 28, tekstAlign: 'centrum', marge: 10}}>Vervagen in</Text>
 </FadeInView>
 </View>
 );
}

Bij het kiezen van een duur voor uw animatie is het belangrijk om de juiste balans te vinden tussen snelheid en vloeiendheid.

Probeer te beginnen met een langere duur wanneer u voor het eerst experimenteert. Een langere duur geeft u meer tijd om de versoepelingsfunctie aan te passen en uw animatie te verfijnen. Je kunt de duur altijd later verkorten als je eenmaal tevreden bent met het algehele effect.

Gebruik Easing-functies

Eenvoudige animaties kunnen een constante snelheid hebben, maar het variëren van de snelheid kan meer natuurlijke effecten creëren. Easing-functies regelen de mate van verandering van een animatie in de loop van de tijd. Ze kunnen ervoor zorgen dat uw animaties langzaam beginnen en vervolgens versnellen. Door verschillende snelheden in te stellen naarmate de animatie vordert, kan een vloeiende en boeiende animatie ontstaan.

Neem dit voorbeeld van het gebruik van een versoepelingsfunctie:

importeren Reageer, { useRef } van'Reageer';
importeren { Geanimeerd, bekijken } van'reageren-native';
const FadeInView = (rekwisieten) => {
const fadeAnim = gebruikRef(nieuw Geanimeerd. Waarde(0)).huidig; 
 Reageer.useEffect(() => {
 Geanimeerde.timing(
 vervagenAnim,
 {
 waarderen: 1,
 duur: 2000,
 versoepeling: Animated.easeOut, // gebruik hier de versoepelingsfunctie
 gebruik NativeDriver: WAAR,
 }
 ).begin();
 }, [fadeAnim]);
opbrengst (
 stijl={{
 ...rekwisieten.stijl,
 dekking: fadeAnim,
 }}
 >
 {rekwisieten.kinderen}
 </Animated.View>
 );
}
exporterenstandaardfunctieapp() {
opbrengst (
buigen: 1, alignItems: 'centrum', rechtvaardigenInhoud: 'centrum'}}>
breedte: 250, hoogte: 50, Achtergrond kleur: 'poederblauw'}}>
lettertypegrootte: 28, tekstAlign: 'centrum', marge: 10}}>Infaden</Text>
 </FadeInView>
 </View>
 );
}

Deze code maakt gebruik van de Geanimeerde.easeOut functie om de veranderingssnelheid van de dekking van een animatie te regelen Weergave. De Geanimeerde.timing() De methode gebruikt de functie Ease-out om de dekking geleidelijk te veranderen van 0 naar 1 over een periode van twee seconden, zodat de animatie lijkt te vertragen wanneer deze het einde bereikt.

U kunt verschillende soorten versoepelingsfuncties gebruiken om uw animaties er vloeiender uit te laten zien, waaronder 'ease-in', 'ease-out' en 'ease-in-out'.

Het kiezen van de juiste versnellingsfunctie kan een groot verschil maken in de waargenomen kwaliteit van de animaties van uw toepassing. Het is de moeite waard om wat tijd te nemen om ermee te spelen en te zien wat het beste werkt voor uw specifieke gebruikssituaties.

Keyframes helpen bij complexe animaties

Sleutelframes zijn markeringen waarmee u momenten in uw animatie kunt aangeven waarop u wijzigingen wilt aanbrengen in eigenschappen zoals positie, schaal of rotatie. Het is als het markeren van punten in de tijd om de animatie te begeleiden.

U kunt een set gebruiken keyframes om specifieke waarden in te stellen voor elke eigenschap je wilt animeren. Dit helpt je de timing en het gedrag te beheersen, vooral voor complexe animaties, zoals animaties met karakterbewegingen.

Als u een standaard keyframe-animatie wilt maken, moet u de keyframes opgeven waartussen u een animatie wilt maken en de totale duur.

Stel dat u een vierkant wilt animeren van een startpositie van (0, 0) naar een eindpositie van (100, 100) over een periode van één seconde.

U kunt een reeks keyframes als volgt maken:

const sleutelframes = [
 { X: 0, j: 0 },
 { X: 50, j: 50 },
 { X: 100, j: 100 },
];

In dit geval zijn er drie keyframes: één aan het begin van de animatie, één in het midden en één aan het einde. U kunt deze reeks keyframes vervolgens doorgeven aan uw animatiebibliotheek, samen met een duur van 1000 milliseconden, om een ​​vloeiende animatie tussen de keyframes te maken.

In sommige bibliotheken moet u ook een versnellingsfunctie opgeven om te bepalen hoe de animatie verloopt. U kunt echter het basisidee van het specificeren van hoofdframes en duur toepassen op de meeste animatiebibliotheken.

Profiteer van het apparaat met hardwareversnelling

Hardwareversnelling kan een krachtig hulpmiddel zijn om de prestaties van uw React Native-animaties te optimaliseren. Door gebruik te maken van de grafische hardware van het apparaat, kunt u een deel van het verwerkingswerk ontlasten van de CPU en op zijn beurt vloeiendere, responsievere animaties realiseren.

De GPU van het apparaat zal dan de geanimeerde waarden en stijlen native verwerken, in plaats van dat de JavaScript-thread dit moet doen.

Hardwareversnelling is mogelijk niet op alle apparaten beschikbaar, dus het is belangrijk om uw animaties op verschillende echte apparaten te testen om de beste prestaties te garanderen.