Criando uma animação de rotação em React Native

Neste tutorial, mostrarei como criar um botão que gira 720 graus quando pressionado. Usaremos o sistema de animação React Native Animated para criar a animação de rotação.

Criando o componente

Primeiro, criamos o componente funcional ButtonWithSpinque possui um TouchableOpacitycomponente com algum texto dentro.

Observe que o texto é criado usando o Animated.Textcomponente. Isso ocorre porque o texto que vai girar tem que ser animável . Se você estiver girando outra coisa, também poderá usar qualquer um desses componentes:

• Animado.Imagem
• Animado.ScrollView
• Animado.Visualizar
• Texto animado
• Animated.FlatList
• Lista de Seções Animada

A função handleAnimation

Animated.timing()anima um valor ao longo do tempo usando funções de atenuação . Por padrão, ele usa a easeInOutcurva que é perfeita para o que estamos fazendo. Passamos nosso rotateAnimationvalor e um valor de configuração, onde definimos a duração como 800ms. A animação é iniciada chamando start(), e incluímos uma função de retorno de chamada que redefine a animação.

Interpolar

O interpolate()método mapeia intervalos de entrada para intervalos de saída. Um mapeamento básico para converter um intervalo de 0–1 para um intervalo de 0–100 seria:

value.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
});

Também criamos o animatedStyleobjeto, que inclui um array transformcom o valor de rotação interpolateRotatingque acabamos de criar.

Juntando tudo

Adicione o animtedStyleobjeto ao Animated.Textcomponente e widtha ao TouchableOpacitycomponente e pronto!

Esta é a aparência do produto final:

E o código:

E aí temos que. Espero que você tenha achado isso útil. Este foi meu primeiro post no Medium, então qualquer feedback é muito bem-vindo!