Value
new Value(initial: number)Meniteľné číslo s setValue, setOffset, flattenOffset, extractOffset, stopAnimation a resetAnimation.
Referencia API
Každý export @kkwaenggwari/animated s jeho signatúrou a sprievodcom, ktorý ho vysvetľuje.
Hodnoty a grafy
ValueXY
new ValueXY({ x?, y? })Spárované hodnoty x a y s rovnakými operáciami, plus getLayout a getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Vytvorí číslo alebo pomenovaný číselný záznam mimo React. Vytvorenie nič nespúšťa.
Sprievodca: Hodnoty a štýlAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Základ len na čítanie každej hodnoty a grafu: getValue, interpolate a poslucháči.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Živé mapovanie vstupných rozsahov na výstupné, s easing a extrapoláciou extend, clamp alebo identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Čistý výpočet len na čítanie nad jedným či viacerými vstupmi. Výstupy, ktoré ho používajú, bežia v JavaScripte.
Sprievodca: Hodnoty a štýlinterpolateFn
interpolateFn({ value, inputRange, outputRange });Vyhodnotí interpoláciu raz pre obyčajné číslo.
Sprievodca: Hodnoty a štýladd
add(...inputs);Súčet čísel a hodnôt.
Sprievodca: Hodnoty a štýlsubtract
subtract(a, b);Rozdiel dvoch vstupov.
Sprievodca: Hodnoty a štýlmultiply
multiply(...inputs);Súčin čísel a hodnôt.
Sprievodca: Hodnoty a štýldivide
divide(a, b);Podiel dvoch vstupov.
Sprievodca: Hodnoty a štýlmodulo
modulo(a, b);Hodnota, ktorá začína znova dookola, napríklad pre nekonečnú rotáciu.
Sprievodca: Hodnoty a štýldiffClamp
diffClamp(input, min, max);Sleduje zmeny vstupu, ale zostáva v rozsahu; užitočné pre hlavičky, ktoré sa pri posúvaní skrývajú.
Sprievodca: Hodnoty a štýlHooky Reactu
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Vlastní číslo alebo číselný záznam počas celej životnosti komponentu. V style je to premenná CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Vlastní hodnotu a každý controller, vstup a výstup deklarovaný v jej factory. Spustí sa, pri zmene závislostí sa spustí znova a uprace po sebe.
Sprievodca: Hodnoty a štýluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Vlastní úplnú dvojrozmernú hodnotu.
Sprievodca: Hodnoty a štýluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDá odvodenému uzlu, ktorý nie je výrazom calc(), vlastnú premennú CSS so životnosťou komponentu.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Volá funkciu pri každej zmene uzla alebo ValueXY; odoberie sa pri odpojení.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Vracia { mounted, animatedValue } pre príchod a odchod pomocou hooku.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Nastaví predvolený scope premenných CSS pre hodnoty hookov pod sebou.
Sprievodca: Hodnoty a štýlflushAnimatedUpdates
flushAnimatedUpdates();Synchrónne použije čakajúci výstup, pre deterministické testy.
Sprievodca: Hodnoty a štýlDrivery, skladanie a časové osi
timing
timing(value, { toValue, duration?, delay?, easing? })Pohne hodnotou po krivke easing za pevný čas.
Sprievodca: Timing, pružiny a skladaniespring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Pohne hodnotou podľa fyziky pružiny a zachová rýchlosť prerušeného pohybu.
Sprievodca: Timing, pružiny a skladaniedecay
decay(value, { velocity, deceleration? })Začne s rýchlosťou a spomaľuje.
Sprievodca: Timing, pružiny a skladaniedelay
delay(ms);Controller, ktorý len čaká.
Sprievodca: Timing, pružiny a skladaniesequence
sequence([a, b, c]);Spúšťa controllery jeden po druhom.
Sprievodca: Timing, pružiny a skladanieparallel
parallel([a, b], { stopTogether? }?)Spúšťa controllery spolu.
Sprievodca: Timing, pružiny a skladaniestagger
stagger(ms, [a, b, c]);Spúšťa controllery jeden po druhom v pevnom intervale.
Sprievodca: Timing, pružiny a skladanieloop
loop(animation, { iterations?, resetBeforeIteration? }?)Opakuje controller daný počet ráz alebo donekonečna.
Sprievodca: Timing, pružiny a skladaniekeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Prevedie hodnotu niekoľkými číslami s voliteľnými časmi a opakovaním.
Sprievodca: Timing, pružiny a skladanieEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Krivky zodpovedajúce React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier a pomocníci in/out.
Sprievodca: Timing, pružiny a skladaniecreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Posúvateľné hodiny s pomenovanými stopami, mimo React.
Sprievodca: Timing, pružiny a skladanieuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Časová os vlastnená komponentom, ktorej stopy fungujú priamo v bežnom style.
Sprievodca: Timing, pružiny a skladanieKomponenty a rozloženie
Animated
<Animated.div seed pose tempo respond depart move />;Menný priestor hostiteľov HTML a SVG ako Animated.div a k tomu základné funkcie pod názvami z React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Umožní komponentu, ktorý odovzdáva ref, prijímať props hostiteľov Animated.
Sprievodca: Komponenty AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Zdieľa názov pózy, tempo a predvolené nastavenia animácie s prvkami Animated vnútri.
Sprievodca: Komponenty AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Drží potomkov s key pripojených, kým sa ich odchod neskončí.
Sprievodca: Komponenty AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animuje zmeny rozloženia prvkov move a prepája prvky s rovnakou identitou.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Rovnaká koordinácia rozloženia zachytením a commitom pre iné renderery.
Sprievodca: Komponenty AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Zmena poradia riadeného zoznamu pozdĺž jednej osi ukazovateľom aj klávesnicou.
Sprievodca: Komponenty AnimatedVstup a prepojenia
input
input(targetRef, adapter, onEvent?)Pripojí adaptér vstupu k prvku ako vlastnený controller.
Sprievodca: Vstup a gestáfollow
follow(target, source, { stiffness?, damping?, mass? }?)Prinúti jednu hodnotu nasledovať inú s pružinou.
Sprievodca: Vstup a gestáconnect
connect(node, (value) => write(value));Pošle každú zmenu uzla do funkcie.
Sprievodca: Vstup a gestáevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mapuje vnorené údaje udalostí na hodnoty, ako v React Native.
Sprievodca: Vstup a gestádragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Ťahanie ukazovateľom aj klávesnicou s hranicami, pružnými okrajmi, zotrvačnosťou a settle.
Sprievodca: Vstup a gestápinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Mierka a otočenie z gesta dvoma ukazovateľmi.
Sprievodca: Vstup a gestámoveInput
moveInput({ x?, y?, relative?, reset? })Súradnice ukazovateľa, voliteľne vzhľadom na stred prvku.
Sprievodca: Vstup a gestáscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Poloha a priebeh posúvania prvku, stránky alebo prvku prechádzajúceho viewportom.
Sprievodca: Vstup a gestáwheelInput
wheelInput({ x?, y? })Rozdiely kolieska myši.
Sprievodca: Vstup a gestáviewportInput
viewportInput({ root?, margin?, amount?, once? })Či je prvok vo viewporte.
Sprievodca: Vstup a gestámediaInput
mediaInput('(min-width: 768px)');Či zodpovedá media query.
Sprievodca: Vstup a gestálongPressInput
longPressInput({ delay?, threshold? })Ukazovateľ podržaný dlhšie ako oneskorenie a v medziach prahu pohybu.
Sprievodca: Vstup a gestáswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Smer, vzdialenosť a rýchlosť potiahnutia.
Sprievodca: Vstup a gestáVýstup a diagnostika
bind
bind(element, style) → { update, inspect, dispose }Naviaže štýly Animated na prvok mimo React; vracia update, inspect a dispose.
inspect
inspect(element) → [{ property, driver, reason }]Cesta prehrávania a dôvod fallbacku každej animovanej vlastnosti prvku.
Sprievodca: Výkon a prehrávanieoutput
output(targetRef, { style?, attributes?, properties?, text? })Vlastní výstup do štýlu, atribútu, textu alebo vlastnosti vnútri useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Pripojí mapovanie výstupu hneď; vracia flush a dispose.