Lottie, anima fácil tus apps React Native

Lottie es una librería de código abierto creada por AirBnb que nos posibilita introducir de forma sencilla animaciones en nuestras apps. Actualmente está disponible para muchas tecnologías tanto nativas, híbridas como soportado en los navegadores web.

Las animaciones en Lottie se desarrollan en Adobe After Effects, y se exportan a un archivo en formato JSON que luego es “entendido” por la librería que lo renderiza. El plugin de After Effects encargado de generar el JSON se llama Bodymovin y también está disponible para descargar.

En esta entrada vamos a ver como usar las ventajas de esta librería para introducir animaciones en una app desarrollada con React Native.

Añadiendo Lottie al proyecto

Lo primero es crear un proyecto en React Native y añadir la dependencia de lottie llamada: lottie-react-native, la versión actual es la 3.0.3 y depende de RN > 0.60.

Para instalar la librería de lottie debemos pararnos en la raíz de nuestro proyecto RN y ejecutar:

yarn add lottie-react-native

El siguiente paso es buscar las animaciones que deseamos para nuestro proyecto; descargarlas y colocarlas en una carpeta de assets dentro de nuestro proyecto. El repositorio de lottiefiles, tiene cientos de animaciones gratuitas.

En nuestro caso vamos a usar para este ejemplo: LineAnimation y TwitterHeart. Los hemos descargado y colocado dentro de la carpeta assets/lottie-files

Lo próximo es, comenzar a usar las animaciones; podemos simplemente colocarlas y que se animen siempre, o que la animación inicie y termine ante eventos particulares.

Diseñando la vista

Primero vamos a diseñar una vista en RN para colocar los elementos de lottie que queremos visualizar.

<View style={{ flex: 3, flexDirection: "row" }}>
        <View style={{ flex: 2 }}>
          <LottieView
            resizeMode={'cover'}
            key={1}
            source={require("./assets/lottie-files/TwitterHeart.json")}
            progress={this.state.progress}
          />
        </View>
        <View style={{ flex: 2 }}>
          <LottieView
            source={require("./assets/lottie-files/LineAnimation.json")}
            autoPlay
            loop
          />
        </View>
      </View>
      <View style={{flex: 2}}>
      <View style={{ alignItems:'center' }}>
          <TouchableHighlight
          onPress={() => this.runAnimation()}
          style={{backgroundColor: "#181888", padding: 10, borderRadius: 3  }}
          >
            <Text style={{color: '#ffffff', fontSize: 20}}>Me gusta</Text>
          </TouchableHighlight>
        </View>
      </View>

Acá hemos diseñado una vista sencilla en la que pondremos dos elementos en la parte superior, donde están una al lado de la otra nuestras animaciones lottie previamente descargadas y debajo un botón “Me Gusta”.

El elemento lottie de la derecha está animado constantemente, mientras el corazón lo hará solo cuando pulsemos “Me Gusta”.

En el caso del elemento de la derecha tiene las propiedades de abajo, autoPlay indica que inicie al cargar la vista, mientras loop le dice que no pare la animación.

<LottieView
 source={require("./assets/lottie-files/LineAnimation.json")}
 autoPlay
 loop
 />

El elemento de la izquierda (corazón) por su parte no tiene estas propiedades; el atributo progress, depende de un valor que está en un state de la aplicación, y se renderizará en dependencia de dicha variable.

<LottieView
  resizeMode={'cover'}
 key={1}
 source={require("./assets/lottie-files/TwitterHeart.json")}
 progress={this.state.progress}
 />        

El botón “Me Gusta” llamará al método runAnimation():

runAnimation() {
    //this.animation.play();
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 1200,
      easing: Easing.linear
    }).start();
}

Este método controla el state progress, que al iniciar la aplicación se había puesto a 0 en el constructor.

this.state = {
      progress: new Animated.Value(0)
};

Como resultado obtenemos la vista siguiente:

Todo el código de este artículo lo puedes encontrar acá. Espero te haya gustado, si fue así puedes invitarme un café y dejarme los comentarios.