Strumenti open source di stato e animazione per React e React Native. Tre pacchetti mirati che funzionano dal primo import e crescono solo quanto ti serve.
I componenti leggono lo stesso valore senza Provider, action o reducer. Si ri-renderizzano solo quando cambia la loro selezione, e salvataggio e ripristino avvengono esattamente quando lo dici tu.
Premi un pulsante da una delle due parti. Entrambi i pannelli leggono lo stesso valore di restate() e cambiano insieme; il badge della spedizione ascolta solo una selezione.
Usa su React DOM i timing, spring e interpolate che conosci da React Native Animated. Un valore guida lo stile di molti elementi, senza render di React a ogni frame.
Il cursore cambia un solo Value. Posizione, rotazione, dimensione e angoli di tutte le dodici forme derivano da lì. Premi la molla, poi afferra il cursore a metà movimento.
Numeri che scorrono, un’evidenziazione che si sposta, liste che muovono solo ciò che è cambiato, sheet e azioni con lo swipe. Passa i tuoi dati — senza provider né chiamate di configurazione — su React e React Native.
Scegli un periodo: MotionHighlight ci si sposta, MotionNumber scorre, ProgressRing si riempie e MotionList muove solo le righe cambiate.
OggiQuesta settimanaQuesto mese
Visite
1,284
Home
Prezzi
Docs
Blog
Dati di esempio
02 · Ensemble
Un colpo.Tutto si muove.
Questo palco è costruito con Animated. Un solo Value con l’avanzamento dello scroll dirige insieme posizione, rotazione, scala e opacità di 48 forme.
01
Risuonare
Punti sparsi si raccolgono negli anelli di un gong.
02
Dividersi
L’anello si divide in tre e prende il colore di ogni strumento.
03
Prendere forma
Diventano i collegamenti dello stato, la traiettoria del movimento e i pilastri del coro.
04
A tempo
Tutto si allinea e cade sullo stesso battito.
progress
03 · Principi
Piccolo,dall’inizio alla fine.
Inizia con un import
Nessun provider avvolgente né configurazione globale all’inizio. Aggiungi funzionalità solo quando la tua app le chiede.
Solo ciò che serve
Vengono aggiornati solo i componenti la cui selezione è cambiata, gli elementi che usano un valore e le righe che si sono spostate.
Responsabile fino in fondo
Il movimento interrotto riparte da ciò che è sullo schermo, e iscrizioni e animazioni vengono rilasciate quando il loro proprietario sparisce.
Tipizzato e documentato
Ogni pacchetto include le dichiarazioni TypeScript, e la documentazione è disponibile in 39 lingue.
04 · Il nome
Kkwaenggwari,il gong che dà il via alla banda.
Si pronuncia “kuèng-guà-ri”. Nel pungmul coreano chi suona il kkwaenggwari (꽹과리) in testa detta il tempo a tutto l’ensemble. I nostri strumenti puntano allo stesso: piccoli ma chiari, perché tutta la tua app vada a tempo.
kkwaenggwariKkwaenggwari prende il nome dal kkwaenggwari (꽹과리), un piccolo gong coreano suonato con una mazza. Il suo suono chiaro e brillante ha ispirato il nome di questi piccoli strumenti open source.
