Jérémy Magrin
Senior React Native developer · Expo · iOS & Android
Je me suis fait un petit onboarding l'autre jour, juste pour le plaisir de coder un truc beau
3 écrans
Une fusée qui devient un éclair, qui devient un coeur
Ce sont les mêmes 2000 particules qui volent d'une forme à l'autre pendant que tu swipes
Elles changent de couleur en route, arrivent en vague, et ne sont jamais complètement immobiles
Tu relâches ton doigt au milieu du swipe, la ScrollView snap toute seule et les particules suivent
Le seul vrai défi c'est de rester fluide avec 2000 points qui bougent en même temps
Alors l'animation tourne entièrement sur le UI thread
- une ScrollView pagée pilote la progression via un scroll handler worklet
- Skia recalcule les 2000 transforms par frame, Reanimated y injecte la progression du scroll
- l'Atlas API de Skia dessine les 2000 sprites en un seul draw call
Aucune frame d'animation ne passe par le thread JS, donc zéro lag même en gavant l'écran
Pas de moteur de jeu, pas de lib d'onboarding toute faite
Juste Skia, Reanimated et un peu de trigo
C'est ce genre de détail qui sépare une app premium d'une app cheap
Je détaille la recette en commentaire