Value
new Value(initial: number)Un numero modificabile con setValue, setOffset, flattenOffset, extractOffset, stopAnimation e resetAnimation.
Riferimento API
Ogni export di @kkwaenggwari/animated, con la sua firma e la guida che lo spiega.
Valori e grafi
ValueXY
new ValueXY({ x?, y? })Valori x e y accoppiati con le stesse operazioni, più getLayout e getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Crea un numero o un record numerico con nome fuori da React. La creazione non avvia nulla.
Guida: Valori e stileAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)La base in sola lettura di ogni valore e grafo: getValue, interpolate e listener.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Una mappatura viva da intervalli di input a intervalli di output, con easing ed estrapolazione extend, clamp o identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Un calcolo puro in sola lettura su uno o più input. Gli output che lo usano girano in JavaScript.
Guida: Valori e stileinterpolateFn
interpolateFn({ value, inputRange, outputRange });Valuta un’interpolazione una volta per un numero semplice.
Guida: Valori e stileadd
add(...inputs);La somma di numeri e valori.
Guida: Valori e stilesubtract
subtract(a, b);La differenza di due input.
Guida: Valori e stilemultiply
multiply(...inputs);Il prodotto di numeri e valori.
Guida: Valori e stiledivide
divide(a, b);Il quoziente di due input.
Guida: Valori e stilemodulo
modulo(a, b);Un valore che ricomincia da capo, per esempio una rotazione infinita.
Guida: Valori e stilediffClamp
diffClamp(input, min, max);Segue le variazioni dell’input ma resta entro un intervallo; utile per intestazioni che si nascondono allo scroll.
Guida: Valori e stileHook di React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Possiedi un numero o un record numerico per tutta la vita del componente. In style è una variabile CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Possiedi un valore più ogni controller, input e output dichiarato nella sua factory. Parte, riparte quando cambiano le dipendenze e fa pulizia.
Guida: Valori e stileuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Possiedi un valore bidimensionale completo.
Guida: Valori e stileuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDai a un nodo derivato che non è un’espressione calc() una variabile CSS propria, con la vita del componente.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Chiama una funzione a ogni modifica di un nodo o di un ValueXY; viene rimossa allo smontaggio.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Restituisce { mounted, animatedValue } per entrata e uscita basate su hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Imposta uno scope predefinito per le variabili CSS dei valori degli hook al suo interno.
Guida: Valori e stileflushAnimatedUpdates
flushAnimatedUpdates();Applica in modo sincrono l’output in sospeso, per test deterministici.
Guida: Valori e stileDriver, composizione e timeline
timing
timing(value, { toValue, duration?, delay?, easing? })Muovi un valore lungo una curva di easing per una durata fissa.
Guida: Timing, molle e composizionespring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Muovi un valore con la fisica di una molla, conservando la velocità di un movimento interrotto.
Guida: Timing, molle e composizionedecay
decay(value, { velocity, deceleration? })Parti con una velocità e rallenta.
Guida: Timing, molle e composizionedelay
delay(ms);Un controller che si limita ad aspettare.
Guida: Timing, molle e composizionesequence
sequence([a, b, c]);Esegui i controller uno dopo l’altro.
Guida: Timing, molle e composizioneparallel
parallel([a, b], { stopTogether? }?)Esegui i controller insieme.
Guida: Timing, molle e composizionestagger
stagger(ms, [a, b, c]);Avvia i controller uno dopo l’altro a un intervallo fisso.
Guida: Timing, molle e composizioneloop
loop(animation, { iterations?, resetBeforeIteration? }?)Ripeti un controller un certo numero di volte o all’infinito.
Guida: Timing, molle e composizionekeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Porta un valore attraverso più numeri, con tempi e ripetizioni facoltativi.
Guida: Timing, molle e composizioneEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Curve che corrispondono a React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier e gli helper in/out.
Guida: Timing, molle e composizionecreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Un orologio navigabile con tracce con nome, fuori da React.
Guida: Timing, molle e composizioneuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Una timeline che appartiene al componente, le cui tracce funzionano direttamente in un normale style.
Guida: Timing, molle e composizioneComponenti e layout
Animated
<Animated.div seed pose tempo respond depart move />;Il namespace degli host HTML e SVG come Animated.div, più le funzioni principali con i nomi di React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Fa accettare le props degli host Animated a un componente che inoltra il ref.
Guida: Componenti AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Condividi un nome di pose, un tempo e valori predefiniti di animazione con gli elementi Animated al suo interno.
Guida: Componenti AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Mantieni montati i figli con key finché la loro uscita non termina.
Guida: Componenti AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Anima i cambi di layout degli elementi move e collega elementi con la stessa identità.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Lo stesso coordinamento del layout per cattura e commit, per altri renderer.
Guida: Componenti AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Riordinamento con puntatore e tastiera di una lista controllata lungo un asse.
Guida: Componenti AnimatedInput e connessioni
input
input(targetRef, adapter, onEvent?)Collega a un elemento un adattatore di input come controller posseduto.
Guida: Input e gestifollow
follow(target, source, { stiffness?, damping?, mass? }?)Fai inseguire un valore da un altro con una molla.
Guida: Input e gesticonnect
connect(node, (value) => write(value));Invia ogni modifica di un nodo a una funzione.
Guida: Input e gestievent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mappa dati annidati degli eventi nei valori, come in React Native.
Guida: Input e gestidragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Trascinamento con puntatore e tastiera, con limiti, bordi elastici, momentum e settle.
Guida: Input e gestipinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Scala e rotazione da un gesto a due puntatori.
Guida: Input e gestimoveInput
moveInput({ x?, y?, relative?, reset? })Coordinate del puntatore, facoltativamente relative al centro dell’elemento.
Guida: Input e gestiscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Posizione e avanzamento dello scroll di un elemento, della pagina o di un elemento che attraversa il viewport.
Guida: Input e gestiwheelInput
wheelInput({ x?, y? })Delta della rotellina.
Guida: Input e gestiviewportInput
viewportInput({ root?, margin?, amount?, once? })Se l’elemento è nel viewport.
Guida: Input e gestimediaInput
mediaInput('(min-width: 768px)');Se una media query corrisponde.
Guida: Input e gestilongPressInput
longPressInput({ delay?, threshold? })Un puntatore tenuto premuto oltre un ritardo ed entro una soglia di movimento.
Guida: Input e gestiswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Direzione, distanza e velocità dello swipe.
Guida: Input e gestiOutput e diagnostica
bind
bind(element, style) → { update, inspect, dispose }Collega gli stili Animated a un elemento fuori da React; restituisce update, inspect e dispose.
inspect
inspect(element) → [{ property, driver, reason }]Il percorso di riproduzione e il motivo del fallback di ogni proprietà animata di un elemento.
Guida: Prestazioni e riproduzioneoutput
output(targetRef, { style?, attributes?, properties?, text? })Possiedi un output di stile, attributo, testo o proprietà dentro useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Collega subito una mappatura di output; restituisce flush e dispose.