Guía / Artículo

Lottie SVG Animaciones

Flowbase
30 de octubre de 2020
Lottie SVG Animaciones

Aviso: Webflow ha añadido soporte nativo a las animaciones de After Effects y Lottie en septiembre de 2019. Por favor, echa un vistazo a su entrada en el blog para ver los detalles más actualizados, junto con los tutoriales de vídeo.

Aprenda sobre eso aquí

Para los componentes clonables de la lotería, asegúrese de seguirnos en el flujo web

Animaciones
avanzadas con Lottie

Hey!

Tom de Flowbase aquí con una guía sobre la implementación de animación avanzada dentro del flujo web usando Lottie - bodymovin'
.
Lottie es una forma fantástica de añadir un toque extra a sus diseños web, o de ayudar a comunicar mensajes complejos sin limitar la creatividad o la velocidad de sus sitios.
En esta guía explicaré cómo empezar con Lottie y cómo puedes añadir Lottie a tus propios proyectos. También le mostraré algo de código personalizado que le permitirá comenzar con simples controles JS.
Veremos cómo configurar un precargador con Lottie, cómo puedes tener animaciones en el aire y, finalmente, un ejemplo de iconos que empiezan a animarse una vez que se desplazan a la vista.

¿Qué es Lottie & Bodymovin'?


Lottie es una librería móvil para Android e iOS que analiza las animaciones de Adobe After Effects exportadas como json con Bodymovin y las renderiza de forma nativa en el móvil y en la web!
- Lottie Sitio web


Esto puede ser súper útil para la carga de animaciones creativas, animaciones de héroes, botones y realmente cualquier cosa que se te ocurra.
Con un poco de código personalizado puedes añadir cosas como pasar el ratón por encima, reproducir una vez, hacer un bucle o incluso ser creativo y reproducir los iconos una vez que se desplazan a una sección (te mostraremos esto)


¿Qué es lo que necesito?

  • Webflow
  • After Effects Render OR lottiefiles.com
  • Archivo de guión de Lotties Bodymovin (Lo tenemos abajo)
  • GitHub Gist (Para alojar nuestro archivo de rutas)

¿Qué aprenderemos aquí?

  • ¿Qué es Lottie?
  • Creación / Descarga de un archivo JSON
  • Alojamiento del archivo Lottie JSON
  • Implementación de la lotería en proyectos de flujo web
  • Control de animación con controles JS
  • Usar ejemplos de casos (Animación de Héroe, Animación de Cargador, Animación de Flotador, Animación de Icono)

En esta guía, le llevaré a través de los fundamentos del uso de Lottie para su propio proyecto de flujo web.
Añadiremos (1) un precargador a nuestra página con una animación de lotería (2) iconos que se reproducen en el aire y (3) una ilustración que se reproduce una vez, cuando se desplaza a la vista.


1. Creación / Descarga de un archivo de animación.


El primer paso es la obtención de su archivo de animación
.

En este ejemplo utilizaremos un activo libre de lottiefilesuna colección comunitaria de miles de animaciones. Esto nos ahorra tener que renderizar una animación con el plugin de After Effects (¡Uf!)
Si
desea hacer sus propias animaciones, podrá hacerlo en After Effects.
Al final de este documento hemos adjuntado una guía detallada que le muestra exactamente cómo empezar con sus propias animaciones.
Desplácese
hasta la parte inferior de esta guía para obtener detalles completos sobre la descarga e instalación de archivos.

2. Añadir Lottie Script a nuestro proyecto

¡Bien!
Así que
, aquí está nuestro guión principal:

https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.js'>


Comencemos por añadir este script a nuestra sección de código de cabecera de nuestros sitios web.

3. Preparación de la División de Lotería (Estructura)

Vamos a añadir lottie a nuestro sitio web mediante la aplicación de la misma a un div y dejar que el script se dirija al nombre de la clase.

Para aplicar la animación utilizaremos dos bloques de div con nombres de clase únicos.

Nota: Puede utilizar el div de un bodymovin, pero para una mayor flexibilidad utilizaremos el envoltorio para definir el tamaño.

Nuestro wrapper-div se usará para establecer 'límites' o controlar el tamaño, mientras que el bodymovin div sostendrá la animación, y seguirá a su padre, llenando el tamaño definido (100% W / 100 H) Así que para recapitular

, tenemos las siguientes clases:

(1) el bodymovin-wrapper (El tamaño y la colocación de la animación)
(2) el div del bodymovin (donde va la animación)
Añadamos el primer div y le damos la clase bodymovin-wrapper-1 - Vamos
a definir también el tamaño de este como 100px de ancho y 100px de alto
.


Ahora vamos a añadir un div dentro de nuestro envoltorio y darle la clase bodymovin-1. También vamos a establecer esto a 100% de ancho y 100% de alto (para que llene ese elemento padre)

4. Añadiendo el script base.

Bien, tenemos un div listo (bodymovin ) y está ahí sentado esperando que llegue una animación.

Añadamos el siguiente guión en la etiqueta de Antes de nuestra sección de código personalizado.
Este código
va a apuntar a nuestra clase y cargar la animación en ese div.
También le dirá a la animación algunas reglas, como si hace un bucle, si se reproduce automáticamente, etc, etc.
Podemos agregar a este guión para controlar realmente todo lo que queramos, pero empecemos con lo básico:

Agregar el Guión:



var loader = document.getElementsByClassName("bodymovin");
function loadBMAnimation(loader) {
 var animation = bodymovin.loadAnimation({
   container: loader,
   renderer: "svg",
   loop: true,
   autoplay: true,
   path: "YOUR_ANIMATION_PATH_HERE"
 });
}
for (var i = 0; i < loader.length; i++) {
 loadBMAnimation(loader[i]);
}


Una vez que tenemos nuestro script añadido, ahora tenemos que reemplazar el archivo de ruta con nuestra animación.

5. Alojamiento de nuestro archivo de animación.

Bien, si has hecho tu propia animación y has usado la extensión, tendrás un archivo JSON exportado.

Si utiliza www.lottiefiles.com, encuentre una animación que le guste y descargue el archivo JSON.


Una vez que tenemos nuestro archivo JSON necesitamos alojarlo, y obviamente no queremos pagar por nada.

Vamos a Githubs GIST - https://gist.github.com/


Aquí tenemos que añadir el código dentro de nuestro archivo JSON para poder usar GIST para alojar nuestro fragmento de código. Arrastremos nuestro archivo JSON a una nueva pestaña para que abra el contenido del texto. (También puedes usar el bloc de notas)

Necesitamos copiar el contenido de este texto en la sección principal del gist y ponerle un título con una extensión .json. Por ejemplo animation.json como nombre.

Una vez que hayamos añadido el código de nuestro archivo JSON necesitamos CREAR GIST SECRETO

Ahora crear un gist secreto y hacer clic en RAW una vez que se haya cargado (Ver abajo).

La URL para el texto sin procesar será nuestra ruta de archivo.

6. Añade nuestro el camino RAW a la animación.

Bien, ahora tenemos que copiar la URL de los archivos después de haber hecho clic en RAW y copiar esa URL en nuestro código para la línea Path.

Reemplace la URL aquí: path: "CAMINO_NUDO_AQUÍ"

7. Compruebe nuestra animación.

Muy bien, cuando publiquemos el sitio deberíamos ver ahora la animación en bucle en el lugar donde la aplicamos.

El código final debería ser algo como esto:





var loader = document.getElementsByClassName("bodymovin");
function loadBMAnimation(loader) {
var animation = bodymovin.loadAnimation({
  container: loader,
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "YOUR_ANIMATION_PATH_HERE"
});
}
for (var i = 0; i < loader.length; i++) {
loadBMAnimation(loader[i]);
}


Nota: Puedes reemplazar 'bodymovin' con cualquier nombre de clase, siempre y cuando el div coincida con él. También puede duplicar esto y cambiar el nombre de la clase para tener varias animaciones.



Animar en el aire

8. Animar en el aire del ratón

Bien, entonces esa es la animación básica de bucle y cómo implementar bodymovin en tu proyecto de flujo web. Ahora veamos algunos íconos que se mueven en el aire.


Para iniciar la animación del hover con el mouseover necesitamos añadir algunos controles JS que le permitan hacer eso.

Añadamos el siguiente EventListener directamente debajo de nuestro fichero Path en el script principal (Para

este ejemplo, quita todo el código de debajo de path: y reemplázalo por esto)

});
 loader.addEventListener("mouseenter", function() {
   animation.play();
 });
 loader.addEventListener("mouseleave", function() {
   animation.stop();
 });
}
for (var i = 0; i < loader.length; i++) {
loadBMAnimation(loader[i]);
}



9. Código completo de la animación de Icono Hover

Así que si lo has añadido correctamente debería verse algo como esto:





var loader = document.getElementsByClassName("lottie-icon1");
function loadBMAnimation(loader) {
var animation = bodymovin.loadAnimation({
  container: loader,
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "YOUR_ANIMATION_PATH_HERE"
});
 loader.addEventListener("mouseenter", function() {
   animation.play();
 });
 loader.addEventListener("mouseleave", function() {
   animation.stop();
 });
}
for (var i = 0; i < loader.length; i++) {
loadBMAnimation(loader[i]);
}

10. Desplácese a la animación de la vista

Bien, entonces este es un poco más complejo. Pero en realidad es la misma idea, y no vamos a profundizar en los detalles.

Este código básicamente pondrá el div de animación a none (invisible). Lo hará utilizando una etiqueta ID que aplicaremos al elemento de envoltura de nuestra animación.

Como el div efectivamente no está ahí, cuando lo hagamos visible se reproducirá la animación. En este ejemplo estableceremos un ID a 'scrollingArea'

Luego aplicaremos un escuchador de eventos para cambiar la visibilidad de este elemento cuando se desplaza a una cierta área (Puedes cambiar esto) Así que aquí está

el código.



// sets default vlaue of surrounding div to none so it doesnt appear
let animationDiv = document.getElementById('scrollingArea')
animationDiv.style.display = "none"
// need to pass in the div where you want the item to load and the file location
function loader(div, pathLocation) {
   let animation = bodymovin.loadAnimation({
       container: div,
       renderer: "svg",
       loop: 1,
       autoplay: true,
       path: pathLocation
   });
   animation.play();
}
window.addEventListener('scroll', () => {
   // can set scroll height by changing the number
   let scrollHeightPercent = document.documentElement.scrollHeight * 0.08
   let currentPOS = document.documentElement.scrollTop || document.body.scrollTop
       // once the scroll height has gone past the % stated abvoe it will make the style appear
   if (currentPOS >= scrollHeightPercent) {
       let animationDiv = document.getElementById('scrollingArea');
       if (animationDiv.style.display == 'none') {
           // stuff here
           animationDiv.style.display= ""
           let bodyMotion1 = document.getElementById('lottie-scroll-1');
           loader(bodyMotion1, "YOUR_ANIMATION_PATH_HERE")
       };
   };
});

11. Instalación de Bodymovin (Animación de After Effects)

Sáltese esto si no va a exportar sus propias animaciones.

1 - Cerrar After Effects si está abierto

2 - Instalar el instalador de ZXP

http://aescripts.com/learn/zxp-installer/

ZxpInstaller

3 - Descargue la última extensión de bodymovin

https://github.com/airbnb/lottie-web/tree/master/build/extension

Bodymovin ZxpInstaller

4 - Abra el instalador de ZXP y arrastre la extensión bodymovin a la ventana

Bodymovin ZxpInstaller

5 - Abrir después de los efectos

En el menú "Ventana > Extensiones" debería ver "Bodymovin".

Bodymovin en el menú

¡Ahora ya puedes irte!

12. Haz algo dulce.

Esperemos que esto le ayude a empezar, y que haya encontrado esta guía útil.

Por favor, considere la posibilidad de compartir en los medios sociales o de seguirnos en flowbase.co

Flowbase
30 de octubre de 2020

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.