Asi 5 minút · React 16.8+ · React DOM

Začíname

Od inštalácie po gestá a pohyb príchodu a odchodu v šiestich krokoch. Každý krok je malý funkčný komponent.

1
Inštalácia
Animated nemá za behu žiadne závislosti. React 16.8+ je peer závislosť.
Vstupný bod balíka je označený 'use client'. V App Router Next.js môže serverový layout renderovať AnimatedProvider; hooky a Animated.<tag> používajte vnútri Client Components.
$
```
npm install @kkwaenggwari/animated
```
Import @kkwaenggwari/animated sa vo vašom editore vyrieši.
Pohnite prvou hodnotou
useAnimatedValue(1) vlastní živé číslo počas celej životnosti komponentu. Vložte ho priamo do style: stane sa premennou CSS, takže React počas jeho zmien nerenderuje.
timing(value, { toValue, duration }).start() ním pohne. Ďalšie stlačenie v polovici cesty začne od aktuálnej priehľadnosti.
Príprava príkladu…
Box zmizne a znova sa objaví a druhé stlačenie v polovici cesty obráti smer z miesta, kde je.
Odvoďte z jednej hodnoty mnoho výstupov
interpolate prevedie hodnotu na dĺžky, uhly alebo čísla. Bez easing sa stane presným calc() tej istej premennej, takže päť dráh stojí rovnako ako jedna.
Rôzne vstupné rozsahy tej istej hodnoty vytvoria kaskádu bez piatich samostatných animácií.
Príprava príkladu…
Jedno stlačenie pohne piatimi dráhami v kaskáde; zmena rozptylu zmení len rozsahy.
Opíšte cieľ
Animated.button renderuje bežné tlačidlo. seed je prvá snímka, pose je miesto, kde má byť teraz, a tempo je spôsob, akým sa tam dostane.
Keď sa pose zmení v polovici cesty, prvok zatočí z miesta, kde je na obrazovke, a s pružinou si zachová rýchlosť.
Príprava príkladu…
Rýchle klikanie na karty nikdy nespôsobí, že by niektorá poskočila.
Pripojte vstup
input(ref, moveInput(...)) zapisuje súradnice ukazovateľa do hodnôt. follow(target, source) prinúti jednu hodnotu nasledovať inú s pružinou.
Všetko deklarované vo factory useAnimated patrí komponentu: poslucháči aj pružiny sa zastavia pri odpojení alebo pri zmene závislosti.
Príprava príkladu…
Karta sa nakloní k ukazovateľu a keď ukazovateľ odíde, vráti sa do pokoja.
Animujte odchod
Odobratie potomka Reactu ho zvyčajne odstráni okamžite. Animated.Keep drží potomkov s key, kým sa ich póza depart neskončí.
wait renderuje nových potomkov až po dokončení všetkých odchodov.
Príprava príkladu…
Zavreté správy odchádzajú zvoleným pohybom skôr, ako zmiznú.

Máte celý model

Hodnoty, ciele, vstup aj odchody zdieľajú rovnaké controllery, pravidlá prerušenia a upratovanie. Sprievodcovia idú pri každom do hĺbky.

Inštalácia

Pohnite prvou hodnotou

Odvoďte z jednej hodnoty mnoho výstupov

Opíšte cieľ

Pripojte vstup

Animujte odchod

Máte celý model