Value
new Value(initial: number)Un număr modificabil cu setValue, setOffset, flattenOffset, extractOffset, stopAnimation și resetAnimation.
Referința API
Fiecare export din @kkwaenggwari/animated, cu semnătura și ghidul care îl explică.
Valori și grafuri
ValueXY
new ValueXY({ x?, y? })Pereche de valori x și y cu aceleași operații, plus getLayout și getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Creează un număr sau o înregistrare numerică cu nume în afara React. Crearea nu pornește nimic.
Ghid: Valori și stilAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Baza doar-citire a fiecărei valori și a fiecărui graf: getValue, interpolate și listeneri.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })O mapare vie de la intervalele de intrare la cele de ieșire, cu easing și extrapolare extend, clamp sau identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Un calcul pur, doar-citire, peste una sau mai multe intrări. Ieșirile care îl folosesc rulează în JavaScript.
Ghid: Valori și stilinterpolateFn
interpolateFn({ value, inputRange, outputRange });Evaluează o interpolare o singură dată pentru un număr simplu.
Ghid: Valori și stiladd
add(...inputs);Suma numerelor și valorilor.
Ghid: Valori și stilsubtract
subtract(a, b);Diferența a două intrări.
Ghid: Valori și stilmultiply
multiply(...inputs);Produsul numerelor și valorilor.
Ghid: Valori și stildivide
divide(a, b);Câtul a două intrări.
Ghid: Valori și stilmodulo
modulo(a, b);O valoare circulară, de exemplu pentru o rotație fără sfârșit.
Ghid: Valori și stildiffClamp
diffClamp(input, min, max);Urmează schimbările intrării, dar rămâne într-un interval; util pentru antete care se ascund la derulare.
Ghid: Valori și stilHook-uri React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Deține un număr sau o înregistrare numerică pe durata componentei. În style este o variabilă CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Deține o valoare și fiecare controler, intrare și ieșire declarate în factory-ul ei. Pornește, repornește la schimbarea dependențelor și face curat.
Ghid: Valori și stiluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Deține o valoare bidimensională completă.
Ghid: Valori și stiluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDă unui nod derivat care nu este o expresie calc() propria variabilă CSS, cu durata de viață a componentei.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Apelează o funcție la fiecare schimbare a unui nod sau a unui ValueXY; eliminat la demontare.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Returnează { mounted, animatedValue } pentru intrare și ieșire bazate pe hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Setează scope-ul implicit al variabilelor CSS pentru valorile de hook de sub el.
Ghid: Valori și stilflushAnimatedUpdates
flushAnimatedUpdates();Aplică sincron ieșirea în așteptare, pentru teste deterministe.
Ghid: Valori și stilDrivere, compoziție și cronologii
timing
timing(value, { toValue, duration?, delay?, easing? })Mișcă o valoare pe o curbă easing într-o durată fixă.
Ghid: Timing, arcuri și compozițiespring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Mișcă o valoare cu fizica arcului, păstrând viteza unei mișcări întrerupte.
Ghid: Timing, arcuri și compozițiedecay
decay(value, { velocity, deceleration? })Pornește cu o viteză și încetinește.
Ghid: Timing, arcuri și compozițiedelay
delay(ms);Un controler care doar așteaptă.
Ghid: Timing, arcuri și compozițiesequence
sequence([a, b, c]);Rulează controlere unul după altul.
Ghid: Timing, arcuri și compozițieparallel
parallel([a, b], { stopTogether? }?)Rulează controlere împreună.
Ghid: Timing, arcuri și compozițiestagger
stagger(ms, [a, b, c]);Pornește controlere unul după altul la un interval fix.
Ghid: Timing, arcuri și compozițieloop
loop(animation, { iterations?, resetBeforeIteration? }?)Repetă un controler de un număr de ori sau la nesfârșit.
Ghid: Timing, arcuri și compozițiekeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Trece o valoare prin mai multe numere, cu momente și repetări opționale.
Ghid: Timing, arcuri și compozițieEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Curbe care corespund celor din React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier și ajutoarele in/out.
Ghid: Timing, arcuri și compozițiecreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Un ceas cu derulare și piste cu nume, în afara React.
Ghid: Timing, arcuri și compozițieuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)O cronologie deținută de componentă ale cărei piste funcționează direct în stilul obișnuit.
Ghid: Timing, arcuri și compozițieComponente și layout
Animated
<Animated.div seed pose tempo respond depart move />;Spațiul de nume al gazdelor HTML și SVG precum Animated.div, plus funcțiile de bază sub numele din React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Face ca o componentă care transmite ref-ul să accepte props-urile gazdelor Animated.
Ghid: Componente AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Împarte un nume de poză, un tempo și valori implicite de animație cu elementele Animated din interior.
Ghid: Componente AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Păstrează copiii cu key montați până se încheie plecarea lor.
Ghid: Componente AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animează schimbările de layout ale elementelor move și leagă elementele cu aceeași identitate.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Aceeași coordonare de captură și commit a layoutului pentru alte renderere.
Ghid: Componente AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Reordonarea cu cursorul și tastatura a unei liste controlate pe o singură axă.
Ghid: Componente AnimatedIntrare și conexiuni
input
input(targetRef, adapter, onEvent?)Atașează unui element un adaptor de intrare ca controler deținut.
Ghid: Intrare și gesturifollow
follow(target, source, { stiffness?, damping?, mass? }?)Face ca o valoare să o urmeze pe alta cu arc.
Ghid: Intrare și gesturiconnect
connect(node, (value) => write(value));Trimite fiecare schimbare a unui nod unei funcții.
Ghid: Intrare și gesturievent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mapează date de eveniment imbricate în valori, ca în React Native.
Ghid: Intrare și gesturidragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Tragere cu cursorul și tastatura, cu limite, margini elastice, momentum și settle.
Ghid: Intrare și gesturipinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Scară și rotație dintr-un gest cu două puncte de contact.
Ghid: Intrare și gesturimoveInput
moveInput({ x?, y?, relative?, reset? })Coordonatele cursorului, opțional relative la centrul elementului.
Ghid: Intrare și gesturiscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Poziția și progresul derulării unui element, al paginii sau al unui element care traversează viewport-ul.
Ghid: Intrare și gesturiwheelInput
wheelInput({ x?, y? })Deltele rotiței.
Ghid: Intrare și gesturiviewportInput
viewportInput({ root?, margin?, amount?, once? })Dacă elementul este în viewport.
Ghid: Intrare și gesturimediaInput
mediaInput('(min-width: 768px)');Dacă o media query se potrivește.
Ghid: Intrare și gesturilongPressInput
longPressInput({ delay?, threshold? })Un cursor ținut apăsat după o întârziere și în limita unui prag de mișcare.
Ghid: Intrare și gesturiswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Direcția, distanța și viteza glisării.
Ghid: Intrare și gesturiIeșire și diagnostic
bind
bind(element, style) → { update, inspect, dispose }Leagă stiluri Animated de un element în afara React; returnează update, inspect și dispose.
inspect
inspect(element) → [{ property, driver, reason }]Calea de redare și motivul căii de rezervă pentru fiecare proprietate animată a unui element.
Ghid: Performanță și redareoutput
output(targetRef, { style?, attributes?, properties?, text? })Deține o ieșire de stil, atribut, text sau proprietate în useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Atașează imediat o mapare de ieșire; returnează flush și dispose.