Skip to content
All notes

2000 particules qui se transforment sans jank, pendant qu'aucune frame d'animation ne passe par le thread JS

Jérémy Magrin

Senior React Native developer · Expo · iOS & Android

in
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

Read on LinkedIn

Get in touch

Got a project in mind?

Guaranteed reply within the hour, plus a free thirty-minute audit call.

Email meMaltLinkedIn

Emailcontact@magrin.fr

Phone+33 6 73 12 19 30

Based inParis, France · fully remote