1 RN Coisa por dia – Dia 9: API animada

No React Native, a API animada é usada porque oferece uma maneira performente e flexível de criar animações em seu aplicativo. 🔑 Razões para usar o desempenho da API animado Se você animar com o SetState, cada quadro causa uma renderização completa do React, que é lento. A API animada executa animações no tópico da interface do usuário nativo (especialmente com UsenativedRiver: True), para que as animações fiquem suaves (60fps) (quadros por segundo), mesmo se Javascript está ocupado. Animações declarativas Você descreve o que deve acontecer (por exemplo, “Mova esta caixa de x = 0 para x = 200 acima de 500ms”) e reaja lida com o nativo como. Torna as animações mais fáceis de raciocinar. Reutilização O mesmo animado. Mais fácil do que rastrear manualmente vários estados. Gestos + PhysicsSuports Spring Animaations, Decay (Momentum) e Interações com gestos de toque. Perfeito para a interface do usuário natural, como golpes, arrastos e saltos. Consistência de plataforma cruzada no iOS e Android com a mesma API, sem que você precise usar o código nativo para animações. Interpolation Você pode mapear um valor animado em diferentes intervalos. Exemplo: const Progress = useref (novo animado.value (0)). Current; // Slide horizontalmente const translatex = progress.interpolate ({inputRange: [0, 1]saída de saída: [0, 200],}); // desbota const opacity = progress.interpolate ({inputRange: [0, 0.5, 1]saída de saída: [1, 0.5, 0]// curva personalizada}); // girar const const = progress.interpolate ({inputRange: [0, 1]saída de saída: [“0deg”, “360deg”],}); Digite o modo de saída do modo de tela cheia, todos são derivados do mesmo valor de progresso. → Isso permite encher vários efeitos visuais de um valor. 🔹 passo a passo (useref (new animated.value (0)). Current;) 1- novo animado.Value (0) cria um objeto animado.Value que inicia em 0.Este é o tipo de reacto de tipo especial usa para direcionar animações (em vez de um número normal). 2- Useref (…) garante que o valor seja persistente entre os renderizadores. Sem o USEREF, todo renderizador criaria um novo animado.Value, redefinindo a animação de volta para 0. com USEREF, o React manterá o mesmo objeto durante o ciclo de vida do componente. 3- .Currentuseref retorna um objeto como {Current:} .. A corrente fornece o animado real.Value armazenado dentro. Exemplo de importação react, {useref, useeffect} de “react”; importar {animado, visualizar} de “react-native”; exportar caixa de função padrão () {const fadeanim = useref (new animated.value (0)). Current; // Inicie a opacidade em 0 useeffect (() => {animated.timing (Fadeanim, {ToValue: 1, duração: 2000, usenativedRiver: true, // execute no thread da interface do usuário}). start ();}, []); retornar ( ); } Digite o modo de saída do modo de tela cheia 👉 sem animação, você teria que atualizar manualmente a opacidade em todos os quadros – muito ineficiente. ✅ Em resumo: precisamos da API animada no React Native, porque torna as animações suaves, eficientes, declarativas e fáceis de combinar com gestos e física. 🔹 O que acontece com o SetState? Quando você chama o SetState, reaja as renderizações no thread js. Isso significa que todo quadro da animação depende do tópico JS ser livre e rápido. Se o thread js estiver ocupado (buscando API, analisando o JSON, renderizando um componente pesado), a animação abre os quadros → Gretes. É por isso que as animações com o SetState geralmente são executadas a 30fps ou menos, em vez de 60fps suaves. ⚖️ Comparação rápida entre desempenho animado (interno) e reajuste reanimado-> bom, mas o JS pode bloquear-> Excelente (executa no número de threads da interface do usuário) Manuseio de complexidade-> apenas animações básicas-> lida com suporte de gestos de fluxos muito complexos-> Limitado-> projetado para funcionar sem problemas com o reacto-gesto-ganho. Facilidade de uso-> API simples-> Dependências da curva de aprendizado mais acentuadas-> interno (sem instalação)-> Requer instalação e configuração recomendada para produção-> aplicativos pequenos/simples-> aplicativos médios/grandes com interface do usuário rico

Fonte