Um dos principais recursos da API animada do React Native é a Animated.loop() método com o qual você pode gerar animação contínua que se repete indefinidamente.
Exploraremos uma vez que usar o método Animated.loop() para gerar animação contínua no React Native e aprenderemos uma vez que personalizar e aprimorar essas animações.
Compreendendo o método Animated.loop()
Para usar o método Animated.loop(), primeiro você precisa gerar um Animated.Value objeto. Esse valor é atualizado em cada quadro do loop de animação e será usado para animar o componente de orientação.
Uma vez criado o objeto Animated.Value, você pode passá-lo para o método Animated.loop() junto com um objeto de feitio de animação que define o comportamento da animação.
Nascente objeto de feitio pode incluir propriedades uma vez que duração, facilitandoe delongadoque determinam uma vez que 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 feitio da animação.
O exemplo a seguir que demonstra uma vez que usar Animation.loop() para gerar uma animação de rotação em loop:
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Animated, Image } from 'react-native';export default function App() {
const [spinValue] = useState(new Animated.Value(0));
useEffect(() => {
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
Animated.loop(
Animated.timing(
spinValue,
{
toValue: 1,
duration: 2000,
useNativeDriver: true,
}
)
).start();
}, []);
return (
<View style={styles.container}>
<Animated.Image
style={{ width: 200, height: 200, transform: [{ rotate: spinValue }] }}
source={{ uri: 'https://reactjs.org/logo-og.png' }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Neste exemplo, criamos um objeto Animated.Value chamado spinValue e definimos seu valor inicial uma vez que 0. Em seguida, chamamos o laço() método no Animated.timing() objeto, que recebe o estado spinValue uma vez que seu argumento. O objeto Animated.timing() descreve uma vez que 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 uma vez que 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 invocar 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 gerar 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 prometer que se comportem conforme o esperado.
Cá 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 trasladaçã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 depois a outra. Esse método pode gerar animações em loop complexas encadeando animações em loop único. Você pode usar Animated.sequence() para gerar 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 as dicas gerais para otimizar seus aplicativos React Native ajudariam você a gerar animações em loop de cimeira desempenho.
Experimente com sua animação
As animações em loop no React Native podem ser uma utensílio poderosa para gerar uma experiência de usuário mais envolvente e dinâmica. Você deve testar diferentes técnicas para gerar animações em loop para obter uma animação visualmente sedutor e de cimeira desempenho.
