Animações a 60fps no React Native com Reanimated

Uma animação a 60 quadros por segundo tem 16 milissegundos para calcular cada quadro. Se a thread de JavaScript estiver ocupada carregando dados ou renderizando uma lista, quadros são perdidos e a animação engasga — especialmente em aparelhos Android mais simples.

Por que o Animated antigo sofre

A API Animated padrão pode delegar algumas animações ao nativo, mas qualquer lógica (seguir o dedo, reagir a rolagem) volta para o JavaScript.

O que o Reanimated muda

O Reanimated executa a lógica da animação diretamente na thread de interface, em funções chamadas *worklets*. A animação continua fluida mesmo se o JavaScript estiver ocupado.

const offset = useSharedValue(0)
const estilo = useAnimatedStyle(() => ({ transform: [{ translateY: offset.value }] }))
offset.value = withSpring(0, { damping: 18 })

Boas práticas

• Anime `transform` e `opacity`, não largura, altura ou margens, que forçam recalcular layout.
• Use molas (springs) para movimentos naturais, com durações curtas — o raciocínio dos 200 a 300ms vale aqui também (Micro-interações que convertem: como transições de 200ms a 300ms impactam a retenção do usuário).
• Combine com gestos nativos para elementos que seguem o dedo (Gestos nativos no React Native: arrastar, deslizar e soltar com fluidez).
• Respeite a preferência de reduzir movimento do sistema.

Teste no aparelho certo

O iPhone recente esconde problemas que o Android intermediário revela. Veja Testar em dispositivos reais: por que o emulador engana.

A We Codex desenvolve apps com animações nativas. Veja aplicativos nativos ou fale com a gente.