Creando nuestra primera animacion en Vue Native

Para entender las animaciones en Vue Native tenemos que tener clara algunas reglas:

1. Solamente podemos animar un componente, el llamado animated:view, no podemos animar botones, textos... y demás componentes de Vue Native o React Native, solamente el mencionado anteriormente.
2. Las animaciones en Vue Native siguen los mismos lineamientos que en React Native, y esto es lógico, ya que al emplear Vue Native internamente React Native, al final tenemos un uso muy similar.
3. Animamos propiedades, con sus valores, no componentes directamente, para animar por ejemplo un tamaño de un componente, tenemos que emplear una propiedad para variar valores numéricos, colores... entre otros aceptados, y son estos que se los establecemos a las componentes animables.
4. Las animaciones se realizan mediante una sencilla función en la cual especificamos los parámetros a animar, como la duración, propiedad a animar entre otras características:

timing(this.popiedadAAnimar, {
             toValue: 400,
             duration: 5000,
             easing: Easing.linear
             }

toValue: Nos permite indicar cual va a ser el valor que va a alcanzar la propiedad asignada a esta animación, el tope máximo o mínimo.
duration: indicamos la duración de la animación en milisegundos, en este caso 400 milésimas de segundo.
easing: Especificamos la curva de animación.

Y esto, se lo asignamos a un componente en nuestro template:

<animated:view
     class="estatica"
     :style="{
       height: popiedadAAnimar,
       width: popiedadAAnimar,
       borderRadius: popiedadAAnimar,
     }"
   />

popiedadAAnimar es la propiedad que vamos a animar:

 data() {
   return {
     popiedadAAnimar: 0,
   };
 },

La cual inicializamos:

this.popiedadAAnimar = new Animated.Value(10)

Viene siendo el equivalente de:

this.popiedadAAnimar =10

Pero con el new Animated.Value es el que tenemos que emplear para las animaciones.

Volviendo al inicio, tenemos la función clave en todo esto, que es la que nos permite a animar nuestro componente que luce como la siguiente:

crecerAnimacion: function () {
     Animated.timing(
       this.popiedadAAnimar,
       {
         toValue: 400,
         duration: 5000,
         easing: Easing.linear,
       },
       {
         toValue: 400,
         friction: 1,
       }
     ).start(() => {
       this.popiedadAAnimar = new Animated.Value(10);
       this.crecerAnimacion();
     });
   },

La función start se ejecuta al terminar la animación, es un callback, que podemos aprovechar para crear un ciclo infinito para las animaciones.

Código completo

El siguiente código forma parte de mi curso completo en Vue Native que puedes revisar desde la sección de cursos:

<template>
 <view class="center">
   <animated:view
     class="estatica"
     :style="{
       height: popiedadAAnimar,
       width: popiedadAAnimar,
       borderRadius: popiedadAAnimar,
     }"
   />
 </view>
</template>

<script>
import {Animated, Easing} from 'react-native'
export default {
 data() {
   return {
     popiedadAAnimar: 0,
   };
 },
 methods: {
     crecerAnimacion: function () {
     Animated.timing(
       this.popiedadAAnimar,
       {
         toValue: 400,
         duration: 5000,
         easing: Easing.linear,
       },
       {
         toValue: 400,
         friction: 1,
       }
     ).start(() => {
       this.popiedadAAnimar = new Animated.Value(10);
       this.crecerAnimacion();
     });
   },
 },
 created() {
     this.popiedadAAnimar = new Animated.Value(0)
 },
 mounted() {
     this.crecerAnimacion()
 },
};
</script>
<style>
.estatica {
 background-color: red;
 align-self: center;
}
.container {
 justify-content: center;
 flex: 1;
}
</style>

 

A la final, temeos algo como lo siguiente:

Por supuesto, hay muchísimo más que ver sobre las animaciones en Vue Native:

1. Interpolaciones
2. Curvas
3. Animar colores

Esto con mucho más, forma parte de mi curso completo de Vue Native; puedes encontrar más información tambien en la documentación oficial.
Puedes ver la introducción de la sección de mi curso en la cual tratamos las animaciones más en detalle:

06-12-2021 - Andrés Cruz

In english

• Categoría
• /
• Vue Native
• /
• Creando nuestra primera animacion en Vue Native