Des outils open source d’état et d’animation pour React et React Native. Trois paquets ciblés qui fonctionnent dès le premier import et ne grandissent qu’autant que nécessaire.
Partagé avec un hook.Enregistré quand vous le décidez.
Les composants lisent la même valeur sans Provider, actions ni reducers. Ils ne se re-rendent que lorsque leur sélection change, et l’enregistrement comme la restauration ont lieu exactement quand vous le demandez.
Appuyez sur un bouton de chaque côté. Les deux panneaux lisent la même valeur restate() et changent ensemble ; le badge de livraison n’écoute qu’une sélection.
Utilisez sur React DOM les timing, spring et interpolate que vous connaissez de React Native Animated. Une valeur pilote le style de nombreux éléments, sans rendu React à chaque image.
Le curseur ne modifie qu’une seule Value. La position, la rotation, la taille et les coins des douze formes en découlent. Lancez le ressort, puis attrapez le curseur en plein mouvement.
Chiffres qui défilent, surlignage qui se déplace, listes qui n’animent que ce qui a changé, panneaux et actions au balayage. Passez vos données — sans provider ni appel de configuration — sur React et React Native.
Chiffres, onglets, listes et panneaux
Le même import sur le web et en natif
Une nouvelle saisie repart de ce qui est à l’écran
Choisissez une période : MotionHighlight s’y déplace, MotionNumber défile, ProgressRing se remplit et MotionList ne déplace que les lignes qui ont changé.
Aujourd’huiCette semaineCe mois-ci
Visites
1,284
Accueil
Tarifs
Docs
Blog
Données d’exemple
02 · Ensemble
Un coup.Tout bouge.
Cette scène est construite avec Animated. Une seule Value, qui contient la progression du défilement, dirige à la fois la position, la rotation, l’échelle et l’opacité de 48 formes.
01
Résonner
Des points épars se rassemblent en anneaux de gong.
02
Se diviser
L’anneau se divise en trois et prend la couleur de chaque outil.
03
Prendre forme
Ils deviennent les liens de l’état, la trajectoire du mouvement et les piliers du chœur.
04
Battre
Tout s’aligne et tombe sur le même temps.
progress
03 · Principes
Petit,jusqu’au bout.
Commencer par un import
Pas de provider englobant ni de configuration globale au départ. Ajoutez des capacités seulement quand votre application les demande.
Seulement ce qui en a besoin
Seuls les composants dont la sélection a changé, les éléments qui utilisent une valeur et les lignes qui ont bougé sont mis à jour.
Responsable jusqu’au bout
Un mouvement interrompu repart de ce qui est à l’écran, et les abonnements comme les animations sont libérés quand leur propriétaire disparaît.
Typé et documenté
Chaque paquet inclut des déclarations TypeScript, et la documentation se lit en 39 langues.
04 · Le nom
Kkwaenggwari,le gong qui lance l’ensemble.
Prononcez « kouèng-gwa-ri ». Dans le pungmul coréen, le joueur de kkwaenggwari (꽹과리) en tête donne le rythme à tout l’ensemble. Nos outils visent la même chose : petits mais nets, pour que toute votre application batte la même mesure.
kkwaenggwariKkwaenggwari tire son nom du kkwaenggwari (꽹과리), un petit gong coréen que l’on frappe avec une mailloche. Son timbre clair et éclatant a inspiré le nom de ces petits outils open source.
