Cirka 5 minutter · React 16.8+ · React DOM

Kom i gang

Fra installation til gestus og bevægelse ind og ud i seks trin. Hvert trin er en lille komponent, der virker.

1
Installér
Animated har ingen afhængigheder ved kørsel. React 16.8+ er en peer-afhængighed.
Pakkens indgangspunkt er markeret 'use client'. I Next.js App Router kan et serverlayout rendere AnimatedProvider; brug hooks og Animated.<tag> inde i Client Components.
$
```
npm install @kkwaenggwari/animated
```
Importen @kkwaenggwari/animated findes i din editor.
Flyt din første værdi
useAnimatedValue(1) ejer et levende tal i komponentens levetid. Sæt det direkte i style: det bliver en CSS-variabel, så React renderer ikke, mens det ændrer sig.
timing(value, { toValue, duration }).start() flytter det. Et nyt tryk halvvejs starter fra den aktuelle opacitet.
Forbereder eksemplet…
Boksen toner ud og tilbage, og et andet tryk halvvejs vender om fra, hvor den er.
Afled mange output fra én værdi
interpolate omsætter værdien til længder, vinkler eller tal. Uden easing bliver det et eksakt calc() af den samme variabel, så fem baner koster det samme som én.
Forskellige inputintervaller på den samme værdi skaber en kaskade uden fem separate animationer.
Forbereder eksemplet…
Ét tryk flytter fem baner i kaskade; at ændre spredningen ændrer kun intervallerne.
Beskriv en destination
Animated.button renderer en almindelig knap. seed er den første frame, pose er, hvor den skal være nu, og tempo er, hvordan den kommer derhen.
Når pose ændrer sig halvvejs, drejer elementet fra, hvor det er på skærmen, og bevarer sin hastighed med en fjeder.
Forbereder eksemplet…
Hurtige klik på kort får aldrig et af dem til at hoppe.
Forbind input
input(ref, moveInput(...)) skriver markørens koordinater til værdier. follow(target, source) får én værdi til at følge en anden med en fjeder.
Alt, der er erklæret i en useAnimated-factory, ejes af komponenten: listeners og fjedre stopper ved unmount, eller når en afhængighed ændrer sig.
Forbereder eksemplet…
Kortet hælder mod markøren og falder til ro igen, når markøren forlader det.
Animér udgangen
At fjerne et React-barn fjerner det normalt med det samme. Animated.Keep beholder børn med key, indtil deres depart-pose er færdig.
wait renderer først nye børn, når alle udgange er færdige.
Forbereder eksemplet…
Afviste beskeder forlader med den valgte bevægelse, før de forsvinder.

Du har hele modellen

Værdier, destinationer, input og udgange deler de samme controllere, afbrydelsesregler og oprydning. Guiderne går i dybden med hver.

Installér

Flyt din første værdi

Afled mange output fra én værdi

Beskriv en destination

Forbind input

Animér udgangen

Du har hele modellen