Kb. 5 perc · React 16.8+ · React DOM

Első lépések

A telepítéstől a gesztusokig, valamint a belépő és kilépő mozgásig hat lépésben. Minden lépés egy kis, működő komponens.

1
Telepítés
Az Animatednek nincs futásidejű függősége. A React 16.8+ peer függőség.
A csomag belépési pontja 'use client' jelöléssel rendelkezik. A Next.js App Routerben egy szerveroldali layout renderelheti az AnimatedProvider komponenst; a hookokat és az Animated.<tag> elemeket Client Componentsben használja.
$
```
npm install @kkwaenggwari/animated
```
A @kkwaenggwari/animated import feloldódik a szerkesztőjében.
Mozgasson meg egy első értéket
A useAnimatedValue(1) a komponens teljes élettartama alatt birtokol egy élő számot. Tegye közvetlenül a style-ba: CSS-változóvá válik, így a React nem renderel, amíg változik.
A timing(value, { toValue, duration }).start() mozgatja. Ha félúton újra megnyomja, az aktuális átlátszatlanságtól indul.
A példa előkészítése…
A keret elhalványul és visszatér, a félúton történő második nyomás pedig onnan fordítja meg az irányt, ahol éppen van.
Sok kimenet egyetlen értékből
Az interpolate az értéket hosszakká, szögekké vagy számokká képezi le. Easing nélkül ugyanannak a változónak pontos calc() kifejezésévé válik, így öt sáv annyiba kerül, mint egy.
Ugyanannak az értéknek a különböző bemeneti tartományai lépcsőzést hoznak létre öt külön animáció nélkül.
A példa előkészítése…
Egy nyomás öt sávot mozgat lépcsőzetesen; a szórás módosítása csak a tartományokat változtatja meg.
Írja le a célt
Az Animated.button sima gombot renderel. A seed az első képkocka, a pose az, ahol most lennie kell, a tempo pedig az, hogyan jut oda.
Ha a pose félúton változik, az elem onnan fordul el, ahol a képernyőn van, és rugóval megtartja a sebességét.
A példa előkészítése…
A fülekre való gyors kattintgatás soha nem ugrasztja meg egyiket sem.
Kösse be a bemenetet
Az input(ref, moveInput(...)) a mutató koordinátáit értékekbe írja. A follow(target, source) az egyik értéket rugóval egy másik után vezeti.
Minden, amit a useAnimated factoryjában deklarál, a komponenshez tartozik: a listenerek és rugók leválasztáskor vagy függőségváltozáskor leállnak.
A példa előkészítése…
A kártya a mutató felé dől, és megnyugszik, amikor a mutató távozik.
Animálja a távozást
Egy React-gyermek eltávolítása általában azonnal törli. Az Animated.Keep megtartja a key-jel rendelkező gyermekeket, amíg a depart pózuk véget nem ér.
A wait csak akkor rendereli az új gyermekeket, amikor minden távozás befejeződött.
A példa előkészítése…
Az elvetett üzenetek a kiválasztott mozgással távoznak, mielőtt eltűnnek.

Most már ismeri a teljes modellt

Az értékek, célok, bemenetek és távozások ugyanazokat a vezérlőket, megszakítási szabályokat és takarítást használják. Az útmutatók mindegyiket részletesen tárgyalják.

Telepítés

Mozgasson meg egy első értéket

Sok kimenet egyetlen értékből

Írja le a célt

Kösse be a bemenetet

Animálja a távozást

Most már ismeri a teljes modellt