Les applications mobiles utilisent souvent des animations pour égayer 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 matière d’animation. Vous pouvez ensuite les appliquer pour créer des animations de meilleure qualité et plus fluides pour votre prochaine application mobile React Native.
Animations React Native
La bibliothèque React Native Animated est le moyen le plus populaire de créer des animations dans une application React Native.
Tout comme la bibliothèque d’animation 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. 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 de savoir comment les appliquer dans le contexte du développement d’applications mobiles. Voici donc quelques principes clés à comprendre et à noter lors de la création de vos animations.
Ajuster la durée de l’animation
Les animations doivent être fluides et naturelles pour l’utilisateur. Cet objectif peut dépendre de la manière dont vous gérez la durée des animations que vous créez.
La durée fait référence au temps nécessaire à l’exécution complète d’une animation. Par défaut, les animations dans React Native ont une durée de 500 millisecondes, mais vous pouvez les ajuster pour qu’elles soient plus rapides ou plus lentes.
Vous devez ajuster la durée de l’animation en fonction de sa complexité. Une animation simple, telle qu’un fondu, peut n’avoir besoin que d’une courte durée, alors qu’une animation plus complexe, telle qu’un slide-in avec un effet de rebond, peut avoir besoin de durer plus longtemps, pour être naturelle et fluide.
Avec la Animation.timing() Si vous utilisez la méthode de synchronisation, vous pouvez créer une animation temporelle personnalisée pour répondre à vos besoins.
Voici un exemple de la façon d’ajouter une durée personnalisée à une simple animation de fondu :
import React, { useRef } from 'react';
import { Animated, View } from 'react-native';
const FadeInView = (props) => {
const fadeAnim = useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 2000, // set custom duration
useNativeDriver: true,
}
).start();
}, [fadeAnim]);
return (
<Animated.View
style={{
...props.style,
opacity: fadeAnim,
}}
>
{props.children}
</Animated.View>
);
}
export default function App() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</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 par une durée plus longue lors de vos premières expériences. Une durée plus longue vous donnera plus de temps pour ajuster la fonction d’assouplissement et affiner votre animation. Vous pourrez toujours réduire la durée plus tard, une fois que vous serez satisfait de l’effet global.
Utiliser les fonctions d’assouplissement
Les animations simples peuvent avoir une vitesse constante, mais varier la vitesse peut créer des effets plus naturels. Les fonctions d’assouplissement contrôlent le taux de changement d’une animation dans le temps. Elles peuvent faire en sorte que vos animations démarrent lentement, puis s’accélèrent. Le réglage de différentes vitesses au fur et à mesure de la progression de l’animation peut créer une animation fluide et attrayante.
Voici un exemple d’utilisation d’une fonction d’assouplissement :
import React, { useRef } from 'react';
import { Animated, View } from 'react-native';
const FadeInView = (props) => {
const fadeAnim = useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 2000,
easing: Animated.easeOut, // use easing function here
useNativeDriver: true,
}
).start();
}, [fadeAnim]);
return (
<Animated.View
style={{
...props.style,
opacity: fadeAnim,
}}
>
{props.children}
</Animated.View>
);
}
export default function App() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fade In</Text>
</FadeInView>
</View>
);
}
Ce code utilise la fonction Animé.easeOut fonction permettant de contrôler la vitesse de changement de l’opacité d’une image animée. Voir. Les Animé.timing() utilise la fonction ease-out pour faire passer progressivement l’opacité de 0 à 1 sur une durée de deux secondes, afin de donner l’impression que l’animation ralentit lorsqu’elle arrive à son terme.
Vous pouvez utiliser différents types de fonctions d’assouplissement pour rendre vos animations plus fluides, notamment les fonctions ease-in, ease-out et ease-in-out.
Le choix de la bonne fonction d’assouplissement 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 elles et de voir ce qui fonctionne le mieux pour vos cas d’utilisation spécifiques.
Les images-clés aident à réaliser des animations complexes
Les images clés sont des marqueurs qui vous permettent de repérer 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 si vous marquiez des points dans le temps pour guider l’animation.
Vous pouvez utiliser un ensemble d’images clés pour définir des valeurs spécifiques pour toute propriété que vous souhaitez animer. Cela vous permet de contrôler le temps et le comportement, en particulier pour les animations complexes telles que celles qui impliquent le mouvement d’un personnage.
Pour créer une animation d’images clés de base, vous devez spécifier les images clés entre lesquelles vous souhaitez animer et la durée totale de l’animation.
Par exemple, supposons que vous souhaitiez animer un carré depuis une position de départ (0, 0) jusqu’à une position de fin (100, 100) sur une période d’une seconde.
Vous pouvez créer un tableau d’images clés comme suit :
const keyframes = [
{ 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’animation, avec une durée de 1 000 millisecondes, afin de créer une animation fluide entre les images clés.
Dans certaines bibliothèques, vous devrez également spécifier une fonction d’assouplissement pour contrôler la progression de l’animation. Cependant, vous pouvez appliquer l’idée de base consistant à spécifier des images clés et une durée à la plupart des bibliothèques d’animation.
Tirer parti de l’appareil grâce à 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 exploitant le matériel graphique de l’appareil, vous pouvez décharger l’unité centrale d’une partie du travail de traitement et obtenir ainsi 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 thread JavaScript.
L’accélération matérielle n’est pas forcément disponible sur tous les appareils. Il est donc important de tester vos animations sur une variété d’appareils réels afin de garantir les meilleures performances.
