Le développement mobile exige de porter une grande attention à l’UX et l’UI des applications. Au cours de ce Matters Meetup, Nicolas Djambazian, architecte développeur chez BAM, présente différentes façons d’utiliser les animations en React Native à travers une série d’exemples.
Tout d’abord il est important de garder à l’esprit quelques concepts clefs. Si les animations attirent l'œil et embellissent votre app, faites attention à la surcharge ! Favorisez l’animation de composants clefs pour capter l’attention de l’utilisateur. De plus, privilégiez des animations pas trop longues (300ms étant un bon compromis) afin de ne pas lasser l’utilisateur au fil du temps.
Les exemples techniques suivants explorent différentes API d’animation pour React Native utilisées dans différents contextes.
LayoutAnimation permet de générer une animation en un rien de temps à partir de styles sans avoir rien à faire, il suffit de l’intégrer dans le cycle de vie du composant ! Parfait pour des effets de transitions mais oblige à réutiliser le même composant afin que ce dernier puisse s’adapter.
Pour encore plus d’animations, React Native Animatable fournit une grande quantité d’animations préconstruites facilement intégrables.
La première question à se poser est : y a-t-il des composants partagés entre les pages ? Si ce n’est pas le cas, alors votre gestionnaire de pagination (ex: react-navigation) vous offre des possibilités de personnalisation.
S’il existe un composant partagé cela devient plus compliqué car il est impossible de déplacer un composant d’une page à une autre. Une solution possible est de jouer sur la taille du composant en l’agrandissant mais cela oblige à perdre la pagination. D’autres solutions existent mais demande un développement plus complexe, il est donc déconseillé d’utiliser des animations dans ce cas.
Animated est l’api de base pour les animations en React Native. Elle est plus complexe à prendre en main que les libs précédentes mais elle offre de très larges possibilités d’animation.
Tips : essayez d’animer tout ce qui n’impacte pas le layout ! N’animer pas de des propriétés telles que height, margin, top… mais privilégiez plutôt les transform, scale, translate, etc.
Utilisez des listeners afin de surveiller le scroll de l'utilisateur et contrôlez votre animation de la même manière que dans l’exemple précédent.
Tips : préférez les refs natives aux states afin d’éviter d’avoir trop de rerender
Développée par AirBnb, Lottie est une lib très facile d’utilisation permettant d’intégrer de superbes animations très rapidement ! Seul bémol : son fonctionnement se fonde sur l’utilisation d’un JSON descriptif de l’animation, uniquement exportable depuis Adobe After Effect.
