Ongeveer 5 minuten · React 16.8+ · React DOM

Aan de slag

Van installatie tot gebaren en in- en uitgaande beweging in zes stappen. Elke stap is een klein, werkend component.

1
Installeren
Animated heeft geen runtime-afhankelijkheden. React 16.8+ is een peer dependency.
Het pakketingangspunt is gemarkeerd met 'use client'. In de Next.js App Router kan een serverlayout AnimatedProvider renderen; gebruik hooks en Animated.<tag> binnen Client Components.
$
```
npm install @kkwaenggwari/animated
```
De import @kkwaenggwari/animated wordt in je editor gevonden.
Beweeg je eerste waarde
useAnimatedValue(1) bezit een levend getal zolang het component bestaat. Zet het direct in style: het wordt een CSS-variabele, dus React rendert niet terwijl het verandert.
timing(value, { toValue, duration }).start() beweegt het. Halverwege opnieuw drukken begint vanaf de huidige dekking.
Voorbeeld voorbereiden…
Het blok vervaagt en komt terug, en een tweede druk halverwege keert om vanaf waar het is.
Leid veel uitvoer af van één waarde
interpolate zet de waarde om in lengtes, hoeken of getallen. Zonder easing wordt het een exacte calc() van dezelfde variabele, dus vijf banen kosten evenveel als één.
Verschillende invoerbereiken op dezelfde waarde vormen een cascade zonder vijf aparte animaties.
Voorbeeld voorbereiden…
Eén druk beweegt vijf banen in een cascade; de spreiding veranderen verandert alleen de bereiken.
Beschrijf een bestemming
Animated.button rendert een gewone knop. seed is het eerste frame, pose is waar hij nu moet zijn, en tempo is hoe hij daar komt.
Als pose halverwege verandert, draait het element vanaf waar het op het scherm staat en behoudt het zijn snelheid met een veer.
Voorbeeld voorbereiden…
Snel op kaarten klikken laat er nooit een springen.
Koppel invoer
input(ref, moveInput(...)) schrijft aanwijzercoördinaten naar waarden. follow(target, source) laat de ene waarde met een veer achter de andere aan gaan.
Alles wat in een useAnimated-factory wordt gedeclareerd, is van het component: listeners en veren stoppen bij unmount of als een afhankelijkheid verandert.
Voorbeeld voorbereiden…
De kaart kantelt naar de aanwijzer en komt terug tot rust als de aanwijzer vertrekt.
Animeer het vertrek
Een React-kind verwijderen haalt het normaal meteen weg. Animated.Keep houdt kinderen met een key vast totdat hun depart-pose klaar is.
wait rendert nieuwe kinderen pas als elk vertrek klaar is.
Voorbeeld voorbereiden…
Weggeklikte berichten vertrekken met de gekozen beweging voordat ze verdwijnen.

Je hebt het hele model

Waarden, bestemmingen, invoer en vertrek delen dezelfde controllers, onderbrekingsregels en opruiming. De gidsen gaan dieper op elk in.

Installeren

Beweeg je eerste waarde

Leid veel uitvoer af van één waarde

Beschrijf een bestemming

Koppel invoer

Animeer het vertrek

Je hebt het hele model