Cómo animar con Lottie

Cómo animar con Lottie

No es ninguna sorpresa si os decimos que las microinteracciones son tendencia. Desde hace años las pequeñas animaciones copan las webs con el fin de mejorar su interacción, su usabilidad y, sobre todo, alegrarnos la vida haciendo mucho más agradable la experiencia de usuario.

Si alguna vez os habéis preguntado cómo llegar a hacer ese tipo de animaciones, en el siguiente post analizaremos Lottie, una interesante herramienta de Airbnb que te quitará de muchos quebraderos de cabeza a la hora de desarrollar las animaciones para tu web o aplicación móvil.

¿Qué es Lottie?

Lottie es una librería capaz de reproducir animaciones en tiempo real y de forma nativa en web, android e iOS. De esta forma, Lottie facilita el desarrollo e implementación de animaciones para diferentes plataformas, integrándose en Android e iOS permitiendo cargar animaciones como si fueran cualquier otro contenido estático. Además, Lottie las hace escalables y fáciles de adaptar a cualquier dispositivo y capaces de reaccionar a los eventos provocados por el usuario.

Lottie dispone incluso de su propia app en la que podrás comprobar cómo se reproducen tus animaciones sin necesidad de crear un proyecto desde cero.

¿Cómo trabaja Lottie?

Lottie trabaja con animaciones de After Effects exportadas gracias al plugging Bodymovin, capaz de convertirlas a formato JSON. De esta forma, una animación creada en el potentísimo programa de Adobe puede presentarse de forma nativa en cualquier dispositivo Android e iOS.

Para ello sólo tendremos que instalar el plugging Bodymovin en nuestro After Effects, crear la animación y exportarla en el formato adecuado según sea para web, Android o iOS. After Effects nos exportará un JSON con el que trabajaremos en el entorno en el que vayamos a implementar la animación.

A continuación te explicamos los pasos para trabajar con lottie para web y para proyectos Android y, como ya hemos mencionado, en ambos casos será necesario trabajar con el JSON que hemos exportado de After Effects gracias al plugging Bodymovin.

Lottie para web

Para utilizar Lottie en web necesitaremos tener en cuenta los siguientes pasos, como se muestra en en el siguiente proyecto de ejemplo:

  1. Importamos la librería bodymovin inclcuyendo el archivo o desde CDN:

    1
    2
    3
    
    <script src="js/bodymovin.js" type="text/javascript"></script>
    <!-- o -->
    <script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
  2. Creamos en nuestro index.html un <div> en su interior y cargamos el fichero JSON con la animación desde nuestro javascript.

    En index.html:

    1
    
    <div id="bm"> </div>

    En index.js

    1
    2
    3
    4
    5
    6
    7
    
    var animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'data.json'
    })
  3. Reproducimos nuestra animación:

    1
    2
    3
    
    LottieContainer.addEventListener('click', function() {
      animation.play();
    });

    Si queremos tener control sobre nuestras animaciones podemos utilizar los numerosos eventos que podrás encontrar en la documentación de lottie.

Lottie para Android

En caso de que quieras incluir animaciones con Lottie en un proyecto Android, estos son los pasos que tendrás que tener en cuenta:

  1. Agregar al build.gradle la librería Lottie:

    1
    2
    
    // Lottie
    implementation 'com.airbnb.android:lottie:2.5.0'
  2. Introducir el archivo JSON de la animación en la carpeta assets del proyecto. Hay que tener en cuenta que tendrás que crear la carpeta ya que el proyecto de Android no la incluye por defecto:
  3. Introducimos el componente en nuestro layout de la siguiente forma:

    1
    2
    3
    4
    5
    6
    7
    
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_example_lottie_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_fileName="animationLottie.json"
        app:lottie_loop="false"
        app:lottie_autoPlay="true"/>

    Cómo veis, trabajamos con el componente com.airbnb.lottie.LottieAnimationView al que le añadimos:

    1. En lottie_fileName el nombre del archivo JSON para Lottie.
    2. En lottie_loop si habilitamos (true) o no (false) la animación en bucle.
    3. En lottie_autoPlay si habilitamos (true) o no (false) la reproducción automática de la animación.
    En la documentación de Lottie podréis encontrar más atributos para controlar tu animación.

  4. Por último, configuramos nuestro código en el activity o fragment dentro del onCreateView para poder mostrar la animación utilizando los diferentes métodos para ello:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    final LottieAnimationView animationWithLottie = view.findViewById(R.id.intro_lottie_animation_view);
     
    // playAnimation para reproducir la animación
    animationWithLottie.setOnClickListener(new View.OnClickListener() {
       public void onClick(View v) {
           animationWithLottie.playAnimation();
       }
    });
     
    // pauseAnimation para pausar la animación
    animationWithLottie.setOnClickListener(new View.OnClickListener() {
       public void onClick(View v) {
           animationWithLottie.pauseAnimation();
       }
    });

Bancos de imágenes y recursos

Cómo habéis visto, Lottie es una herramienta muy potente a la hora de implementar animaciones y microinteraciones para nuestras webs o apps.

Crear animaciones para iconos, splash screen o botones de acción resultan especialmente sencillas gracias a trabajar con Lottie. Así que, si te has quedado con ganas, te animamos a descargarte alguno de los recursos del banco de recursos de Lottie y ponerte manos a la obra!

Publicado en octubre 28, 2019

,

,

,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

«