Circa 5 minute · React 16.8+ · React DOM

Primii pași

De la instalare la gesturi și mișcări de intrare și ieșire în șase pași. Fiecare pas este o mică componentă funcțională.

1
Instalare
Animated nu are dependențe la rulare. React 16.8+ este o dependență peer.
Punctul de intrare al pachetului este marcat cu 'use client'. În Next.js App Router, un layout de server poate randa AnimatedProvider; folosiți hook-urile și Animated.<tag> în Client Components.
$
```
npm install @kkwaenggwari/animated
```
Importul @kkwaenggwari/animated se rezolvă în editor.
Mișcați o primă valoare
useAnimatedValue(1) deține un număr viu pe toată durata componentei. Puneți-l direct în style: devine o variabilă CSS, așa că React nu randează cât se schimbă.
timing(value, { toValue, duration }).start() îl mișcă. O nouă apăsare la jumătatea drumului pornește de la opacitatea curentă.
Se pregătește exemplul…
Cadrul se estompează și revine, iar o a doua apăsare la jumătatea drumului inversează direcția de unde se află.
Derivați multe ieșiri dintr-o singură valoare
interpolate transformă valoarea în lungimi, unghiuri sau numere. Fără easing devine un calc() exact al aceleiași variabile, așa că cinci benzi costă cât una.
Intervale de intrare diferite ale aceleiași valori creează o cascadă fără cinci animații separate.
Se pregătește exemplul…
O apăsare mișcă cinci benzi în cascadă; schimbarea dispersiei schimbă doar intervalele.
Descrieți destinația
Animated.button randează un buton obișnuit. seed este primul cadru, pose este unde trebuie să fie acum, iar tempo este cum ajunge acolo.
Când pose se schimbă la jumătatea drumului, elementul virează de unde e pe ecran și, cu arc, își păstrează viteza.
Se pregătește exemplul…
Clicurile rapide pe file nu fac niciodată vreuna să sară.
Conectați intrarea
input(ref, moveInput(...)) scrie coordonatele cursorului în valori. follow(target, source) face ca o valoare să o urmeze pe alta cu un arc.
Tot ce e declarat în factory-ul useAnimated aparține componentei: listenerii și arcurile se opresc la demontare sau când se schimbă o dependență.
Se pregătește exemplul…
Cardul se înclină spre cursor și se liniștește când cursorul pleacă.
Animați plecarea
Eliminarea unui copil React îl șterge de obicei imediat. Animated.Keep păstrează copiii cu key până se încheie poza lor depart.
wait randează copiii noi doar după ce s-au încheiat toate plecările.
Se pregătește exemplul…
Mesajele respinse pleacă cu mișcarea aleasă înainte să dispară.

Aveți întregul model

Valorile, destinațiile, intrarea și plecările împart aceleași controlere, reguli de întrerupere și curățare. Ghidurile le tratează pe fiecare în detaliu.

Instalare

Mișcați o primă valoare

Derivați multe ieșiri dintr-o singură valoare

Descrieți destinația

Conectați intrarea

Animați plecarea

Aveți întregul model