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 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

Parlons-en

Un projet en tête ?

Réponse garantie en moins d'une heure, et trente minutes d'audit offertes par téléphone.

M'écrireMaltLinkedIn

Emailcontact@magrin.fr

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

LocalisationParis, France · full remote