Ferramentas de código aberto de estado e animação para React e React Native. Três pacotes focados que funcionam desde o primeiro import e só crescem até onde você precisa.
Os componentes leem o mesmo valor sem Provider, actions ou reducers. Só renderizam de novo quando a seleção deles muda, e salvar ou restaurar acontece exatamente quando você manda.
Use no React DOM os timing, spring e interpolate que você conhece do React Native Animated. Um valor controla o estilo de vários elementos, sem render do React a cada quadro.
A API do React Native Animated que você já conhece
O controle deslizante muda um único Value. Posição, giro, tamanho e cantos das doze formas vêm todos dele. Aperte a mola e depois pegue o controle no meio do movimento.
Números que rolam, um destaque que se move, listas que mexem só no que mudou, sheets e ações de deslizar. Passe seus dados — sem provider nem chamada de configuração — no React e no React Native.
Escolha um período: o MotionHighlight vai até ele, o MotionNumber rola, o ProgressRing se completa e o MotionList move só as linhas que mudaram.
HojeEsta semanaEste mês
Visitas
1,284
Início
Preços
Docs
Blog
Dados de exemplo
02 · Conjunto
Uma batida.Tudo se move.
Este palco foi feito com Animated. Um único Value com o progresso da rolagem rege ao mesmo tempo a posição, o giro, a escala e a opacidade de 48 formas.
01
Ressoar
Pontos espalhados se juntam nos anéis de um gongo.
02
Dividir
O anel se divide em três e ganha a cor de cada ferramenta.
03
Tomar forma
Eles viram as conexões do estado, a trajetória do movimento e os pilares do coro.
04
Compasso
Tudo se alinha e cai no mesmo tempo.
progress
03 · Princípios
Pequeno,do começo ao fim.
Comece com um import
Nada de provider envolvendo tudo nem configuração global logo de início. Adicione recursos só quando seu app pedir.
Só o que precisa
Só são atualizados os componentes cuja seleção mudou, os elementos que usam um valor e as linhas que se moveram.
Responsável até o fim
O movimento interrompido continua do que está na tela, e assinaturas e animações são liberadas quando o dono vai embora.
Tipado e documentado
Todo pacote traz declarações TypeScript, e a documentação está disponível em 39 idiomas.
04 · O nome
Kkwaenggwari,o gongo que puxa a banda.
Pronuncia-se “kuén-guá-ri”. No pungmul coreano, quem toca o kkwaenggwari (꽹과리) à frente dita o ritmo de todo o conjunto. Nossas ferramentas querem o mesmo: pequenas mas claras, mantendo seu app inteiro no mesmo compasso.
kkwaenggwariKkwaenggwari tem o nome do kkwaenggwari (꽹과리), um pequeno gongo coreano tocado com uma baqueta. Seu som claro e vibrante inspirou o nome destas pequenas ferramentas de código aberto.
