Tengo un par de ilustraciones hechas en Illustrator y estoy planeando animarlo 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/
Respuestas:
Hay muchas formas de animar cosas en la web. Hay incluso más formas de crear animaciones y luego exportarlas a animaciones web.
Diseñar animaciones en algo como AfterEffects o Animate CC (que pueden importar archivos de Illustrator y Photoshop) tiene grandes beneficios por las obvias razones de la división del trabajo y el uso de un editor gráfico.
Dicho esto, siempre debe, al final, compilar uno de los siguientes :
Capacidades de interacción limitadas:
Más completamente interactivo:
Ahora, entraré en cada una con un poco más de detalle.
Un GIF es un buen camino cuando las animaciones no requieren mucha interacción, no necesitan ser dimensionadas dinámicamente y son relativamente pequeñas. Los GIF bien hechos pueden ser tan detallados como la ilustración que vinculó sin preocuparse por el rendimiento. Incluso es posible una interacción menor usando 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 los archivos GIF sobre la marcha en los formatos de video WebM o MP4. Esto aumenta el rendimiento al reducir en gran medida el tamaño del archivo final. Podría considerar hacer lo mismo.
Otra forma de mantener una animación suave pero altamente estilizada es usar un sprite. Google utiliza este enfoque para cosas como la animación del logotipo . Otro gran ejemplo es el antiguo sitio web de Alexander Engzell que tenía una animación de tipografía 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 JavaScript muy interesante que se asemeja a un sprite o GIF utilizado por Google (coloca el cursor sobre la imagen de Chrome en la parte superior izquierda; requiere estar en Chrome) pero usa una máscara animada. Supongo que usaron este enfoque para limitar el tamaño total del archivo.
Hemos adquirido grandes capacidades con respecto al video en los últimos años. El <video>elemento nos permite personalizar la forma en que interactuamos y usar 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 video para algunas animaciones simples cuando da la bienvenida a los usuarios en su feed sobre eventos especiales. Los beneficios son que puede comprimirse a un tamaño de archivo bastante pequeño y puede hacer una gama más amplia de animaciones (cualquier cosa que pueda hacer el 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 use en todas partes.
Dicho todo esto, si desea que la animación se genere dinámicamente, cuando necesita más que una interacción realmente básica, cuando desea crear entornos 3D y, en muchos otros casos, un GIF, sprite o video simplemente no cortarlo Una vez que se decida esto, hay varias otras opciones, la mejor de las cuales depende de su animación y necesidades.
No tengo estadísticas, pero la mayoría de las animaciones web que he visto usan Canvas . Canvas es excelente para usar debido a su rendimiento y flexibilidad en la creación. Solo usa un elemento de navegador (DOM) debido al hecho de que simplemente pinta, como en un lienzo real, 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. Muchas veces, 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 Canvas no es muy amigable con SEO porque los elementos del canvas no se pueden rastrear (puede solucionar esto poniendo un HTML oculto visualmente 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 lo veo. 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 deba hacerse. Entre los que están hechos solo para Canvas se encuentran CreateJS (que puede exportar desde Animate CC), Pixi.js , PaperJS , KineticJS y FabricJS (ordenados según mi impresión de ellos). Un complemento de After Effects llamado Lottie (anteriormente BodyMovin) también puede exportarse a Canvas (o SVG [1] ) y tiene un motor de animación incorporado.
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 necesarias, solo útiles, especialmente si ya sabe cómo usar una de ellas.
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 su propósito - siendo vectores escalables - bien. 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 los explican.
Una de las muchas cosas encantadoras de SVG es que se puede animar con JavaScript, CSS puro (incluidos :hoverestados, transforms, transitionsy 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 intentar 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, pueden usarse 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 es mejor en cuanto al rendimiento.
Dependiendo de la animación (y la necesidad de soporte del navegador), una biblioteca como Snap.svg o GSAP puede ser útil, pero a menudo CSS y, si es necesario, un poco de JS personalizado es todo lo que se requiere. 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 incrustado 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 o Velocity.js para animaciones / transiciones de UI. Realmente depende del tipo de comportamiento que desee y de si es conveniente hacerlo en CSS.
Si bien podemos crear cosas locas con CSS puro, generalmente es más difícil crear ilustraciones complejas como la que proporcionas como ejemplo usando CSS, incluso cuando manipulas imágenes además. Las animaciones CSS complejas son a menudo más difíciles de mantener que sus contrapartes JavaScript también. La otra desventaja es que las animaciones CSS son difíciles de cambiar con JavaScript y no se reproducen muy bien cuando se mezclan con JavaScript.
Dicho esto, las interacciones simples que usan transiciones y animaciones generalmente deberían usar CSS; deberías usarlo por defecto. Para comenzar a aprender a animar usando CSS, mira mi introducción a la animación web .
También puede encontrar animaciones útiles y funciones de facilitació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's 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 , Velocity.js o mo.js ( GSAP incluso tiene un complemento especial para reemplazar jQuery's .animateespecíficamente). Al usar una biblioteca de este tipo, a menudo pueden superar a otros tipos de animaciones para obtener 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 mucha animación de usuario o líneas de tiempo complejas que involucren elementos DOM ya hechos. Muchas veces es mejor intentar usar algo como Canvas sobre el DOM por razones ya especificadas.
Las bibliotecas como GSAP nos permiten hacer locuras, como ralentizar una animación al pasar el mouse al hacer 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 necesita hacer, no funcionará bien.
WebGL es una forma de crear principalmente trabajos en 3D. Tiene algunos proyectos increíbles que deberías consultar. No se debe utilizar en todas las páginas web, obviamente, pero es importante mencionarlo.
En realidad, anima elementos DOM para crear entornos 3D (y 2D), lo cual es increíble debido al potencial que tiene. Cuando se usa una biblioteca, WebGL recurre al uso de Canvas, pero aún no tiene una gran compatibilidad con dispositivos móviles y puede tener un alto rendimiento. En general, es bastante claro cuando necesitas usar WebGL o no.
Desde mi experiencia, el uso de 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 . Un marco WebGL como A-Frame también puede hacer que sea más fácil recogerlo y crear cosas básicas.
La API de animaciones web es un intento de estandarizar cómo se implementan y mantienen las animaciones en todos los navegadores combinados con mejoras de rendimiento. Está destinado a ser utilizado con elementos DOM incluyendo SVG. Se asemeja a cómo se estructuran las animaciones CSS (en una forma de aspecto JS) pero agrega capacidades tales 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 .
Usted puede preguntar, " ¿Esto reemplazar las bibliotecas de animación de JavaScript? " La respuesta es " Esperamos que algunos ". Es beneficioso para todos que los motores de animación nativos del navegador mejoren y, como lo hacen, algunas bibliotecas de animación menos potentes serán inútiles. Dicho esto, las bibliotecas de animaciones más potentes seguirán teniendo beneficios adicionales como los que GSAP señaló . Si necesita o no una biblioteca una vez que WAAPI sea ampliamente compatible, aún depende de sus necesidades.
WAAPI actualmente no tiene un buen soporte, pero se puede usar con un polyfill en producción hoy. Parece que continuará mejorando y obtendrá más apoyo.
Evite el uso de propiedades sin rendimiento o que provoque reflujos / repintes .
Evite animar un montón de elementos en la página, ya que son más intensivos y también pueden ser difíciles de cambiar más adelante.
Cuando use CSS, use una transitionanimación sobre una cuando sea posible (dentro de lo razonable). Se desempeñan mejor y generalmente son más fáciles de trabajar.
Use de forma inteligente la will-changepropiedad en elementos grandes que va a animar para que el navegador sepa de antemano. 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 temporizaciones en JavaScript (las buenas bibliotecas de animación como GSAP lo hacen 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 que JavaScript no tiene.
Nunca debe ejecutar Flash en el producto final . Las animaciones de JavaScript funcionan mejor, son más dinámicas, se editan más fácilmente, no requieren descargas, funcionan en más plataformas (Flash no funciona en la mayoría de las tabletas / teléfonos) y son más receptivas que las antiguas y voluminosas. Tampoco son muy accesibles y no son compatibles con SEO.
Dicho esto, Animate CC (un cambio de nombre de Flash) es una forma útil de crear animaciones y puede exportar a Canvas usando Create.js .
Por lo general, hay varios métodos que puede usar para crear una animación. El mejor depende de lo que quieras que haga, y a veces no hay un método mejor y claro. Muchas veces me encuentro usando múltiples en el mismo proyecto. Lo importante es pensar críticamente , comprender exactamente cómo desea que se comporte la animación y decidir el método basado en eso. También ayuda si has trabajado un poco en cada uno.
[1] - Lottie también puede exportar a Android nativo, iOS y React Native .
En mi experiencia, al hacer animaciones estáticas (animaciones que no están destinadas a ninguna interacción con el usuario) descubrí que lo que mejor funcionó para mí fue animar las ilustraciones en After Effects y luego exportar el resultado final a un archivo .GIF. Esto hace que la animación sea completamente amigable para 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 para eso CreateJS parece ser el 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 tu trabajo para uso móvil y web. Tendrá el archivo .json y lottie.js que puede usar en su HTML. Pero primero tendrá que desactivar Permitir que los scripts escriban archivos y acceder a la Red en la configuración general. Cuando lo hayas hecho, ve a Ventana , Extensiones y encuentra Bodymovin . Seleccione su composición, establezca la ubicación para guardar y haga clic en render. 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.
Puede descargarlo aquí: http://aescripts.com/bodymovin Simplemente agregue su precio, o si lo desea de forma gratuita, puede 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.