Aller au contenu
Toutes les notes

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

Jérémy Magrin

Développeur React Native Freelance Senior · 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

Lire sur LinkedIn

Pour aller plus loin

Qui écrit

J'aide startups et scale-ups à concevoir, construire et faire évoluer leurs applications mobiles iOS et Android. Je travaille au quotidien avec React Native, que je pratique depuis sa sortie en 2015, ainsi qu'avec Expo, React.js et TypeScript. J'interviens du MVP à la mise en production sur l'App Store et Google Play, jusqu'à l'optimisation fine des performances et la structuration des équipes techniques.

Expert React Native freelanceDéveloppeur Expo freelanceAudit de performance React Native

Parlons-en

Un projet en tête ?

Réponse garantie en moins d'une heure, et trente minutes d'audit offertes en visio.

M'écrireMaltLinkedIn

Emailcontact@magrin.fr

Téléphone+33 6 73 12 19 30

LocalisationParis, France · full remote