Introdução às animações no React Native

As animações podem dar vida a um aplicativo, tornando-o mais envolvente e intuitivo para o usuário. Mas se você é novo em animações React Native, começar pode ser um pouco assustador.

Explore as animações React Native e descubra como você pode começar a criar animações bonitas e suaves.

Como funcionam as animações nativas básicas do React?

As animações podem criar transições suaves entre diferentes telas ou elementos. Eles podem destacar informações ou fornecer feedback sobre as ações do usuário. As animações podem ser simples ou complexas e podem usar uma variedade de técnicas, como gráficos em movimento 2D ou 3D.

A portabilidade do React Native faz com que valha a pena usá-lo se você estiver segmentando várias plataformas. Um de seus recursos mais fortes é a capacidade de criar belas animações para aplicativos móveis.

Você pode animar um objeto React Native simplesmente alterando o estado de posição do componente desejado.

Por exemplo:

importar Reagir, { useState, useEffect } de'reagir';
importar { Exibir, folha de estilo } de'reagir nativo';
const aplicativo = () => {
// Inicializa o estado para rastrear a posição da caixa
const [boxPosition, setBoxPosition] = useState(0);
// Use o gancho useEffect para atualizar a posição da caixa a cada 1 segundo
 useEffect(() => {
const intervalo = setIntervalo(() => {
// Atualize a posição da caixa adicionando 10 à posição atual
 setBoxPosition(posição anterior => posição anterior + 10);
 }, 1000);
// Retorna uma função de limpeza para limpar o intervalo quando o componente
// desmonta
retornar() => clearInterval (intervalo);
 }, []);
// Define a posição da caixa usando a variável de estado no estilo inline
const estilocaixa = {
 transformar: [{ traduzirY: boxPosition }]
 };
retornar (


 </View>
 );
};
const estilos = StyleSheet.create({
 recipiente: {
 flexível: 1,
 itens de alinhamento: 'Centro',
 justificarConteúdo: 'Centro',
 },
 caixa: {
 largura: 100,
 altura: 100,
 cor de fundo: 'azul',
 },
});
exportarpadrão Aplicativo;

Esse código renderiza uma caixa azul que se move para baixo a cada segundo. A animação funciona usando o useEffect gancho para criar um temporizador que atualiza o boxPosition variável de estado a cada 1 segundo.

Embora isso possa funcionar em algumas situações, essa não é a melhor opção. As atualizações de estado no React Native funcionam de forma assíncrona, mas as animações dependem de atualizações de estado síncronas para funcionar corretamente. Implementar sua animação de forma assíncrona fará com que as atualizações de estado não sejam refletidas imediatamente na saída renderizada do componente, atrapalhando o tempo de suas animações.

São várias bibliotecas de animação como o Animado biblioteca, reagir-nativo-reanimado, e react-native-animatable para criar animações de alto desempenho em React Native. Cada uma dessas bibliotecas de animação elimina o problema de atualizações de estado assíncronas e é perfeitamente ideal.

A API React Native Animated

Animated é uma API fornecida pelo React Native. Você pode usá-lo para criar animações suaves que respondem às interações do usuário ou mudanças de estado.

A API animada permite criar valores animados que você pode interpolar e mapear para várias propriedades de estilo de seus componentes. Você pode atualizar esses valores ao longo do tempo usando vários métodos de animação. Os estilos de seus componentes serão atualizados conforme os valores animados mudam, resultando em animações suaves.

Animated funciona muito bem com o sistema de layout do React Native. Por causa disso, suas animações serão devidamente integradas ao restante de sua interface do usuário para uma aparência ainda melhor.

Para começar a usar o Animated em seu projeto React Native, você precisa importar o Animado módulo de 'react-native' no seu código:

importar { Animado } de'reagir nativo';

Com o Animated importado, você pode começar a criar animações. Para fazer isso, primeiro crie um valor animado que você irá manipular ao longo da animação:

const valoranimado = novo Animado. Valor(0);

O Animado. Valor é uma classe na API React Native Animated que representa um valor mutável. Você pode inicializá-lo com um valor inicial e, em seguida, atualizá-lo ao longo do tempo usando vários métodos de animação fornecidos pela Animated API, como .tempo(), .primavera(), e .decair(), especificando a duração da animação, função easing e outros parâmetros.

O valor animado é semelhante a um valor de estado em um componente React.

Você pode inicializar um Animado. Valor com o valor do estado inicial de um componente e, em seguida, atualize-o ao longo do tempo usando o setState método.

Por exemplo, você tem um componente que tem um valor de estado contar, que representa o número de vezes que o usuário clicou nesse botão.

Você pode criar um Animado. Valor e inicializá-lo com o valor do estado inicial de contar:

const aplicativo = () => {
const [count, setCount] = useState(0);
const valoranimado = novo Animado. Valor (contagem);
};

Então, sempre que o contar atualizações de valor de estado, você pode atualizar valoranimado também:

const handlebuttonClick = () => {
 setContador (contagem + 1);
 Animated.timing (animatedValue, {
 toValue: contagem + 1,
 duração: 500,
 useNativeDriver: verdadeiro
 }).começar();
};

Este exemplo atualiza valoranimado usando o Animated.timing() método sempre que um usuário clica no botão. O valoranimado conduz a animação e altera o valor em 500 milissegundos.

por relacionar Animado. Valor a um valor de estado dessa forma, você pode criar animações que respondem a mudanças no estado do seu componente.

Agora que você entende como manipular um valor animado, pode prosseguir para Interpolar o valor animado e mapeá-lo para uma propriedade de estilo do seu componente usando o Animated.interpolate() método.

Por exemplo:

const opacidade =animationValue.interpolate({
 intervalo de entrada: [0, 1],
 intervalo de saída: [0, 1]
});
retornar (

 {/* o conteúdo do seu componente */}
 </View>
);

Isso criará uma animação que desaparece gradualmente no Visualizar componente conforme o valor animado muda de 0 para 1.

Compreendendo os tipos de animação

Compreender os tipos de animação e como eles funcionam é importante para criar boas animações.

Usando o useNativeDriver opção com Animated melhora o desempenho. Essa opção permite descarregar animações para o thread de interface do usuário nativo. Ele pode melhorar significativamente o desempenho reduzindo a quantidade de processamento JavaScript necessária.

No entanto, nem todos os tipos de animação suportam o driver nativo. Tentar usar o driver nativo com animações que envolvem alterações de cor ou layout pode causar um comportamento inesperado.

Além disso, as animações que envolvem sequências complexas podem causar problemas significativos de desempenho em dispositivos com poder de processamento ou memória limitados. Esses déficits de desempenho também podem ser notáveis ​​se o seu projeto React Native estiver executando uma versão inferior que não apoiar o motor Hermes.

Compreender os pontos fortes e as limitações de diferentes tipos de animação pode ajudá-lo a escolher a abordagem certa para seu caso de uso.

Fique confortável com as animações nativas do React

As animações são uma ferramenta poderosa para criar interfaces de usuário envolventes e dinâmicas em aplicativos React Native. A Animated API fornece uma maneira flexível e eficiente de criar animações de sequência simples e complexas.

Ainda assim, é importante considerar o impacto no desempenho das animações e escolher a abordagem e a biblioteca apropriadas para usar em sua situação.