Nociones introductorias con Lottie: una presentación general del maravilloso marco de animación de Airbnb

Recientemente, hice varios trabajos de animación aquí en el Delicious Inc y, finalmente, decidí experimentar con el marco Lottie, apreciado por Airbnb. Lottie es una biblioteca de JavaScript React Native, Android e iOS, que facilita la integración de animaciones en su sitio o aplicación. Es más una herramienta de diseñador, ya que permite a los usuarios exportar animaciones directamente desde Adobe After Effects a un archivo JSON que está se puede usar instantáneamente con el marco. Si usted es un desarrollador que a menudo necesita recrear animaciones desde cero, es posible que desee compartir esta publicación con los diseñadores con los que trabaje. Pero lea más para descubrir qué tan fácil puede hacer su vida.
¿Por qué Lottie? Algo de lo que me hizo comprobar a Lottie fue una conversación reciente que Brad y yo tuvimos sobre cómo podemos respirar más alegría a los usuarios en nuestros productos. Al diseñar y construir un producto, es muy fácil concentrarse por completo en la funcionalidad y pasar por alto esos toques adicionales que agregan una satisfacción adicional. Y esto es completamente comprensible, porque el usuario tiene una expectativa básica de que un producto ofrece utilidad como se comercializa, por lo que esto es más importante que un brillo adicional.
Pero es importante recordar que esta “deleite del usuario” de la fase de diseño no debe pasarse por alto. Es la diferencia clave entre los productos que tienen un propósito y aquellos que en realidad se sienten bien para su uso. En algunos casos, también puede convertir un buen producto en un gran producto. Echemos un vistazo a la forma en que Lottie ha mejorado la implementación de estas delicias. La animación en el pasado en el pasado, la integración de animaciones en un sitio o aplicación fue al menos muy agotador. Eras esencialmente tres opciones. Opción A: Imágenes o video Use un GIF, archivo de video o PNG Sprite para crear animación. Este es el método más rápido de los dos, pero da como resultado dimensiones de archivo excesivamente grandes y no hay posibilidad de editar la animación sin volver al archivo original. Siempre trato de evitar esto si es posible. Opción B: Flash de animación Adobe Flash ha tenido el período de gloria y ha cumplido bien su propósito durante unos 15 años. Ha permitido a los creadores de contenido hacer cosas inauditas en la web hasta ahora. Dicho esto, solía detestar los sitios web que tenían el “bienvenido”, flash, chapoteo. Creará la animación en un instrumento como Adobe Flash, luego lo exportará como un archivo flash, como SWF (Shockwave Flash) para usar en la web. Y para ser honesto, funcionó bastante bien. Pero a medida que pasó el tiempo y la web ha evolucionado, Flash murió bastante rápido. El aumento del HTML5 y el hecho de que la mayoría de los teléfonos inteligentes no soportaron el flash en absoluto significó que se volvió bastante redundante.
Además, la carga del contenido flash generalmente tomó algún tiempo y, si desea cambiar el contenido, deberá volver al tablero de dibujo y editar el archivo original. Quizás la mayor barrera de todas fue que el usuario tenía que tener Adobe Flash Player instalado en la computadora para ver el contenido en cuestión. Esto llevaría a actualizar el complemento que es bastante regular, porque a veces encontrará contenido que requiere una versión más actualizada del reproductor Flash. Opción C: Crear usando el código alternativo era para que el diseñador creara la animación y exportara un archivo de video como referencia. Luego, se esperaría que el desarrollador tome ese archivo de referencia y lo recree a fondo utilizando el código. De hecho, en mi última publicación, escribí un poco sobre los beneficios de usar SVG (gráficos vectoriales escalables), especialmente con la animación. Si bien este método se considera una práctica mucho mejor que la opción A, el problema es que es extremadamente difícil y consume mucho tiempo para reproducir una animación usando el código. Las posibilidades de que la animación codificada coincida con el archivo de referencia sea extremadamente probable y esperado. A menos que tenga tiempo para que coincida con la animación del marco, es posible que la sincronización, el tamaño y los tonos de animación sean bastante bajos.
Entonces, efectivamente, debes crear la misma animación dos veces … lo que parece una gran pérdida de tiempo. Aquí viene Lottie y se convierte en el remedio de un gran dolor de cabeza. Así que echemos un vistazo a cómo funciona. ¿Cómo funciona Lottie? Primero, debe crear una animación en Adobe After Effects. Si no comprende después del efecto, ¡no se enoje! Pondré un enlace a algunas animaciones gratuitas Lottie más adelante en esta publicación. Tendrá que permanecer para usar los instrumentos vectoriales dentro del efecto posterior y obviamente evitar las imágenes de mapa de bits, porque Lottie no sabrá qué hacer con este tipo de imágenes. Actualmente, Lottie acepta sólidos, capas de forma, máscaras, alfa de pareja, senderos y patrones de corte. Una vez que la animación está lista para exportar, debe pasarla a través del cuerpo de bodas después de los efectos y, después de una hermosa brujería, escupe un archivo JSON que generalmente tiene solo unos pocos kilo.
Y luego, con solo unas pocas líneas de código, puede usar Lottie para analizar este archivo JSON en su sitio web o en su increíble aplicación. Lottie en acción Lottie es súper rápido y fácil de usar. Si usa la animación en un sitio web, solo ingrese las siguientes líneas de código y reemplace el archivo JSON con su.
Lottie también tiene algunas opciones construidas que le brindan control adicional sobre la animación. Puede elegir restaurar la animación automáticamente al cargar la página, configurarla en el bucle, configurarla para jugar con el mouse, cambiar su velocidad o incluso agregar pedidos de reproducción. Puede especificar el ancho, la altura y el color de fondo. Aquí hay una que hice antes, iba a presentar algunas de las animaciones para las que trabajé para nuestros productos, pero ¿por qué arruinar todo ahora? En cambio, esta es una de mis creaciones cuando experimento a Lottie. Es una versión animada de nuestra marca para WP Migrate DB Pro.se Pen Animation MDB Bird de Delicious (@Delicibrains) en CodePen. En menos de media hora, había hecho la animación y la probé en una página web.
¿Tamaño del archivo? Un pequeño 12 kilo. Lottie Freebies Como se mencionó anteriormente, Lottie requiere al menos algunos conocimientos básicos y una copia de Adobe After Effect. Si no tienes ninguno de estos, ¡no te preocupes! La comunidad Lottie es bastante buena y tiene muchas animaciones gratuitas listas para descargar, siempre que acredite al autor, por supuesto. Una alternativa de Lottie si Lottie no es para usted y si aún desea crear animaciones vectoriales, puede consultar SVGator. Es una herramienta de animación SVG muy fácil de usar y la he usado varias veces para crear animaciones simples que involucren propiedades básicas, como facilidad, rotación y opacidad.


Las herramientas disponibles en SVGator son un poco primitivas en este momento y son más adecuadas para animaciones menos complejas.
Sin embargo, recientemente hemos contactado a su equipo y se supone que debemos encontrar una excelente actualización que pronto abordará esto, junto con algunas características nuevas. El veredicto de Lottie es absolutamente maravilloso y es un cambio real en el juego. Honestamente, es la herramienta más impresionante que he descubierto durante mucho tiempo. Ahorra mucho tiempo y, lo que es más importante, ahorra al desarrollador la tarea monumental de tener que recrear la animación desde cero. Seré honesto, cuando lancé después del efecto por primera vez para usar Lottie, era escéptico si podían cumplir sus promesas. He sido quemado por instrumentos en el pasado, que afirmaron reducir la brecha entre el diseño y el desarrollo a través de un formulario de conversión. Un ejemplo clásico a este respecto son las herramientas que exportan PSD o dibujan archivos a HTML y CSS. Por lo general, estas herramientas hacen su trabajo y exportan HTML y CSS con una precisión milagrosa. Pero cuando abres uno de estos archivos, la sintaxis y la estructura suelen ser terribles y es casi imposible mantener la base del código (¿quién recuerda Dreamweaver?). En mis ojos, esto hace que el instrumento sea bastante redundante. Debido a mi historial con tales herramientas, tenía reservas sobre el uso de Lottie, pero la verdad es que no tuve problemas cuando exporto y uso mis animaciones. ¡Sí, cada animación se exportó perfectamente!