Cerca de 5 minutos · React 16.8+ · React DOM

Começar

Da instalação aos gestos e às animações de entrada e saída em seis passos. Cada passo é um componente pequeno que funciona.

1
Instalar
O Animated não tem dependências em tempo de execução. React 16.8+ é uma dependência peer.
A entrada do pacote é marcada com 'use client'. No App Router do Next.js, um layout de servidor pode renderizar AnimatedProvider; use os hooks e Animated.<tag> dentro de Client Components.
$
```
npm install @kkwaenggwari/animated
```
O import @kkwaenggwari/animated é resolvido no seu editor.
Mova seu primeiro valor
useAnimatedValue(1) mantém um número vivo durante toda a vida do componente. Coloque direto em style: ele vira uma variável CSS, então o React não renderiza enquanto ele muda.
timing(value, { toValue, duration }).start() o move. Apertar de novo no meio do caminho começa da opacidade atual.
Preparando o exemplo…
A caixa some e volta, e um segundo clique no meio do caminho inverte a partir de onde ela está.
Derive várias saídas de um valor
interpolate mapeia o valor para comprimentos, ângulos ou números. Sem easing, vira um calc() exato da mesma variável, então cinco faixas custam o mesmo que uma.
Faixas de entrada diferentes sobre o mesmo valor criam uma cascata sem cinco animações separadas.
Preparando o exemplo…
Um clique move cinco faixas em cascata; mudar spread só muda as faixas.
Descreva um destino
Animated.button renderiza um button comum. seed é o primeiro quadro, pose é onde ele deve estar agora e tempo é como ele chega lá.
Quando pose muda no meio do trajeto, o elemento vira a partir de onde está na tela, mantendo a velocidade com uma mola.
Preparando o exemplo…
Clicar rápido nos cards nunca faz nenhum deles pular.
Conecte a entrada
input(ref, moveInput(...)) grava as coordenadas do ponteiro em valores. follow(target, source) faz um valor seguir outro com uma mola.
Tudo o que é declarado em uma factory de useAnimated pertence ao componente: listeners e molas param quando ele é desmontado ou quando uma dependência muda.
Preparando o exemplo…
O card se inclina na direção do ponteiro e volta ao lugar quando o ponteiro sai.
Anime a saída
Remover um filho do React normalmente o tira na hora. Animated.Keep mantém os filhos com key até a pose depart terminar.
wait renderiza os filhos novos só depois que todas as saídas terminam.
Preparando o exemplo…
As mensagens dispensadas saem com o movimento escolhido antes de sumir.

Você já tem o modelo inteiro

Valores, destinos, entrada e saídas compartilham os mesmos controladores, regras de interrupção e limpeza. Os guias aprofundam cada um.

Instalar

Mova seu primeiro valor

Derive várias saídas de um valor

Descreva um destino

Conecte a entrada

Anime a saída

Você já tem o modelo inteiro