Circa 5 minuti · React 16.8+ · React DOM

Inizia

Dall’installazione ai gesti e al movimento di entrata e uscita in sei passi. Ogni passo è un piccolo componente funzionante.

1
Installa
Animated non ha dipendenze a runtime. React 16.8+ è una peer dependency.
L’entry del pacchetto è marcata 'use client'. Nell’App Router di Next.js un layout del server può renderizzare AnimatedProvider; usa gli hook e Animated.<tag> dentro i Client Component.
$
```
npm install @kkwaenggwari/animated
```
L’import @kkwaenggwari/animated viene risolto nel tuo editor.
Muovi il tuo primo valore
useAnimatedValue(1) possiede un numero vivo per tutta la vita del componente. Mettilo direttamente in style: diventa una variabile CSS, quindi React non si renderizza mentre cambia.
timing(value, { toValue, duration }).start() lo muove. Premere di nuovo a metà strada riparte dall’opacità attuale.
Preparazione dell’esempio…
Il riquadro svanisce e ricompare, e una seconda pressione a metà strada inverte la corsa da dove si trova.
Ricava molti output da un valore
interpolate trasforma il valore in lunghezze, angoli o numeri. Senza easing diventa un calc() esatto della stessa variabile, quindi cinque corsie costano quanto una.
Intervalli di input diversi sullo stesso valore creano una cascata senza cinque animazioni separate.
Preparazione dell’esempio…
Una pressione muove cinque corsie a cascata; cambiare lo sfalsamento cambia solo gli intervalli.
Descrivi una destinazione
Animated.button renderizza un normale pulsante. seed è il primo frame, pose è dove deve trovarsi adesso e tempo è come ci arriva.
Quando pose cambia a metà corsa, l’elemento curva da dove si trova sullo schermo, conservando la velocità con una molla.
Preparazione dell’esempio…
Cliccare le card in fretta non ne fa mai saltare una.
Collega l’input
input(ref, moveInput(...)) scrive le coordinate del puntatore nei valori. follow(target, source) fa inseguire un valore da un altro con una molla.
Tutto ciò che è dichiarato in una factory di useAnimated appartiene al componente: listener e molle si fermano allo smontaggio o quando cambia una dipendenza.
Preparazione dell’esempio…
La card si inclina verso il puntatore e torna a posto quando il puntatore se ne va.
Anima l’uscita
Rimuovere un figlio React normalmente lo rimuove all’istante. Animated.Keep conserva i figli con key finché la loro pose depart non termina.
wait renderizza i nuovi figli solo dopo che tutte le uscite sono terminate.
Preparazione dell’esempio…
I messaggi scartati escono con il movimento scelto prima di sparire.

Hai il modello completo

Valori, destinazioni, input e uscite condividono gli stessi controller, le stesse regole di interruzione e la stessa pulizia. Le guide approfondiscono ciascuno.

Installa

Muovi il tuo primo valore

Ricava molti output da un valore

Descrivi una destinazione

Collega l’input

Anima l’uscita

Hai il modello completo