Comment créer de meilleures animations natives React

Les applications mobiles utilisent souvent des animations pour animer l'expérience utilisateur. Mais créer des animations de haute qualité peut être un défi.

Heureusement, il existe des concepts et des techniques que vous pouvez utiliser pour améliorer vos compétences en animation. Vous pouvez ensuite les appliquer pour créer de meilleures animations plus fluides pour votre prochaine application mobile React Native.

Réagissez aux animations natives

Le Réagir natif animé La bibliothèque est le moyen le plus populaire de créer des animations dans une application React Native.

Juste comme Bibliothèque d'animations intégrée de React, l'API Animated fait partie de la bibliothèque Animated basée sur JavaScript. Animated fournit un ensemble de classes et de méthodes qui vous permettent de créer des animations fluides et fluides. Il existe plusieurs autres options intéressantes pour créer des animations React Native, telles que Reanimated.

Cependant, créer de bonnes animations dans React Native ne consiste pas seulement à utiliser la bonne bibliothèque ou à définir les bonnes propriétés. Il s'agit également de comprendre les principes de l'animation et comment les appliquer dans le cadre du développement d'applications mobiles. Voici donc quelques principes clés à comprendre et à respecter lors de la construction de vos animations.

Ajustement de la durée de l'animation

Les animations doivent être fluides et naturelles pour l'utilisateur. La réalisation de cet objectif peut dépendre de la façon dont vous gérez la durée des animations particulières que vous créez.

La durée fait référence au temps qu'il faut pour qu'une animation s'exécute complètement. Par défaut, les animations dans React Native ont une durée de 500 millisecondes mais vous pouvez les ajuster pour aller plus vite ou plus lentement.

Vous devez ajuster la durée de l'animation en fonction de sa complexité. Une animation simple, telle qu'un fondu enchaîné, peut n'avoir besoin que d'une courte durée, tandis qu'une animation plus complexe, telle qu'un glissement avec un effet de rebond, peut avoir besoin de durer plus longtemps, pour se sentir naturelle et fluide.

Avec le Animation.timing() méthode, vous pouvez créer une animation chronométrée personnalisée pour répondre à vos besoins.

Voici un exemple d'ajout d'une durée personnalisée à une simple animation de fondu :

importer Réagissez, { useRef } depuis'réagir';
importer { Animé, Vue } depuis'réagir natif';
constante FadeInView = (accessoires) => {
constante fadeAnim = useRef(nouveau Animé. Valeur(0)).actuel; 
 React.useEffect(() => {
 Timing.animé(
 fonduAnim,
 {
 évaluer: 1,
 durée: 2000, // définir une durée personnalisée
 utiliserNativeDriver: vrai,
 }
 ).commencer();
 }, [fadeAnim]);
retour (
 style={{
 ...accessoires.style,
 opacité: fadeAnim,
 }}
 >
 {accessoires.enfants}
 </Animated.View>
 );
}
exporterdéfautfonctionApplication() {
retour (
fléchir: 1, alignItems: 'centre', JustifierContenu: 'centre'}}>
largeur: 250, hauteur: 50, Couleur de l'arrière plan: 'poudre bleue'}}>
taille de police: 28, texteAligner: 'centre', marge: 10}}> Fondu dans</Text>
 </FadeInView>
 </View>
 );
}

Lorsque vous choisissez une durée pour votre animation, il est important de trouver le bon équilibre entre vitesse et fluidité.

Essayez de commencer avec une durée plus longue lorsque vous testez pour la première fois. Une durée plus longue vous donnera plus de temps pour ajuster la fonction d'accélération et affiner votre animation. Vous pouvez toujours raccourcir la durée plus tard une fois que vous êtes satisfait de l'effet global.

Utiliser les fonctions d'accélération

Les animations simples peuvent avoir une vitesse constante, mais la variation de la vitesse peut créer des effets plus naturels. Les fonctions d'accélération contrôlent le taux de changement d'une animation dans le temps. Ils peuvent faire démarrer vos animations lentement, puis accélérer. Définir des vitesses différentes au fur et à mesure que l'animation progresse peut créer une animation fluide et attrayante.

Prenons cet exemple d'utilisation d'une fonction d'accélération :

importer Réagissez, { useRef } depuis'réagir';
importer { Animé, Vue } depuis'réagir natif';
constante FadeInView = (accessoires) => {
constante fadeAnim = useRef(nouveau Animé. Valeur(0)).actuel; 
 React.useEffect(() => {
 Timing.animé(
 fonduAnim,
 {
 évaluer: 1,
 durée: 2000,
 accélération: Animated.easeOut, // utilise la fonction d'accélération ici
 utiliserNativeDriver: vrai,
 }
 ).commencer();
 }, [fadeAnim]);
retour (
 style={{
 ...accessoires.style,
 opacité: fadeAnim,
 }}
 >
 {accessoires.enfants}
 </Animated.View>
 );
}
exporterdéfautfonctionApplication() {
retour (
fléchir: 1, alignItems: 'centre', JustifierContenu: 'centre'}}>
largeur: 250, hauteur: 50, Couleur de l'arrière plan: 'poudre bleue'}}>
taille de police: 28, texteAligner: 'centre', marge: 10}}>Apparition en fondu</Text>
 </FadeInView>
 </View>
 );
}

Ce code utilise le Animation.easeOut fonction pour contrôler le taux de changement de l'opacité d'un animé Voir. Le Timing.animé() utilisera la fonction d'accélération pour changer progressivement l'opacité de 0 à 1 sur une durée de deux secondes, pour donner l'impression que l'animation ralentit lorsqu'elle atteint sa fin.

Vous pouvez utiliser différents types de fonctions d'accélération pour rendre vos animations plus fluides, y compris l'entrée, la sortie et l'entrée.

Choisir la bonne fonction d'accélération peut faire une grande différence dans la qualité perçue des animations de votre application. Cela vaut la peine de prendre le temps de jouer avec eux et de voir ce qui fonctionne le mieux pour vos cas d'utilisation spécifiques.

Aide sur les images clés pour les animations complexes

Les images clés sont des marqueurs qui vous permettent d'identifier les moments de votre animation où vous souhaitez modifier des propriétés telles que la position, l'échelle ou la rotation. C'est comme marquer des points dans le temps pour guider l'animation.

Vous pouvez utiliser un ensemble de images clés pour définir des valeurs spécifiques pour n'importe quelle propriété vous souhaitez animer. Cela vous aide à contrôler le timing et le comportement, en particulier pour les animations complexes telles que celles impliquant des mouvements de personnages.

Pour créer une animation d'image clé de base, vous devez spécifier les images clés que vous souhaitez animer entre et la durée totale.

Par exemple, supposons que vous vouliez animer un carré d'une position de départ de (0, 0) à une position de fin de (100, 100) sur une période d'une seconde.

Vous pouvez créer un tableau d'images clés comme ceci :

constante images clés = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

Dans ce cas, il y a trois images clés: une au début de l'animation, une au milieu et une à la fin. Vous pouvez ensuite transmettre ce tableau d'images clés à votre bibliothèque d'animations, avec une durée de 1 000 millisecondes, pour créer une animation fluide entre les images clés.

Dans certaines bibliothèques, vous devrez également spécifier une fonction d'accélération pour contrôler la progression de l'animation. Cependant, vous pouvez appliquer l'idée de base de la spécification des images clés et de la durée à la plupart des bibliothèques d'animation.

Tirez parti de l'appareil avec l'accélération matérielle

L'accélération matérielle peut être un outil puissant pour optimiser les performances de vos animations React Native. En tirant parti du matériel graphique de l'appareil, vous pouvez décharger une partie du travail de traitement du processeur et, à son tour, obtenir des animations plus fluides et plus réactives.

Le GPU de l'appareil traitera alors nativement les valeurs et les styles animés, plutôt que le fil JavaScript n'ait à le faire.

L'accélération matérielle peut ne pas être disponible sur tous les appareils, il est donc important de tester vos animations sur une variété d'appareils réels pour garantir les meilleures performances.