Como criar animação contínua em React Native usando Animated.loop()

Um dos principais recursos da API animada do React Native é a Animated.loop() método com o qual você pode criar animação contínua que se repete indefinidamente.

Exploraremos como usar o método Animated.loop() para criar animação contínua no React Native e aprenderemos como personalizar e aprimorar essas animações.

Compreendendo o método Animated.loop()

Para usar o método Animated.loop(), primeiro você precisa criar um Animado. Valor objeto. Esse valor é atualizado em cada quadro do loop de animação e será usado para animar o componente de destino.

Uma vez que o Animated. Value foi criado, você pode passá-lo para o método Animated.loop() junto com um objeto de configuração de animação que define o comportamento da animação.

Este objeto de configuração pode incluir propriedades como duração, facilitando, e atraso, que determinam como a animação se comportará.

Repetindo Sua Animação

Por padrão, o método Animated.loop() cria um loop infinito da animação, o que significa que a animação continuará a se repetir até ser interrompida manualmente. No entanto, você pode especificar uma duração para o loop de animação definindo o iterações propriedade no objeto de configuração da animação.

O exemplo a seguir que demonstra como usar Animation.loop() para criar uma animação de rotação em loop:

importar Reagir, { useState, useEffect } de'reagir';
importar { Folha de Estilo, Visualização, Animação, Imagem } de'reagir nativo';
exportarpadrãofunçãoAplicativo() {
const [spinValue] = useState(novo Animado. Valor(0));
 useEffect(() => {
const spin = spinValue.interpolate({
 intervalo de entrada: [0, 1],
 intervalo de saída: ['0deg', '360 graus'],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 dar valor: 1,
 duração: 2000,
 useNativeDriver: verdadeiro,
 }
 )
 ).começar();
 }, []);
retornar (

 estilo={{ largura: 200, altura: 200, transformar: [{ girar: spinValue }] }}
 fonte={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
const estilos = StyleSheet.create({
 recipiente: {
 flexível: 1,
 itens de alinhamento: 'Centro',
 justificarConteúdo: 'Centro',
 },
});

Neste exemplo, criamos um arquivo Animated. Objeto de valor chamado spinValue e defina seu valor inicial como 0. Chamamos então o laço() método no Animated.timing() objeto, que recebe o estado spinValue como seu argumento. O objeto Animated.timing() descreve como a animação progredirá ao longo do tempo e, nesse caso, gira uma imagem em 360 graus.

Para definir a duração do loop, passamos um duração ao objeto Animated.timing(), que determinará por quanto tempo a animação será executada antes do loop. Definimos a propriedade de duração como 2000, o que significa 2 segundos antes de reiniciar.

Você também pode definir o número de vezes que a animação deve repetir passando o iterações propriedade ao método loop().

Por exemplo, suponha que você deseja que a animação faça um loop cinco vezes antes de parar. Nesse caso, você pode chamar Animated.loop() com iterações: 5. Se você quiser que a animação fique em loop indefinidamente, você pode omitir o iterações propriedade completamente.

Usando Animation.loop(), definindo sua duração e aplicando o estilo CSS corretamente ao objeto de exibição retornado, você pode criar animações suaves em loop no React Native.

Trabalhando com animação complexa

Trabalhar com animação complexa não é tão simples quanto trabalhar com animação única. Eles geralmente exigem um pouco mais de trabalho para garantir que se comportem conforme o esperado.

Aqui estão duas dicas que ajudarão você ao fazer loops de animações complexas no React Native:

1. Divida a animação em partes menores

Você pode dividir animações complexas em animações menores e mais simples que podem ser repetidas individualmente. Por exemplo, uma animação complexa que envolve rotação e translação pode ser dividida em duas animações separadas, que serão repetidas independentemente. Ao dividir a animação em partes menores, você pode simplificar o código e torná-lo mais fácil de manusear.

2. Use o método Animated.sequence()

O Animated.sequence() O método permite que você execute uma sequência de animações uma após a outra. Esse método pode criar animações em loop complexas encadeando animações em loop único. Você pode usarAnimated.sequence() para criar uma animação que primeiro esmaece em uma imagem, gira-a e, em seguida, esmaece, repetindo toda a sequência depois de concluída.

Essas dicas fornecidas junto com o dicas gerais para otimizar seus aplicativos React Native ajudaria você a criar animações em loop de alto desempenho.

Experimente com sua animação

As animações em loop no React Native podem ser uma ferramenta poderosa para criar uma experiência de usuário mais envolvente e dinâmica. Você deve experimentar diferentes técnicas para criar animações em loop para obter uma animação visualmente atraente e de alto desempenho.