Jérémy Magrin
Développeur React Native Senior · Expo · iOS & Android
C'est exactement ce qui me coûte le plus cher
Une transition fluide, un écran qui se déplie, un bouton qui répond au doigt
C'est ce qui fait qu'une app sent le premium
Sauf que personne ne compte l'addition
App & Flow a benchmarké les 4 façons d'animer en RN, sur 500 vues animées
Leur lib react-native-ease pousse tout sur les APIs natives, 0,6ms par frame
Les mêmes anims en Reanimated Shared Values, 8,3ms, un facteur 10 pour la même chose
La règle est simple
ease pour les fade, slide, scale et les enter/exit
Reanimated dès que tu touches au geste, aux layout animations ou aux interpolations qui s'enchaînent
Et même en Reanimated t'as de la marge
Le mode CSS coûte un tiers de moins que les Shared Values, un flag expérimental enlève encore autant
Regarde le P99 plutôt que la moyenne, ton frame moyen passe large mais c'est le pic à 9,6ms qui fait sentir le lag
Avant de la virer parce qu'elle rame, lance un build release
Le debug gonfle le coût par frame de 2 à 3x, souvent t'optimises un lag qui existe pas
Le vrai coût, celui que personne ne facture
- des jours sur une transition que l'user swipe en 300ms
- chaque animation c'est un état de plus à garder synchro
- la batterie qui fond pendant que le GPU tourne à fond
- ton parallax qui file la nausée à ceux qui coupent tout
10 ans de React Native pour comprendre un truc tout con
La meilleure animation c'est souvent celle que t'as pas codée
Anime les 3 moments qui comptent
Tue les 20 autres
Et toi, t'animes tout, ou tu ships la feature ?
