Las demandas del desarrollo web cambian constantemente. Agregar animación a su sitio web puede ayudarlo a destacarse entre la multitud y aumentar el tiempo promedio de visualización de su página. En el pasado, esto se habría creado usando CSS o JavaScript, pero Lottie se convertirá en el formato estándar.
Basado en JSON, Lottie es un formato de archivo desarrollado por Airbnb para crear animaciones más complejas que las disponibles en CSS estándar. Los archivos Lottie son mucho más pequeños que los gif o mp4, lo que los hace más fáciles de insertar en sitios web sin aumentar la velocidad de carga de la página. Como formato basado en vectores, Lottie se puede escalar a cualquier tamaño sin perder calidad. También son compatibles con iOS y Android, lo que garantiza experiencias de usuario consistentes en todas las plataformas.
Las animaciones de Lottie se pueden hacer interactivas y responden al hacer clic o al pasar el cursor. La implementación es más fácil que nunca ya que hay muchos recursos y tutoriales en línea.
Algunas empresas de renombre ya están utilizando Lottie en sus sitios web, como Google, TikTok, Adobe, Microsoft, Amazon y Disney, que se convirtieron en maestros de la animación al apegarse a sus 12 principios de animación.
Sin ningún orden en particular, hemos seleccionado las cuatro mejores aplicaciones para usar con Lottie a continuación.
01. SVGador
SVGator te permite exportar un archivo Lottie directamente desde el espacio de trabajo (Crédito de la imagen: SVGator)Enlace: SVGadorPrecio: SVGador gratuito. Suscripción Pro $20/mes
SVGator es una herramienta en línea que tiene como objetivo simplificar el proceso de animación vectorial, permitiendo que los principiantes se pongan al día rápidamente. Recientemente anunció que ahora admite archivos Lottie, lo que permite a los usuarios importar, crear y exportar archivos Lottie además de los archivos svg estándar por los que era conocido anteriormente.
La opción de importación te permite editar fácilmente un archivo Lottie prediseñado en la interfaz de SVGator, mientras que también puedes crearlo desde cero en el editor del navegador. Si ya eres fanático de la aplicación, el proceso de animación es tan fácil como siempre, con la ventaja adicional de que obtienes un archivo de Lottie al final.
02. Después de los efectos
Descargue archivos de Lottie desde After Effects o cárguelos en su espacio de trabajo (Crédito de la imagen: LottieFiles)Enlace: Intercambio de AdobePrecio: Suscripción a After Effects £ 21,98 / mes (complemento gratuito)
After Effects es un estándar de la industria para aplicaciones de gráficos visuales y en movimiento. Sus herramientas son amplias y te permiten crear animaciones complejas con gráficos vectoriales y rasterizados.
Una vez que haya terminado de crear en After Effects, abra la extensión Lottie, renderice su animación y obtenga una vista previa de ella. El Comprobador de compatibilidad de funciones le permite comprobar la compatibilidad con Web, iOS y Android.
Puede exportar como .json o .lottie (incorporando jpg y png si es necesario) o simplemente agregar la animación a su espacio de trabajo en LottieFiles. Este es un espacio de colaboración privado, donde puedes compartir archivos con tu equipo.
Bodymovin' es otro método para exportar Lotties desde After Effects, pero tiene opciones reducidas en comparación con el complemento LottieFiles.
03. Figma
El complemento ofrece ajustes preestablecidos de animación básicos para agregar rápidamente movimiento a los vectores. (Crédito de la imagen: LottieFiles)Enlace: Complementos de FigmaPrecio: Plan inicial gratuito. Suscripción a Figma Pro £ 11 / mes (complemento gratuito)
Cualquiera interesado en el diseño UX o UI estará familiarizado con Figma. Es la herramienta en línea de referencia para estructurar, diseñar y probar aplicaciones web y aplicaciones, centrándose en la colaboración en tiempo real entre equipos.
El complemento Lottie te permite crear animaciones de Lottie directamente en Figma, en lugar de depender de otras aplicaciones como tenías que hacer en el pasado. Con esto, puede aplicar una animación a un solo cuadro desde uno de los ajustes preestablecidos estándar o crear la suya propia encadenando varios cuadros. Luego, estos pueden implementarse directamente en sus diseños o guardarse en su espacio de trabajo, donde pueden compartirse y editarse.
04. Canva
Hay más de 100.000 animaciones gratuitas que puedes añadir a tu proyecto Canva (Crédito de la imagen: LottieFiles)Enlace: Complementos de CanvaPrecio: Canva gratis. Suscripción Pro £ 100 / año (complemento gratuito)
Perfecta para el propietario de una pequeña empresa, Canva es una aplicación en línea que ofrece herramientas de diseño a las masas, ofreciendo cuentas gratuitas y Pro que le permiten crear activos digitales, videos e impresiones. Con una biblioteca de imágenes de archivo y más de 250.000 plantillas gratuitas, no necesitas ninguna experiencia para ser creativo.
Si bien Canva ofrece sus propios elementos animados para agregar a tus diseños, el complemento Lottie tiene más de 100.000 animaciones personalizables gratuitas que puedes agregar a tu proyecto. Estos se pueden personalizar para adaptarlos a su marca y el complemento le permite acceder a las bibliotecas de su equipo y colocarlas en su lienzo. Si necesita realizar ediciones más extensas en la animación, el sitio web LottieFiles tiene un editor que guardará las animaciones en su espacio de trabajo.
Para obtener más información sobre la animación, consulta la parte superior. herramientas de animación para artistas digitales.
creó este contenido como parte de una asociación paga con SVGator. El contenido de este artículo es totalmente independiente y refleja únicamente la opinión editorial de .
