Približno 5 minut · React 16.8+ · React DOM

Začetek

Od namestitve do gest ter gibanja vstopa in izstopa v šestih korakih. Vsak korak je majhna komponenta, ki deluje.

1
Namestitev
Animated nima odvisnosti med izvajanjem. React 16.8+ je peer odvisnost.
Vstopna točka paketa je označena z 'use client'. V Next.js App Routerju lahko strežniški layout upodobi AnimatedProvider; hooke in Animated.<tag> uporabljajte znotraj Client Components.
$
```
npm install @kkwaenggwari/animated
```
Uvoz @kkwaenggwari/animated se razreši v vašem urejevalniku.
Premaknite prvo vrednost
useAnimatedValue(1) ima v lasti živo število ves čas življenja komponente. Postavite ga neposredno v style: postane spremenljivka CSS, zato React med spreminjanjem ne upodablja.
timing(value, { toValue, duration }).start() ga premakne. Ponoven pritisk na pol poti začne pri trenutni prosojnosti.
Pripravljanje primera …
Okvir zbledi in se vrne, drugi pritisk na pol poti pa obrne smer od tam, kjer je.
Izpeljite veliko izhodov iz ene vrednosti
interpolate preslika vrednost v dolžine, kote ali števila. Brez easinga postane natančen calc() iste spremenljivke, zato pet prog stane toliko kot ena.
Različni vhodni razponi iste vrednosti ustvarijo kaskado brez petih ločenih animacij.
Pripravljanje primera …
En pritisk premakne pet prog v kaskadi; sprememba razpršenosti spremeni le razpone.
Opišite cilj
Animated.button upodobi navaden gumb. seed je prva sličica, pose je, kje mora biti zdaj, tempo pa, kako pride tja.
Ko se pose spremeni na pol poti, element zavije od tam, kjer je na zaslonu, z vzmetjo pa ohrani hitrost.
Pripravljanje primera …
Hitro klikanje zavihkov nikoli ne povzroči, da bi kateri poskočil.
Povežite vnos
input(ref, moveInput(...)) zapisuje koordinate kazalca v vrednosti. follow(target, source) poskrbi, da ena vrednost z vzmetjo sledi drugi.
Vse, kar je deklarirano v factoryju useAnimated, pripada komponenti: poslušalci in vzmeti se ustavijo ob odklopu ali ko se odvisnost spremeni.
Pripravljanje primera …
Kartica se nagne proti kazalcu in umiri, ko kazalec odide.
Animirajte odhod
Odstranitev otroka Reacta ga običajno takoj odstrani. Animated.Keep obdrži otroke s key, dokler se njihova poza depart ne konča.
wait upodobi nove otroke šele, ko se vsi odhodi končajo.
Pripravljanje primera …
Zavržena sporočila odidejo z izbranim gibanjem, preden izginejo.

Imate celoten model

Vrednosti, cilji, vnos in odhodi si delijo iste krmilnike, pravila prekinitev in čiščenje. Vodniki vsakega obravnavajo podrobno.

Namestitev

Premaknite prvo vrednost

Izpeljite veliko izhodov iz ene vrednosti

Opišite cilj

Povežite vnos

Animirajte odhod

Imate celoten model