Value
new Value(initial: number)Un número mutable con setValue, setOffset, flattenOffset, extractOffset, stopAnimation y resetAnimation.
Referencia de la API
Todos los exports de @kkwaenggwari/animated, con su firma y la guía que los explica.
Valores y grafos
ValueXY
new ValueXY({ x?, y? })Valores x e y emparejados con las mismas operaciones, más getLayout y getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Crea un número o un registro numérico con nombre fuera de React. Crearlo no pone nada en marcha.
Guía: Valores y styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)La base de solo lectura de todo valor y grafo: getValue, interpolate y listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Una correspondencia viva entre rangos de entrada y de salida, con easing y extrapolación extend, clamp o identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Un cálculo puro de solo lectura sobre una o varias entradas. Las salidas que lo usan se ejecutan en JavaScript.
Guía: Valores y styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });Evalúa una interpolación una vez para un número simple.
Guía: Valores y styleadd
add(...inputs);La suma de números y valores.
Guía: Valores y stylesubtract
subtract(a, b);La diferencia de dos entradas.
Guía: Valores y stylemultiply
multiply(...inputs);El producto de números y valores.
Guía: Valores y styledivide
divide(a, b);El cociente de dos entradas.
Guía: Valores y stylemodulo
modulo(a, b);Un valor que da la vuelta, por ejemplo para una rotación sin fin.
Guía: Valores y stylediffClamp
diffClamp(input, min, max);Sigue los cambios de la entrada pero se queda dentro de un rango; útil para cabeceras que se ocultan al hacer scroll.
Guía: Valores y styleHooks de React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Gestiona un número o un registro numérico durante la vida del componente. En style es una variable CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Gestiona un valor y todos los controladores, entradas y salidas declarados en su factoría. Arranca, se reinicia cuando cambian las dependencias y limpia.
Guía: Valores y styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Gestiona un valor bidimensional completo.
Guía: Valores y styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDa su propia variable CSS, con la vida del componente, a un nodo derivado que no es una expresión calc().
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Llama a una función en cada cambio de un nodo o de un ValueXY; se quita al desmontar.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Devuelve { mounted, animatedValue } para entradas y salidas basadas en hooks.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Fija un scope de variables CSS por defecto para los valores de hook que haya debajo.
Guía: Valores y styleflushAnimatedUpdates
flushAnimatedUpdates();Aplica de forma síncrona la salida pendiente, para pruebas deterministas.
Guía: Valores y styleDrivers, composición y líneas de tiempo
timing
timing(value, { toValue, duration?, delay?, easing? })Mueve un valor por una curva de easing durante una duración fija.
Guía: Timing, resortes y composiciónspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Mueve un valor con física de resorte, conservando la velocidad de un movimiento interrumpido.
Guía: Timing, resortes y composicióndecay
decay(value, { velocity, deceleration? })Empieza con una velocidad y va frenando.
Guía: Timing, resortes y composicióndelay
delay(ms);Un controlador que solo espera.
Guía: Timing, resortes y composiciónsequence
sequence([a, b, c]);Ejecuta controladores uno tras otro.
Guía: Timing, resortes y composiciónparallel
parallel([a, b], { stopTogether? }?)Ejecuta controladores a la vez.
Guía: Timing, resortes y composiciónstagger
stagger(ms, [a, b, c]);Arranca controladores uno tras otro con un intervalo fijo.
Guía: Timing, resortes y composiciónloop
loop(animation, { iterations?, resetBeforeIteration? }?)Repite un controlador un número de veces o para siempre.
Guía: Timing, resortes y composiciónkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Lleva un valor por varios números, con tiempos y repeticiones opcionales.
Guía: Timing, resortes y composiciónEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Curvas iguales a las de React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier y ayudantes in/out.
Guía: Timing, resortes y composicióncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Un reloj que se puede posicionar, con pistas con nombre, fuera de React.
Guía: Timing, resortes y composiciónuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Una línea de tiempo que pertenece a un componente y cuyas pistas funcionan directamente en el style normal.
Guía: Timing, resortes y composiciónComponentes y layout
Animated
<Animated.div seed pose tempo respond depart move />;El espacio de nombres de los hosts HTML y SVG como Animated.div, más las funciones principales con los nombres de React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Hace que un componente que reenvía la ref acepte las props de los hosts Animated.
Guía: Componentes AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Comparte un nombre de pose, un tempo y valores por defecto de animación con los elementos Animated que contiene.
Guía: Componentes AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Mantiene montados a los hijos con key hasta que termina su salida.
Guía: Componentes AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Anima los cambios de layout de los elementos move y conecta los elementos con la misma identidad.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }La misma coordinación de layout por captura y confirmación para otros renderizadores.
Guía: Componentes AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Reordenación con puntero y teclado de una lista controlada en un eje.
Guía: Componentes AnimatedEntrada y conexiones
input
input(targetRef, adapter, onEvent?)Conecta un adaptador de entrada a un elemento como controlador gestionado.
Guía: Entrada y gestosfollow
follow(target, source, { stiffness?, damping?, mass? }?)Hace que un valor siga a otro con un resorte.
Guía: Entrada y gestosconnect
connect(node, (value) => write(value));Envía cada cambio de un nodo a una función.
Guía: Entrada y gestosevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Asigna datos anidados de eventos a valores, como en React Native.
Guía: Entrada y gestosdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Arrastre con puntero y teclado, con límites, bordes elásticos, inercia y settle.
Guía: Entrada y gestospinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Escala y rotación a partir de un gesto con dos punteros.
Guía: Entrada y gestosmoveInput
moveInput({ x?, y?, relative?, reset? })Coordenadas del puntero, opcionalmente relativas al centro del elemento.
Guía: Entrada y gestosscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Posición y progreso del scroll de un elemento, de la página o de un elemento que atraviesa el viewport.
Guía: Entrada y gestoswheelInput
wheelInput({ x?, y? })Desplazamientos de la rueda.
Guía: Entrada y gestosviewportInput
viewportInput({ root?, margin?, amount?, once? })Si el elemento está en el viewport.
Guía: Entrada y gestosmediaInput
mediaInput('(min-width: 768px)');Si una media query coincide.
Guía: Entrada y gestoslongPressInput
longPressInput({ delay?, threshold? })Un puntero mantenido tras un retardo y dentro de un umbral de movimiento.
Guía: Entrada y gestosswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Dirección, distancia y velocidad de un deslizamiento.
Guía: Entrada y gestosSalida y diagnóstico
bind
bind(element, style) → { update, inspect, dispose }Vincula estilos Animated a un elemento fuera de React; devuelve update, inspect y dispose.
inspect
inspect(element) → [{ property, driver, reason }]El camino de reproducción y el motivo de fallback de cada propiedad animada de un elemento.
Guía: Rendimiento y reproducciónoutput
output(targetRef, { style?, attributes?, properties?, text? })Gestiona una salida de style, atributo, texto o propiedad dentro de useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Conecta un mapeo de salida de inmediato; devuelve flush y dispose.