Usando o método Animated.spring() para animações dinâmicas em React Native

A biblioteca Animated API do React Native pode ajudá-lo a criar animações dinâmicas e fluidas com pouco esforço.

Aprenda a criar animações com efeito de mola, depois descubra como controlar sua duração e velocidade e aplicá-las em cenários do mundo real.

O que são animações dinâmicas?

Animações dinâmicas são animações onde os movimentos de objetos animados não são pré-programados. Você pode iniciá-los em resposta à interação do usuário ou alterações no ambiente. A técnica é mais popular em animação de videogame, aplicativos de mídia social ou outras formas de mídia interativa.

As animações dinâmicas podem fornecer uma experiência mais envolvente e envolvente para os usuários, pois permitem movimentos imprevisíveis e responsivos que podem mudar com base em vários fatores.

As animações em aplicativos móveis tornaram-se, ao longo dos anos, cada vez mais complexas. A API animada padrão do React Native avançou para acomodar essas complexidades. O

Animated.spring() O método fornecido pela API pode animar objetos React Native, criando um efeito dinâmico.

Controlando a Animação

Ao usar o Animated.spring() método, você precisará ter controle sobre a animação para garantir que ela se comporte como você deseja. Animated fornece um conjunto de métodos para controlar e manipular manualmente suas animações React Native.

Um desses métodos é parar(), o que faz com que a animação pare em seu valor atual. Este método é útil quando você precisa cancelar uma animação ou redefini-la para seu estado inicial.

Por exemplo:

const stopAnimation = () => {
 posição.parar(valor => {
 posição.setValue(0);
 });
};

Observe como você pode usar o definirValor() método para redefinir o valor da posição para seu estado inicial de 0.

Outro método disponível para você é reiniciar(), que retorna a animação ao seu estado inicial. Este método é útil quando você precisa reiniciar uma animação.

Aplicações do mundo real

Você pode explorar um uso prático do Animated.spring() método construindo uma animação simples. Uma bola redonda cairá em uma superfície quando um usuário interagir com ela e, em seguida, saltará de volta no ar. Você já deve ter um projeto nativo de reação com o qual possa trabalhar.

Primeiro, crie uma variável de estado para rastrear a posição da bola:

importar Reagir, { useState } de'reagir';
importar { Animado } de'reagir nativo';
const aplicativo = () => {
const [posição, setPosition] = useState(novo Animado. Valor(0));

retornar (
transformar: [{ traduzirY: posição }] }}>
 {/* Componente bola aqui */}
 </Animated.View>
 );
};

Usar Animado. Valor para criar uma variável de estado chamada posição que rastreará a posição vertical da bola. Enrole o Visualizar componente em Animado. Visualizar para que você possa aplicar animações a ele.

Em seguida, crie a função de animação que fará a bola cair e pular:

const startAnimation = () => {
 Animated.spring (posição, {
 dar valor: 300,
 atrito: 1,
 tensão: 10,
 useNativeDriver: verdadeiro,
 }).começar(() => {
 Animated.spring (posição, {
 dar valor: 0,
 atrito: 1,
 tensão: 10,
 useNativeDriver: verdadeiro,
 }).começar();
 });
};

Usar Animated.spring() para criar uma animação que moverá a bola de sua posição inicial de 0 para uma posição final de 300. Especificamos atrito e tensão valores para controlar o efeito de quique da bola ao definir useNativeDriver para verdadeiro para melhorar o desempenho.

Você pode implementar o código para acionar a animação quando um usuário interage com a bola:

retornar (

transformar: [{ traduzirY: posição }] }}>
 {/* Componente bola aqui */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Este código envolve o Animado. Visualizar componente em TocávelSemFeedback para que a animação seja acionada quando o usuário pressiona a bola. Você também pode acionar a animação quando o componente é montado chamando o método startAnimation() função dentro do React useEffect() gancho.

Com este código, você deve ter uma animação de bola caindo usando Animated.spring().

Animações dinâmicas em React Native

Você viu como implementar uma animação de bola caindo usando Animated.spring(), mas há muitas outras maneiras de usá-la para criar animações dinâmicas.

Por exemplo, você pode usar Animated.spring() para criar animações que simulem outros movimentos baseados na física, como balançar ou girar objetos.

Ao combinar Animated.spring() com outras funções de animação, como Animated.timing() ou Animated.sequence(), você pode criar animações complexas e contínuas que aprimoram a experiência do usuário.