Como criar animações nativas de reação melhor

Os aplicativos móveis geralmente usam animação para animar a experiência do usuário. Mas criar animações de alta qualidade pode ser um desafio.

Felizmente, existem conceitos e técnicas que você pode usar para melhorar suas habilidades de animação. Você pode aplicá-los para criar animações melhores e mais suaves para seu próximo aplicativo móvel React Native.

Animações nativas de reação

O Reagir nativo animado A biblioteca é a maneira mais popular de criar animações em um aplicativo React Native.

Assim como Biblioteca de animação integrada do React, a Animated API faz parte da biblioteca Animated baseada em JavaScript. Animated fornece um conjunto de classes e métodos que permitem criar animações suaves e fluidas. Existem várias outras ótimas opções para criar animações React Native, como Reanimated.

No entanto, criar boas animações no React Native não é apenas usar a biblioteca certa ou definir as propriedades certas. Trata-se também de entender os princípios da animação e como aplicá-los no contexto do desenvolvimento de aplicativos móveis. Então, aqui estão alguns princípios-chave para entender e observar ao criar suas animações.

Ajustando a duração da animação

As animações devem parecer suaves e naturais para o usuário. Conseguir isso pode depender de como você lida com a duração de animações específicas que você cria.

A duração refere-se à quantidade de tempo que leva para uma animação ser executada completamente. Por padrão, as animações no React Native têm duração de 500 milissegundos, mas você pode ajustá-las para ficarem mais rápidas ou lentas.

Você deve ajustar a duração da animação de acordo com sua complexidade. Uma animação simples, como um fade-in, pode precisar apenas de uma curta duração, enquanto uma animação mais complexa, como um slide-in com efeito de salto, pode precisar de mais tempo para parecer natural e suave.

Com o Animation.timing() método, você pode criar uma animação cronometrada personalizada para atender às suas necessidades.

Aqui está um exemplo de como adicionar uma duração personalizada a uma simples animação fade-in:

importar Reagir, { useRef } de'reagir';
importar { Animado, Ver } de'reagir nativo';
const FadeInView = (adereços) => {
const fadeAnim = useRef(novo Animado. Valor(0)).atual; 
 Reagir.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 dar valor: 1,
 duração: 2000, // define a duração personalizada
 useNativeDriver: verdadeiro,
 }
 ).começar();
 }, [fadeAnim]);
retornar (
 estilo={{
 ...props.style,
 opacidade: fadeAnim,
 }}
 >
 {props.crianças}
 </Animated.View>
 );
}
exportarpadrãofunçãoAplicativo() {
retornar (
flex: 1, alinhar itens: 'Centro', justificarConteúdo: 'Centro'}}>
largura: 250, altura: 50, cor de fundo: 'Pó azul'}}>
tamanho da fonte: 28, alinhamento de texto: 'Centro', margem: 10}}>Fading em</Text>
 </FadeInView>
 </View>
 );
}

Ao escolher uma duração para sua animação, é importante encontrar o equilíbrio certo entre velocidade e suavidade.

Tente começar com uma duração mais longa quando estiver experimentando pela primeira vez. Uma duração mais longa lhe dará mais tempo para ajustar a função easing e refinar sua animação. Você sempre pode encurtar a duração mais tarde, quando estiver satisfeito com o efeito geral.

Usar funções de atenuação

Animações simples podem ter uma velocidade constante, mas variar a velocidade pode criar efeitos mais naturais. As funções de atenuação controlam a taxa de alteração de uma animação ao longo do tempo. Eles podem fazer com que suas animações comecem lentamente e depois acelerem. Definir diferentes velocidades à medida que a animação progride pode criar uma animação suave e envolvente.

Veja este exemplo de uso de uma função easing:

importar Reagir, { useRef } de'reagir';
importar { Animado, Ver } de'reagir nativo';
const FadeInView = (adereços) => {
const fadeAnim = useRef(novo Animado. Valor(0)).atual; 
 Reagir.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 dar valor: 1,
 duração: 2000,
 easing: Animated.easeOut, // use a função easing aqui
 useNativeDriver: verdadeiro,
 }
 ).começar();
 }, [fadeAnim]);
retornar (
 estilo={{
 ...props.style,
 opacidade: fadeAnim,
 }}
 >
 {props.crianças}
 </Animated.View>
 );
}
exportarpadrãofunçãoAplicativo() {
retornar (
flex: 1, alinhar itens: 'Centro', justificarConteúdo: 'Centro'}}>
largura: 250, altura: 50, cor de fundo: 'Pó azul'}}>
tamanho da fonte: 28, alinhamento de texto: 'Centro', margem: 10}}>Fade In</Text>
 </FadeInView>
 </View>
 );
}

Este código usa o Animated.easeOut função para controlar a taxa de mudança da opacidade de uma animação Visualizar. O Animated.timing() O método usará a função de atenuação para alterar gradualmente a opacidade de 0 para 1 durante dois segundos, para fazer com que a animação pareça desacelerar ao chegar ao fim.

Você pode usar diferentes tipos de funções de easing para tornar suas animações mais suaves, incluindo facilidade de entrada, facilidade de saída e facilidade de entrada.

Escolher a função de easing correta pode fazer uma grande diferença na qualidade percebida das animações do seu aplicativo. Vale a pena dedicar algum tempo para brincar com eles e ver o que funciona melhor para seus casos de uso específicos.

Keyframes ajudam com animações complexas

Quadros-chave são marcadores que permitem identificar momentos em sua animação em que você deseja fazer alterações em propriedades como posição, escala ou rotação. É como marcar pontos no tempo para guiar a animação.

Você pode usar um conjunto de quadros-chave para definir valores específicos para qualquer propriedade você quer animar. Isso ajuda a controlar o tempo e o comportamento, especialmente para animações complexas, como as que envolvem o movimento do personagem.

Para criar uma animação básica de quadro-chave, você precisará especificar os quadros-chave entre os quais deseja animar e a duração total.

Por exemplo, digamos que você queira animar um quadrado de uma posição inicial de (0, 0) para uma posição final de (100, 100) em um período de um segundo.

Você pode criar uma matriz de quadros-chave como este:

const quadros-chave = [
 { x: 0, y: 0 },
 { x: 50, y: 50 },
 { x: 100, y: 100 },
];

Nesse caso, existem três quadros-chave: um no início da animação, um no meio e um no final. Você pode então passar essa matriz de quadros-chave para sua biblioteca de animação, junto com uma duração de 1.000 milissegundos, para criar uma animação suave entre os quadros-chave.

Em algumas bibliotecas, você também precisará especificar uma função de easing para controlar como a animação progride. No entanto, você pode aplicar a ideia básica de especificar quadros-chave e duração à maioria das bibliotecas de animação.

Aproveite o dispositivo com aceleração de hardware

A aceleração de hardware pode ser uma ferramenta poderosa para otimizar o desempenho de suas animações React Native. Aproveitando o hardware gráfico do dispositivo, você pode descarregar parte do trabalho de processamento da CPU e, por sua vez, obter animações mais suaves e responsivas.

A GPU do dispositivo processará nativamente os valores e estilos animados, em vez de o thread JavaScript ter que fazer isso.

A aceleração de hardware pode não estar disponível em todos os dispositivos, por isso é importante testar suas animações em vários dispositivos reais para garantir o melhor desempenho.