Tengo un par de ilustraciones hechas en Illustrator y planeo animarlas para un sitio web en el que estoy trabajando, he oído hablar del kit de herramientas Create.js con flash, pero ¿es la mejor manera de hacerlo o hay otra? mejor" forma de hacerlo?
Aquí hay un ejemplo del tipo de animaciones que busco: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Hay muchas maneras de animar cosas en la web. Incluso hay más formas de crear animaciones y luego exportarlas a animaciones web.
Hay enormes beneficios en el diseño de animaciones en algo como AfterEffects o Animate CC (que pueden importar archivos de Illustrator y Photoshop) por las razones obvias de la división del trabajo y el uso de un editor gráfico.
Dicho esto, siempre debe, al final, compilar en uno de los siguientes :
Capacidades de interacción limitadas:
Más completamente interactivo:
Ahora, entraré en cada uno con un poco más de detalle.
Un GIF es una buena forma de hacerlo cuando las animaciones no requieren mucha interacción, no es necesario cambiar su tamaño dinámicamente y son relativamente pequeñas. Los GIF bien hechos pueden ser tan detallados como la ilustración que vinculó sin preocupaciones de rendimiento. Incluso es posible una interacción menor utilizando una superposición transparente colocada sobre ella (o solo una parte de ella).
Nota al margen: ahora hay un .gifvformato creado por Imgur que convierte archivos GIF sobre la marcha a los formatos de video WebM o MP4. Esto aumenta el rendimiento al reducir considerablemente el tamaño del archivo final. Usted podría considerar hacer lo mismo.
Otra forma de mantener una animación suave pero con mucho estilo es usar un sprite. Google utiliza este enfoque para cosas como la animación de logotipos . Otro gran ejemplo es el antiguo sitio web de Alexander Engzell que tenía una animación tipográfica enferma usando este enfoque. Esto es óptimo cuando un GIF sería demasiado grande pero no necesita mucha interacción.
También he visto una animación de JavaScript muy interesante que se asemeja a un sprite o GIF usado por Google (pasa el cursor sobre la imagen de Chrome en la parte superior izquierda; requiere estar en Chrome) pero usa una máscara animada en su lugar. Supongo que usaron este enfoque para limitar el tamaño total del archivo.
Hemos ganado grandes capacidades con respecto al video en los últimos años. El <video>elemento nos permite personalizar la forma en que interactuamos y usamos videos como nunca antes. Ahora podemos hacer uso de videos de fondo de pantalla completa fácilmente y hacer cosas como ir cuadro por cuadro en el desplazamiento . También noté que Facebook usa videos para algunas animaciones simples cuando da la bienvenida a los usuarios en su feed sobre eventos especiales. Los beneficios son que se puede comprimir a un tamaño de archivo bastante pequeño y puede hacer una gama más amplia de animaciones (cualquier cosa que pueda hacer un software de edición de video). Como tal, si alguien puede hacer un video enfermo, entonces es bastante fácil convertirlo en una fantástica adición a una página web.
Obviamente, los videos no son buenos para la mayoría de las animaciones en la web (por ejemplo, transiciones de botones, etc.), así que no los uses en todas partes.
Habiendo dicho todo esto, si desea que la animación se genere dinámicamente, cuando necesite más que una interacción realmente básica, cuando desee crear entornos 3D y, en muchos otros casos, un GIF, sprite o video simplemente no lo hará. córtalo Una vez que se decide esto, hay varias otras opciones, la mejor de las cuales depende de su animación y necesidades.
Muchas animaciones web usan Canvas . Canvas es excelente para usar debido a su rendimiento y flexibilidad en la creación. Solo usa un elemento del navegador (DOM) debido al hecho de que solo pinta, como en un lienzo real, las cosas una encima de la otra. Al realizar un seguimiento de lo que está pintado y dónde con JavaScript, podemos crear algunas animaciones e incluso juegos bastante impresionantes.
Sin embargo, el principal inconveniente de usar Canvas es su relativa dificultad para escalar. A menudo, dependiendo de la animación, por supuesto, es más difícil hacer una animación de Canvas receptiva que usar otros medios. Otro inconveniente es que tener mucho contenido en un lienzo no es muy amigable con el SEO porque los elementos del lienzo no se pueden rastrear (puede solucionar esto colocando algo de HTML visualmente oculto del contenido, si corresponde). En la misma nota, cosas como la selección de texto para los usuarios es difícil con Canvas (especialmente sin usar una biblioteca como CreateJS).
Un uso principal de Canvas son los garabatos de Google , que a menudo se realizan en Canvas. Cuando tienen un juego o una animación interactiva, usan Canvas cada vez que he mirado. Si no hay interacción, usarán un GIF o sprite.
Hay muchas bibliotecas geniales para ayudar a trabajar con Canvas más fácilmente, aunque definitivamente no es necesario dependiendo de lo que se deba hacer. Entre los creados solo para Canvas se encuentran CreateJS (que puede exportar desde Animate CC), Pixi.js , PaperJS , KineticJS y FabricJS (colocados en orden de mi impresión de ellos). Un complemento de After Effects llamado Lottie (anteriormente BodyMovin) también puede exportar a Canvas (o SVG [1] ) y tiene un motor de animación integrado.
Por supuesto, también puede emparejar bibliotecas de animaciones más grandes como GSAP con Canvas fácilmente. Para algo tan detallado como la ilustración que vinculó, recomendaría usar algún tipo de marco, pero para muchas cosas no son realmente necesarios, solo útiles, especialmente si ya sabe cómo usar uno de ellos.
Otra forma increíblemente poderosa de animar cosas en la web de una manera fácil de responder es usar un SVG ( Gráficos vectoriales escalables ). Cumplen bien su propósito, ser vectores escalables . Muchos encuentran confuso el uso de SVG al principio, pero la mayoría de las cosas, como el sistema de coordenadas y las transformaciones de SVG, tienen excelentes artículos que las explican.
Una de las muchas cosas maravillosas de SVG es que se puede animar con JavaScript, CSS puro (incluidos :hoverestados, transforms, transitions y animations) o animaciones SMIL (la forma "nativa" de animar cosas con SVG, pero IE no lo hace). no lo soporta en absoluto y se está depreciando gradualmente ). Recomiendo tratar de usar CSS primero y luego JavaScript siempre que no sea (relativamente) simple en CSS. Para transformar elementos SVG, es prácticamente necesario usar una herramienta como el complemento MorphSVG de GSAP, a menos que esté de acuerdo con un soporte parcial, en cuyo caso SMIL podría ser aceptable.
Dado que los elementos SVG pueden tener cualquier forma, se pueden usar para crear algunos efectos geniales . Sarah Drasner hizo algunos puntos de referencia de rendimiento útiles con respecto a las animaciones SVG que muestran qué formas de animar SVG son las mejores en términos de rendimiento.
Dependiendo de la animación (y la necesidad de soporte del navegador), una biblioteca como Snap.svg o GSAP puede ser útil, pero muchas veces CSS y, si es necesario, un poco de JS personalizado es todo lo que se necesita. Dicho esto, un complemento de After Effects llamado Lottie (anteriormente BodyMovin) y una extensión de Flash llamada Flash 2 SVG pueden ser realmente útiles para crear animaciones SVG.
Para obtener más detalles, eche un vistazo a esta publicación relacionada específicamente sobre la animación de elementos SVG.
PD Es mejor usar SVG en una <object>etiqueta o incrustados directamente en un <svg>elemento XML si es interactivo y como imagen de fondo si no es interactivo, pero también hay otras formas de hacerlo.
En mi experiencia, las animaciones y transiciones CSS deben usarse principalmente para elementos de la interfaz de usuario y otras transiciones y animaciones básicas. Incluso entonces, a veces es apropiado usar una biblioteca de animación JS como GSAP para animaciones/transiciones de interfaz de usuario. Realmente depende del tipo de comportamiento que desee y si es conveniente o no hacerlo en CSS.
Si bien podemos crear cosas locas con CSS puro, generalmente es más difícil crear ilustraciones complejas como la que proporciona como ejemplo usando CSS, incluso cuando se manipulan imágenes además. Las animaciones CSS complejas son a menudo más difíciles de mantener que sus contrapartes de JavaScript también. El otro inconveniente es que las animaciones CSS son difíciles de cambiar con JavaScript y no funcionan muy bien cuando se mezclan con JavaScript.
Dicho esto, las interacciones simples que usan transiciones y animaciones generalmente deberían usar CSS; deberías usarla por defecto. Para comenzar a aprender cómo animar usando CSS, consulte mi introducción a la animación web .
También puede encontrar animaciones útiles y funciones de aceleración en bibliotecas como Animate.css que puede extraer y agregar a sus propios proyectos. Casi nunca necesitará toda la biblioteca, tome solo las partes que desee.
Las animaciones de JavaScript basadas en DOM son bastante sencillas. Tienen una mala reputación debido a las terribles bibliotecas de animación como jQuery animate(), pero pueden tener un rendimiento particularmente alto, especialmente cuando se usa la API de animaciones web (que se analiza a continuación) o una biblioteca de animación especializada como GSAP , Anime o tween.js . Con una biblioteca de este tipo, a menudo pueden superar a otros tipos de animaciones para animaciones más intensivas, como animar una gran cantidad de elementos.
La razón principal por la que necesitaría usar una animación basada en DOM es si tiene muchas animaciones de usuario o líneas de tiempo complejas que involucran elementos DOM ya creados. Muchas veces es mejor probar y usar algo como Canvas sobre el DOM por razones ya especificadas.
Las bibliotecas como GSAP nos permiten hacer cosas locas como ralentizar una animación al pasar el mouse al realizar un seguimiento de las matrices de animación. De esta manera, las animaciones basadas en DOM pueden ser más personalizadas e interactivas que cualquier otra forma de animación cuando se hacen bien. El único inconveniente es que a veces, dependiendo de cómo esté construido y de lo que deba hacer, no funcionará bien.
WebGL es una forma de crear principalmente trabajos en 3D. Tiene algunos proyectos increíbles que deberías revisar. Obviamente, no se debe usar en todas las páginas web, pero es importante mencionarlo.
Desde mi experiencia, usar una biblioteca WebGL es prácticamente necesario. Afortunadamente hay algunos buenos. ThreeJS es, con mucho, el más común que he visto, seguido de PixiJS . Para animar imágenes y videos de un sitio web regular, Curtains.js es una excelente opción. Un marco de WebGL como A-Frame también puede hacer que elegirlo y crear cosas básicas sea bastante fácil.
Escribí más sobre cómo agregar efectos WebGL a páginas web "normales" en CSS-Tricks .
La API de animaciones web es un intento de estandarizar cómo se implementan y mantienen las animaciones en los navegadores junto con mejoras de rendimiento. Está destinado a ser utilizado con elementos DOM, incluido SVG. Se asemeja a cómo se estructuran las animaciones CSS (en una forma de aspecto JS), pero agrega capacidades como una línea de tiempo y un rendimiento mejorado.
Mejora el rendimiento al poner animaciones en el hilo del compositor (para obtener más detalles, consulte esta excelente publicación sobre el tema). Para obtener una introducción sobre cómo usarlo, consulte los documentos de Mozilla o esta publicación introductoria .
Puede preguntarse: " ¿Reemplazará esto las bibliotecas de animación de JavaScript? " La respuesta es " Ojalá algunas ". Es beneficioso para todos que los motores de animación nativos del navegador mejoren y, a medida que lo hacen, algunas bibliotecas de animación menos potentes se volverán inútiles. Dicho esto, las bibliotecas de animaciones más poderosas aún tendrán beneficios adicionales como los que señaló GSAP . Si necesita o no una biblioteca una vez que WAAPI sea ampliamente compatible, aún está determinado por sus necesidades.
WAAPI tiene un soporte bastante bueno y tiene un polyfill si necesita soporte para IE.
Evite usar propiedades de bajo rendimiento o causar reflujos/repintados .
Evite animar un montón de elementos en la página, ya que son más intensivos y también puede ser una molestia cambiarlos más adelante.
Cuando use CSS, use una transitionsobre una animación siempre que sea posible (dentro de lo razonable). Funcionan mejor y generalmente es más fácil trabajar con ellos.
Utilice de manera inteligente la will-changepropiedad en elementos grandes que va a animar para que el navegador lo sepa con anticipación. Para obtener más detalles y sugerencias al respecto, lea algo como este artículo de SitePoint sobre el tema.
Evite setIntervaly opte por requestAnimationFramehacer tiempos en JavaScript (las buenas bibliotecas de animación como GSAP hacen esto por usted si usa sus líneas de tiempo).
Cuando pueda, use la API de animaciones web porque tiene capacidades para animar con otros métodos en JavaScript que no tienen.
Hay varias formas de animar cosas en el desplazamiento. Para obtener una descripción general, consulte mi publicación sobre CSS-Tricks .
Nunca debe ejecutar Flash en el producto final . Flash está oficialmente muerto. No lo uses. El único caso en el que podría considerarlo es si está realizando una instalación y tiene hardware y software especializado que sabe que ejecuta Flash.
Dicho esto, Animate CC (un cambio de marca de Flash) es una forma útil de crear animaciones y puede exportar a Canvas usando Create.js .
Por lo general, existen varios métodos que puede utilizar para crear una animación. El mejor depende de lo que quieras que haga y, a veces, no hay un método mejor claro. Muchas veces me encuentro usando múltiples en el mismo proyecto. Lo importante es pensar críticamente , entender exactamente cómo quieres que se comporte la animación y decidir el método en base a eso. También ayuda si has trabajado en cada uno un poco.
En mi experiencia, al hacer animaciones estáticas (animaciones que no están destinadas a ninguna interacción con el usuario) encontré que lo que mejor me funcionaba era animar las ilustraciones en After Effects y luego exportar el resultado final a un archivo .GIF. Esto hace que la animación sea absolutamente compatible con el navegador y garantiza una visualización idéntica en cualquier dispositivo.
Sin embargo, si está buscando algo con lo que un usuario pueda interactuar, creo que Canvas es el camino a seguir, y CreateJS parece ser adecuado para el trabajo con la biblioteca EaseJS.
De todos modos, de acuerdo con su ejemplo, también podría hacerlo con un archivo GIF animado y obtener exactamente el mismo resultado.
Si trabaja con After Effects, puede usar el complemento Bodymovin . Representa su trabajo para uso móvil y web. Tendrás un archivo .json y lottie.js que puedes usar en tu HTML. Pero primero deberá desactivar Permitir scripts para escribir archivos y acceder a la red en la configuración general. Cuando haya terminado, vaya a Ventana , Extensiones y busque Bodymovin . Seleccione su composición, establezca la ubicación para guardar y haga clic en renderizar. Coloque sus archivos .json y lottie.js en su HTML y su trabajo estará listo. Creo que GIF no es la mejor solución porque necesita más tiempo para cargarse.
Puedes descargarlo aquí: http://aescripts.com/bodymovin Solo agrega tu precio, o si lo quieres gratis solo puedes poner $0.00...
Aquí hay un tutorial para usar Bodymovin y configurar su animación en su sitio web con Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Si conoce los conceptos básicos de HTML y CSS, entonces debería ser fácil para usted. Ese tutorial me ayudó, espero que esto pueda ayudarte.
nocturnos2