Oko 5 minuta · React 16.8+ · React DOM

Početak

Od instalacije do gesti i pokreta ulaska i izlaska u šest koraka. Svaki korak je mala komponenta koja radi.

1
Instalacija
Animated nema ovisnosti tijekom izvođenja. React 16.8+ je peer ovisnost.
Ulazna točka paketa označena je s 'use client'. U Next.js App Routeru poslužiteljski layout može renderirati AnimatedProvider; hookove i Animated.<tag> koristite unutar Client Components.
$
```
npm install @kkwaenggwari/animated
```
Import @kkwaenggwari/animated razrješava se u vašem uređivaču.
Pomaknite prvu vrijednost
useAnimatedValue(1) posjeduje živi broj tijekom cijelog životnog vijeka komponente. Stavite ga izravno u style: postaje CSS varijabla, pa React ne renderira dok se mijenja.
timing(value, { toValue, duration }).start() ga pomiče. Ponovni pritisak na pola puta počinje od trenutačne prozirnosti.
Priprema primjera…
Okvir izblijedi i vrati se, a drugi pritisak na pola puta okreće smjer odakle se nalazi.
Izvedite mnogo izlaza iz jedne vrijednosti
interpolate preslikava vrijednost u duljine, kutove ili brojeve. Bez easinga postaje točan calc() iste varijable, pa pet staza košta koliko i jedna.
Različiti ulazni rasponi iste vrijednosti stvaraju kaskadu bez pet zasebnih animacija.
Priprema primjera…
Jedan pritisak pomiče pet staza u kaskadi; promjena raspršenosti mijenja samo raspone.
Opišite cilj
Animated.button renderira običan gumb. seed je prvi kadar, pose je gdje sada treba biti, a tempo je kako onamo stiže.
Kad se pose promijeni na pola puta, element skreće odakle je na zaslonu i s oprugom zadržava brzinu.
Priprema primjera…
Brzo klikanje kartica nikad ne uzrokuje da neka poskoči.
Povežite unos
input(ref, moveInput(...)) zapisuje koordinate pokazivača u vrijednosti. follow(target, source) tjera jednu vrijednost da s oprugom prati drugu.
Sve što je deklarirano u factoryju useAnimated pripada komponenti: slušatelji i opruge zaustavljaju se pri demontiranju ili kad se ovisnost promijeni.
Priprema primjera…
Kartica se naginje prema pokazivaču i smiruje kad pokazivač ode.
Animirajte odlazak
Uklanjanje Reactova djeteta obično ga odmah uklanja. Animated.Keep zadržava djecu s key dok njihova poza depart ne završi.
wait renderira novu djecu tek kad svi odlasci završe.
Priprema primjera…
Odbačene poruke odlaze odabranim pokretom prije nego što nestanu.

Imate cijeli model

Vrijednosti, ciljevi, unos i odlasci dijele iste kontrolere, pravila prekida i čišćenje. Vodiči svaki od njih detaljno obrađuju.

Instalacija

Pomaknite prvu vrijednost

Izvedite mnogo izlaza iz jedne vrijednosti

Opišite cilj

Povežite unos

Animirajte odlazak

Imate cijeli model