Value
new Value(initial: number)Promjenjiv broj sa setValue, setOffset, flattenOffset, extractOffset, stopAnimation i resetAnimation.
Referenca API-ja
Svaki export @kkwaenggwari/animated s potpisom i vodičem koji ga objašnjava.
Vrijednosti i grafovi
ValueXY
new ValueXY({ x?, y? })Uparene vrijednosti x i y s istim operacijama, uz getLayout i getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Stvara broj ili imenovani brojčani zapis izvan Reacta. Stvaranje ništa ne pokreće.
Vodič: Vrijednosti i stilAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Osnova samo za čitanje svake vrijednosti i grafa: getValue, interpolate i slušatelji.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Živo preslikavanje ulaznih u izlazne raspone, s easing i ekstrapolacijom extend, clamp ili identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Čisti izračun samo za čitanje nad jednim ili više ulaza. Izlazi koji ga koriste rade u JavaScriptu.
Vodič: Vrijednosti i stilinterpolateFn
interpolateFn({ value, inputRange, outputRange });Jednom izračunava interpolaciju za običan broj.
Vodič: Vrijednosti i stiladd
add(...inputs);Zbroj brojeva i vrijednosti.
Vodič: Vrijednosti i stilsubtract
subtract(a, b);Razlika dvaju ulaza.
Vodič: Vrijednosti i stilmultiply
multiply(...inputs);Umnožak brojeva i vrijednosti.
Vodič: Vrijednosti i stildivide
divide(a, b);Količnik dvaju ulaza.
Vodič: Vrijednosti i stilmodulo
modulo(a, b);Vrijednost koja kreće ispočetka u krug, primjerice za beskonačnu rotaciju.
Vodič: Vrijednosti i stildiffClamp
diffClamp(input, min, max);Prati promjene ulaza, ali ostaje u rasponu; korisno za zaglavlja koja se skrivaju pri pomicanju.
Vodič: Vrijednosti i stilReact hookovi
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Posjeduje broj ili brojčani zapis tijekom životnog vijeka komponente. U style je to CSS varijabla.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Posjeduje vrijednost i svaki kontroler, unos i izlaz deklariran u njezinu factoryju. Pokreće se, ponovno se pokreće pri promjeni ovisnosti i čisti.
Vodič: Vrijednosti i stiluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Posjeduje potpunu dvodimenzionalnu vrijednost.
Vodič: Vrijednosti i stiluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDaje izvedenom čvoru koji nije izraz calc() vlastitu CSS varijablu sa životnim vijekom komponente.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Poziva funkciju pri svakoj promjeni čvora ili ValueXY; uklanja se pri demontiranju.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Vraća { mounted, animatedValue } za ulazak i izlazak hookom.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Postavlja zadani scope CSS varijabli za vrijednosti hookova ispod sebe.
Vodič: Vrijednosti i stilflushAnimatedUpdates
flushAnimatedUpdates();Sinkrono primjenjuje izlaz na čekanju, za determinističke testove.
Vodič: Vrijednosti i stilDriveri, kompozicija i vremenske crte
timing
timing(value, { toValue, duration?, delay?, easing? })Pomiče vrijednost po krivulji easinga tijekom fiksnog vremena.
Vodič: Timing, opruge i kompozicijaspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Pomiče vrijednost fizikom opruge, zadržavajući brzinu prekinutog pokreta.
Vodič: Timing, opruge i kompozicijadecay
decay(value, { velocity, deceleration? })Počinje brzinom i usporava.
Vodič: Timing, opruge i kompozicijadelay
delay(ms);Kontroler koji samo čeka.
Vodič: Timing, opruge i kompozicijasequence
sequence([a, b, c]);Izvodi kontrolere jedan za drugim.
Vodič: Timing, opruge i kompozicijaparallel
parallel([a, b], { stopTogether? }?)Izvodi kontrolere zajedno.
Vodič: Timing, opruge i kompozicijastagger
stagger(ms, [a, b, c]);Pokreće kontrolere jedan za drugim u fiksnom razmaku.
Vodič: Timing, opruge i kompozicijaloop
loop(animation, { iterations?, resetBeforeIteration? }?)Ponavlja kontroler određen broj puta ili zauvijek.
Vodič: Timing, opruge i kompozicijakeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Vodi vrijednost kroz nekoliko brojeva, s neobaveznim vremenima i ponavljanjima.
Vodič: Timing, opruge i kompozicijaEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Krivulje koje odgovaraju React Nativeu: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier i pomoćnici in/out.
Vodič: Timing, opruge i kompozicijacreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Sat koji se može premotavati s imenovanim stazama, izvan Reacta.
Vodič: Timing, opruge i kompozicijauseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Vremenska crta koja pripada komponenti, čije staze rade izravno u običnom styleu.
Vodič: Timing, opruge i kompozicijaKomponente i raspored
Animated
<Animated.div seed pose tempo respond depart move />;Prostor imena HTML i SVG hostova poput Animated.div, uz osnovne funkcije pod nazivima iz React Nativea.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Omogućuje komponenti koja prosljeđuje ref da prima props Animated hostova.
Vodič: Animated komponenteAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Dijeli naziv poze, tempo i zadane postavke animacije s Animated elementima unutar sebe.
Vodič: Animated komponenteAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Drži djecu s key montiranom dok njihov odlazak ne završi.
Vodič: Animated komponenteAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animira promjene rasporeda elemenata move i povezuje elemente s istim identitetom.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Ista koordinacija rasporeda snimanjem i commitom za druge renderere.
Vodič: Animated komponenteuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Promjena redoslijeda kontroliranog popisa duž jedne osi pokazivačem i tipkovnicom.
Vodič: Animated komponenteUnos i veze
input
input(targetRef, adapter, onEvent?)Povezuje adapter unosa s elementom kao posjedovani kontroler.
Vodič: Unos i gestefollow
follow(target, source, { stiffness?, damping?, mass? }?)Tjera jednu vrijednost da s oprugom prati drugu.
Vodič: Unos i gesteconnect
connect(node, (value) => write(value));Šalje svaku promjenu čvora funkciji.
Vodič: Unos i gesteevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Preslikava ugniježđene podatke događaja u vrijednosti, kao u React Nativeu.
Vodič: Unos i gestedragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Povlačenje pokazivačem i tipkovnicom s granicama, elastičnim rubovima, zamahom i settle.
Vodič: Unos i gestepinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Mjerilo i rotacija iz geste s dva pokazivača.
Vodič: Unos i gestemoveInput
moveInput({ x?, y?, relative?, reset? })Koordinate pokazivača, po želji relativno prema središtu elementa.
Vodič: Unos i gestescrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Položaj i napredak pomicanja elementa, stranice ili elementa koji prolazi kroz vidljivo područje.
Vodič: Unos i gestewheelInput
wheelInput({ x?, y? })Pomaci kotačića.
Vodič: Unos i gesteviewportInput
viewportInput({ root?, margin?, amount?, once? })Je li element u vidljivom području.
Vodič: Unos i gestemediaInput
mediaInput('(min-width: 768px)');Odgovara li media query.
Vodič: Unos i gestelongPressInput
longPressInput({ delay?, threshold? })Pokazivač zadržan dulje od kašnjenja i unutar praga pomaka.
Vodič: Unos i gesteswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Smjer, udaljenost i brzina povlačenja.
Vodič: Unos i gesteIzlaz i dijagnostika
bind
bind(element, style) → { update, inspect, dispose }Vezuje Animated stilove uz element izvan Reacta; vraća update, inspect i dispose.
inspect
inspect(element) → [{ property, driver, reason }]Put reprodukcije i razlog fallbacka za svako animirano svojstvo elementa.
Vodič: Performanse i reprodukcijaoutput
output(targetRef, { style?, attributes?, properties?, text? })Posjeduje izlaz u stil, atribut, tekst ili svojstvo unutar useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Odmah povezuje preslikavanje izlaza; vraća flush i dispose.