Value
new Value(initial: number)Spremenljivo število z setValue, setOffset, flattenOffset, extractOffset, stopAnimation in resetAnimation.
Referenca API-ja
Vsak izvoz @kkwaenggwari/animated s podpisom in vodnikom, ki ga razloži.
Vrednosti in grafi
ValueXY
new ValueXY({ x?, y? })Par vrednosti x in y z enakimi operacijami ter getLayout in getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Ustvari število ali poimenovan številski zapis zunaj Reacta. Ustvarjanje ničesar ne zažene.
Vodnik: Vrednosti in slogAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Osnova vsake vrednosti in grafa, samo za branje: getValue, interpolate in poslušalci.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Živa preslikava iz vhodnih v izhodne razpone z easing in ekstrapolacijo extend, clamp ali identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Čist izračun samo za branje nad enim ali več vhodi. Izhodi, ki ga uporabljajo, tečejo v JavaScriptu.
Vodnik: Vrednosti in sloginterpolateFn
interpolateFn({ value, inputRange, outputRange });Enkrat izračuna interpolacijo za navadno število.
Vodnik: Vrednosti in slogadd
add(...inputs);Vsota števil in vrednosti.
Vodnik: Vrednosti in slogsubtract
subtract(a, b);Razlika dveh vhodov.
Vodnik: Vrednosti in slogmultiply
multiply(...inputs);Zmnožek števil in vrednosti.
Vodnik: Vrednosti in slogdivide
divide(a, b);Količnik dveh vhodov.
Vodnik: Vrednosti in slogmodulo
modulo(a, b);Ovita vrednost, na primer za neskončno vrtenje.
Vodnik: Vrednosti in slogdiffClamp
diffClamp(input, min, max);Sledi spremembam vhoda, a ostane v razponu; uporabno za glave, ki se skrijejo ob drsenju.
Vodnik: Vrednosti in slogHooki Reacta
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Ima v lasti število ali številski zapis ves čas življenja komponente. V style je spremenljivka CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Ima v lasti vrednost in vsak krmilnik, vnos in izhod, deklariran v njegovem factoryju. Zažene, znova zažene ob spremembi odvisnosti in pospravi.
Vodnik: Vrednosti in sloguseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Ima v lasti celotno dvodimenzionalno vrednost.
Vodnik: Vrednosti in sloguseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringIzpeljanemu vozlišču, ki ni izraz calc(), da lastno spremenljivko CSS z življenjsko dobo komponente.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Pokliče funkcijo ob vsaki spremembi vozlišča ali ValueXY; ob odklopu se odstrani.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Vrne { mounted, animatedValue } za vstop in izstop s hookom.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Nastavi privzeti scope spremenljivk CSS za vrednosti hookov pod njim.
Vodnik: Vrednosti in slogflushAnimatedUpdates
flushAnimatedUpdates();Sinhrono uveljavi čakajoče izhode za deterministične teste.
Vodnik: Vrednosti in slogDriverji, kompozicija in časovnice
timing
timing(value, { toValue, duration?, delay?, easing? })Premakne vrednost po krivulji easinga v fiksnem trajanju.
Vodnik: Timing, vzmeti in kompozicijaspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Premakne vrednost s fiziko vzmeti in ohrani hitrost prekinjenega gibanja.
Vodnik: Timing, vzmeti in kompozicijadecay
decay(value, { velocity, deceleration? })Začne s hitrostjo in upočasnjuje.
Vodnik: Timing, vzmeti in kompozicijadelay
delay(ms);Krmilnik, ki le čaka.
Vodnik: Timing, vzmeti in kompozicijasequence
sequence([a, b, c]);Izvaja krmilnike enega za drugim.
Vodnik: Timing, vzmeti in kompozicijaparallel
parallel([a, b], { stopTogether? }?)Izvaja krmilnike skupaj.
Vodnik: Timing, vzmeti in kompozicijastagger
stagger(ms, [a, b, c]);Zaganja krmilnike enega za drugim s fiksnim razmikom.
Vodnik: Timing, vzmeti in kompozicijaloop
loop(animation, { iterations?, resetBeforeIteration? }?)Ponovi krmilnik določeno število krat ali v nedogled.
Vodnik: Timing, vzmeti in kompozicijakeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Vodi vrednost skozi več števil z neobveznimi časi in ponovitvami.
Vodnik: Timing, vzmeti in kompozicijaEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Krivulje, ki se ujemajo z React Nativom: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier in pomočniki in/out.
Vodnik: Timing, vzmeti in kompozicijacreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Ura s premikanjem po času in poimenovanimi progami, zunaj Reacta.
Vodnik: Timing, vzmeti in kompozicijauseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Časovnica v lasti komponente, katere proge delujejo neposredno v navadnem slogu.
Vodnik: Timing, vzmeti in kompozicijaKomponente in postavitev
Animated
<Animated.div seed pose tempo respond depart move />;Imenski prostor gostiteljev HTML in SVG, kot je Animated.div, ter osnovne funkcije pod imeni iz React Nativa.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Poskrbi, da komponenta, ki posreduje ref, sprejema props gostiteljev Animated.
Vodnik: Komponente AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Deli ime poze, tempo in privzete vrednosti animacije z elementi Animated v sebi.
Vodnik: Komponente AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Obdrži otroke s key priklopljene, dokler se njihov odhod ne konča.
Vodnik: Komponente AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animira spremembe postavitve elementov z move in poveže elemente z isto identiteto.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Isto usklajevanje zajema in potrditve postavitve za druge upodabljalnike.
Vodnik: Komponente AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Razvrščanje nadzorovanega seznama vzdolž ene osi s kazalcem in tipkovnico.
Vodnik: Komponente AnimatedVnos in povezave
input
input(targetRef, adapter, onEvent?)Elementu pripne vnosni adapter kot krmilnik v lasti.
Vodnik: Vnos in gestefollow
follow(target, source, { stiffness?, damping?, mass? }?)Poskrbi, da ena vrednost z vzmetjo sledi drugi.
Vodnik: Vnos in gesteconnect
connect(node, (value) => write(value));Pošlje vsako spremembo vozlišča funkciji.
Vodnik: Vnos in gesteevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Preslika gnezdene podatke dogodkov v vrednosti, kot v React Nativu.
Vodnik: Vnos in gestedragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Vlečenje s kazalcem in tipkovnico z mejami, elastičnimi robovi, momentom in settle.
Vodnik: Vnos in gestepinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Merilo in zasuk iz geste z dvema kazalcema.
Vodnik: Vnos in gestemoveInput
moveInput({ x?, y?, relative?, reset? })Koordinate kazalca, po želji glede na središče elementa.
Vodnik: Vnos in gestescrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Položaj in napredek drsenja elementa, strani ali elementa, ki prečka vidno polje.
Vodnik: Vnos in gestewheelInput
wheelInput({ x?, y? })Premiki kolesca.
Vodnik: Vnos in gesteviewportInput
viewportInput({ root?, margin?, amount?, once? })Ali je element v vidnem polju.
Vodnik: Vnos in gestemediaInput
mediaInput('(min-width: 768px)');Ali se medijska poizvedba ujema.
Vodnik: Vnos in gestelongPressInput
longPressInput({ delay?, threshold? })Kazalec, zadržan po zamiku in znotraj praga premika.
Vodnik: Vnos in gesteswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Smer, razdalja in hitrost potega.
Vodnik: Vnos in gesteIzhod in diagnostika
bind
bind(element, style) → { update, inspect, dispose }Poveže sloge Animated z elementom zunaj Reacta; vrne update, inspect in dispose.
inspect
inspect(element) → [{ property, driver, reason }]Pot predvajanja in razlog za nadomestno pot za vsako animirano lastnost elementa.
Vodnik: Zmogljivost in predvajanjeoutput
output(targetRef, { style?, attributes?, properties?, text? })Ima v lasti izhod v slog, atribut, besedilo ali lastnost znotraj useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Takoj pripne preslikavo izhoda; vrne flush in dispose.