Value
new Value(initial: number)Um número mutável com setValue, setOffset, flattenOffset, extractOffset, stopAnimation e resetAnimation.
Referência da API
Todos os exports de @kkwaenggwari/animated, com assinatura e o guia que os explica.
Valores e grafos
ValueXY
new ValueXY({ x?, y? })Valores x e y em par com as mesmas operações, além de getLayout e getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Cria um número ou um registro numérico nomeado fora do React. Criar não dispara nada.
Guia: Valores e styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)A base somente leitura de todo valor e grafo: getValue, interpolate e listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Um mapeamento vivo entre faixas de entrada e de saída, com easing e extrapolação extend, clamp ou identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Um cálculo puro e somente leitura sobre uma ou mais entradas. As saídas que o usam rodam em JavaScript.
Guia: Valores e styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });Avalia uma interpolação uma vez para um número simples.
Guia: Valores e styleadd
add(...inputs);A soma de números e valores.
Guia: Valores e stylesubtract
subtract(a, b);A diferença entre duas entradas.
Guia: Valores e stylemultiply
multiply(...inputs);O produto de números e valores.
Guia: Valores e styledivide
divide(a, b);O quociente de duas entradas.
Guia: Valores e stylemodulo
modulo(a, b);Um valor que dá a volta, por exemplo para uma rotação sem fim.
Guia: Valores e stylediffClamp
diffClamp(input, min, max);Segue as mudanças da entrada, mas fica dentro de uma faixa; útil para cabeçalhos que se escondem na rolagem.
Guia: Valores e styleHooks do React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Mantém um número ou registro numérico durante a vida do componente. Em style, é uma variável CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Mantém um valor e todo controlador, entrada e saída declarados na factory dele. Começa, recomeça quando as dependências mudam e faz a limpeza.
Guia: Valores e styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Mantém um valor bidimensional completo.
Guia: Valores e styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDá a um nó derivado que não é uma expressão calc() uma variável CSS própria, com a vida do componente.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Chama uma função a cada mudança de um nó ou de um ValueXY; removido na desmontagem.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Retorna { mounted, animatedValue } para entrada e saída baseadas em hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Define um scope padrão de variáveis CSS para os valores de hook abaixo dele.
Guia: Valores e styleflushAnimatedUpdates
flushAnimatedUpdates();Aplica a saída pendente de forma síncrona, para testes determinísticos.
Guia: Valores e styleDrivers, composição e linhas do tempo
timing
timing(value, { toValue, duration?, delay?, easing? })Move um valor por uma curva de easing durante um tempo fixo.
Guia: Timing, molas e composiçãospring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Move um valor com física de mola, mantendo a velocidade de um movimento interrompido.
Guia: Timing, molas e composiçãodecay
decay(value, { velocity, deceleration? })Começa com uma velocidade e desacelera.
Guia: Timing, molas e composiçãodelay
delay(ms);Um controlador que só espera.
Guia: Timing, molas e composiçãosequence
sequence([a, b, c]);Executa controladores um depois do outro.
Guia: Timing, molas e composiçãoparallel
parallel([a, b], { stopTogether? }?)Executa controladores juntos.
Guia: Timing, molas e composiçãostagger
stagger(ms, [a, b, c]);Inicia controladores um depois do outro com intervalo fixo.
Guia: Timing, molas e composiçãoloop
loop(animation, { iterations?, resetBeforeIteration? }?)Repete um controlador algumas vezes ou para sempre.
Guia: Timing, molas e composiçãokeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Leva um valor por vários números, com tempos e repetições opcionais.
Guia: Timing, molas e composiçãoEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Curvas iguais às do React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier e auxiliares in/out.
Guia: Timing, molas e composiçãocreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Um relógio que permite busca, com trilhas nomeadas, fora do React.
Guia: Timing, molas e composiçãouseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Uma linha do tempo que pertence ao componente, cujas trilhas funcionam direto no style comum.
Guia: Timing, molas e composiçãoComponentes e layout
Animated
<Animated.div seed pose tempo respond depart move />;O namespace dos hosts HTML e SVG como Animated.div, mais as funções principais com os nomes do React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Faz um componente que repassa a ref aceitar as props dos hosts Animated.
Guia: Componentes AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Compartilha um nome de pose, um tempo e padrões de animação com os elementos Animated de dentro.
Guia: Componentes AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Mantém montados os filhos com key até a saída terminar.
Guia: Componentes AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Anima as mudanças de layout dos elementos move e conecta os elementos com a mesma identidade.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }A mesma coordenação de layout por captura e confirmação para outros renderizadores.
Guia: Componentes AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Reordenação com ponteiro e teclado de uma lista controlada, em um eixo.
Guia: Componentes AnimatedEntrada e conexões
input
input(targetRef, adapter, onEvent?)Conecta um adaptador de entrada a um elemento como controlador gerenciado.
Guia: Entrada e gestosfollow
follow(target, source, { stiffness?, damping?, mass? }?)Faz um valor seguir outro com uma mola.
Guia: Entrada e gestosconnect
connect(node, (value) => write(value));Envia cada mudança de um nó para uma função.
Guia: Entrada e gestosevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mapeia dados aninhados de eventos para valores, como no React Native.
Guia: Entrada e gestosdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Arraste com ponteiro e teclado, com limites, bordas elásticas, inércia e settle.
Guia: Entrada e gestospinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Escala e rotação a partir de um gesto com dois ponteiros.
Guia: Entrada e gestosmoveInput
moveInput({ x?, y?, relative?, reset? })Coordenadas do ponteiro, opcionalmente relativas ao centro do elemento.
Guia: Entrada e gestosscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Posição e progresso da rolagem de um elemento, da página ou de um elemento atravessando o viewport.
Guia: Entrada e gestoswheelInput
wheelInput({ x?, y? })Deltas da roda do mouse.
Guia: Entrada e gestosviewportInput
viewportInput({ root?, margin?, amount?, once? })Se o elemento está no viewport.
Guia: Entrada e gestosmediaInput
mediaInput('(min-width: 768px)');Se uma media query corresponde.
Guia: Entrada e gestoslongPressInput
longPressInput({ delay?, threshold? })Um ponteiro mantido pressionado depois de um atraso e dentro de um limite de movimento.
Guia: Entrada e gestosswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Direção, distância e velocidade do deslize.
Guia: Entrada e gestosSaída e diagnóstico
bind
bind(element, style) → { update, inspect, dispose }Vincula estilos Animated a um elemento fora do React; retorna update, inspect e dispose.
inspect
inspect(element) → [{ property, driver, reason }]O caminho de reprodução e o motivo do fallback de cada propriedade animada de um elemento.
Guia: Desempenho e reproduçãooutput
output(targetRef, { style?, attributes?, properties?, text? })Controla uma saída de style, atributo, texto ou propriedade dentro de useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Conecta um mapeamento de saída na hora; retorna flush e dispose.