Animer des ressorts physiques à 120 FPS sous React Native et Flutter
Maîtrisez les physiques de ressorts à 120 FPS en React Native et Flutter. Utilisez des fichiers vectoriels .exode pour éliminer toute saccade sur écran mobile.
À retenir
Garantir un affichage mobile fluide à 120 FPS constants exige de contourner les ponts JavaScript asynchrones et les interruptions du ramasse-miettes. Les bibliothèques natives d'ExodeUI pour React Native et Flutter exécutent les calculs physiques directement au niveau de la couche graphique GPU pour une réactivité instantanée sous le doigt.
Le défi des écrans mobiles 120 Hz ProMotion
Sur les écrans mobiles à 120 Hz, chaque trame ne dispose que de 8,33 millisecondes. En React Native et Flutter, recalculer des styles en JavaScript ou reconstruire des arborescences de widgets déclenche des blocages qui causent des micro-saccades perceptibles.
- Budget de 8,33 ms : Doubler le framerate de 60 à 120 FPS réduit de moitié le temps CPU disponible.
- Latence de communication : Transmettre des coordonnées à travers un pont asynchrone ralentit la réponse visuelle.
- Exécution découplée : Les calculs doivent se dérouler exclusivement sur le thread d'affichage natif.
Comment ExodeUI exécute les ressorts nativement
Les extensions mobiles d'ExodeUI envoient directement les tracés vectoriels à la GPU (Metal sous iOS, Vulkan ou Impeller sous Android). Les calculs de ressorts s'exécutent trame par trame sans repasser par le moteur JavaScript.
Exemple d'implémentation sous Flutter et React Native
L'intégration dans votre code mobile ne requiert qu'un minimum de lignes. Transmettez vos variables au widget ExodeUI pour laisser la physique native orchestrer le mouvement.
Extrait d’implémentation en production
import 'package:flutter/material.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';
class SpringCardWidget extends StatefulWidget {
const SpringCardWidget({super.key});
@override
State<SpringCardWidget> createState() => _SpringCardWidgetState();
}
class _SpringCardWidgetState extends State<SpringCardWidget> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(() => _isExpanded = !_isExpanded),
child: ExodeUICanvas(
asset: 'assets/motion/expandable_card.exode',
inputs: {'expanded': _isExpanded},
width: 320,
height: 180,
),
);
}
}