Omtrent 5 minutter · React 16.8+ · React DOM

Kom i gang

Fra installasjon til bevegelser og inn- og utgangsbevegelse i seks steg. Hvert steg er en liten komponent som fungerer.

1
Installer
Animated har ingen avhengigheter ved kjøring. React 16.8+ er en peer-avhengighet.
Pakkens inngangspunkt er merket 'use client'. I Next.js App Router kan en serverlayout rendere AnimatedProvider; bruk hooks og Animated.<tag> inne i Client Components.
$
```
npm install @kkwaenggwari/animated
```
Importen @kkwaenggwari/animated blir funnet i editoren din.
Flytt den første verdien
useAnimatedValue(1) eier et levende tall i hele komponentens levetid. Sett det rett i style: det blir en CSS-variabel, så React renderer ikke mens det endres.
timing(value, { toValue, duration }).start() flytter det. Et nytt trykk halvveis starter fra gjeldende opasitet.
Forbereder eksempelet …
Boksen toner ut og tilbake, og et nytt trykk halvveis snur der den er.
Avled mange utdata fra én verdi
interpolate gjør verdien om til lengder, vinkler eller tall. Uten easing blir det et eksakt calc() av den samme variabelen, så fem baner koster like mye som én.
Ulike inndataintervaller på samme verdi lager en kaskade uten fem separate animasjoner.
Forbereder eksempelet …
Ett trykk flytter fem baner i kaskade; å endre spredningen endrer bare intervallene.
Beskriv et mål
Animated.button renderer en vanlig knapp. seed er det første bildet, pose er der den skal være nå, og tempo er hvordan den kommer dit.
Når pose endres halvveis, svinger elementet fra der det er på skjermen og beholder hastigheten med en fjær.
Forbereder eksempelet …
Raske klikk på kort får aldri noen av dem til å hoppe.
Koble til inndata
input(ref, moveInput(...)) skriver pekerens koordinater til verdier. follow(target, source) får én verdi til å følge en annen med en fjær.
Alt som deklareres i en useAnimated-factory, eies av komponenten: lyttere og fjærer stopper ved unmount eller når en avhengighet endres.
Forbereder eksempelet …
Kortet heller mot pekeren og legger seg til ro igjen når pekeren forlater det.
Animer utgangen
Å fjerne et React-barn fjerner det vanligvis med en gang. Animated.Keep beholder barn med key til depart-posen deres er ferdig.
wait renderer nye barn først når alle utganger er ferdige.
Forbereder eksempelet …
Avviste meldinger forlater med valgt bevegelse før de forsvinner.

Du har hele modellen

Verdier, mål, inndata og utganger deler de samme kontrollerne, avbruddsreglene og oppryddingen. Guidene går dypere inn i hver av dem.

Installer

Flytt den første verdien

Avled mange utdata fra én verdi

Beskriv et mål

Koble til inndata

Animer utgangen

Du har hele modellen