¿Cómo animas SVG para la web?

12

Los gráficos vectoriales ahora se están apoderando de la web e incluso de las aplicaciones móviles. Los íconos, botones y elementos de las páginas web o aplicaciones móviles se están volviendo cada vez más basados ​​en vectores, cayendo mapas de bits debido a la necesidad de renderizarse en todo tipo de resoluciones de pantalla, ppp, proporciones, etc. y debido a la capacidad útil de "acercarse" a leer mejor las páginas en los navegadores móviles hizo que los recursos de los mapas de bits fueran feos e inutilizables.

Es hora de comenzar a crear íconos animados, fondos y controles en SVG, pero ¿cómo animar archivos SVG?

Emanuele Sabetta
fuente
1
Su pregunta es muy amplia y puede generar respuestas basadas en opiniones que no son las mejores para el GDSE. Por favor revise nuestra ayuda para ver la mejor manera de hacer / responder preguntas. Además, "mejor" siempre es muy subjetivo y sensible al contexto cuando se trata de herramientas y procesos.
bemdesign
Si desea conocer las animaciones SVG para uso web, tal vez debería simplificar su pregunta y formularla en stackoverflow.com .
Luciano
Esta es una pregunta muy importante y frecuentemente respondida. Contribuya con sus respuestas si conoce otras herramientas o bibliotecas para animar svg. Gracias.
Emanuele Sabetta
44
El problema que tengo con esta pregunta es que se puede considerar una pregunta de recopilación de recursos basada en pedir las herramientas. No me importa la pregunta de si podemos centrarnos en lo que realmente deberíamos discutir, la ejecución de la animación SVG. He editado tu pregunta para estar mejor dentro del alcance.
DᴀʀᴛʜVᴀᴅᴇʀ
@EmanueleSabetta Si recibió una respuesta a su pregunta, marque una de las respuestas como la respuesta aceptada a continuación.
DᴀʀᴛʜVᴀᴅᴇʀ

Respuestas:

18

Gran parte de esta respuesta también se publica en esta pregunta relacionada sobre cómo animar ilustraciones para la web.


Evita las animaciones SMIL

Sara Soueidan, probablemente la mejor animadora de SVG en la web, escribió "Sé que escribí la guía de animaciones SMIL pero, al ver su futuro, ya no las uso personalmente". Tú tampoco deberías.

Las animaciones SMIL no funcionan en ningún IE, Edge, algunos navegadores móviles , y Chrome / Opera las está cayendo gradualmente (aunque, más recientemente, el equipo de Chrome dijo que esta desestimación se suspende temporalmente ). Debe evitar usarlos el 99% del tiempo.

Usa CSS para animaciones muy simples

SVG se puede animar en gran medida utilizando CSS puro (incluido el uso de :hoverestados, transforms, transitionsy animations). Está previsto obtener soporte completo de animación CSS, pero actualmente solo algunos son compatibles y pueden tener errores con problemas de navegador cruzado.

Sara Soueidan dice que CSS es excelente para animar SVG, pero prefiere JS porque ayuda a resolver estos problemas entre navegadores. Como tal, úselo cuando pueda pero recurra a JS cuando las animaciones sean más complejas o no funcionen entre navegadores.

Use animaciones de JavaScript si CSS no funciona

La mayoría de las veces, los SVG se pueden animar usando un poco de JavaScript sin la necesidad de una biblioteca de animación de JavaScript. Animar en JS tiene mucho más soporte para navegadores cruzados y es bastante fácil de usar con algunos conocimientos básicos.

Para animaciones complejas que requieren el uso de una línea de tiempo o algo similar, usar una biblioteca como GSAP puede ser muy útil. Hay innumerables otras bibliotecas de animación SVG, Snap.svg es otra gran, pero la mayoría no maneja las animaciones con tanta facilidad o rendimiento como GSAP.

Para tipos particulares de animación, el uso de un complemento JS particular como MorphSVG de GSAP puede ahorrarle bastante tiempo porque se ocupan de los problemas del navegador cruzado y de todos los cálculos. Sin embargo, la mayoría de las animaciones no requieren complementos como este. Consulte "Una guía de alternativas a las funciones SMIL" para obtener más información.

También es aceptable usar polyfills para SMIL, pero estoy cansado de hacerlo porque no son muy utilizados / probados. Dicho esto, Eric Willigers y FakeSmile son los dos más comunes.

Estampación

El único software que he encontrado que exporta a SVG + JS es un complemento de Adobe After Effects llamado Lottie (anteriormente Bodymovin), una extensión de Flash llamada Flash 2 SVG y una pequeña herramienta en línea llamada SVG Circus . Aparte de eso, los animadores de software como Adobe Edge Animate, Adobe Animate CC o Animatron exportan a animaciones SMIL que no deberían usarse. Como tal, es mejor que algún desarrollador haga animaciones SVG + CSS o SVG + JS utilizando SVG exportados desde un editor . Inkscape tiene un gran recurso que vincula tutoriales y ejemplos de cómo hacer esto.

Estoy seguro de que en el futuro más software de animación admitirá la exportación a SVG + JS.


Algunas otras notas importantes

  • Es importante tener en cuenta el rendimiento . Sara Drasner creó algunos puntos de referencia de rendimiento para SVG que muestran que debe optar por animaciones CSS aceleradas por hardware siempre que sea posible, pero recurrir a un buen enfoque de JavaScript cuando no sea posible.

  • 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 .


Para una vista más completa de las animaciones web, lea la publicación de Rachel Nabor en A List Part . Para algunas sugerencias adicionales sobre herramientas, esta publicación es muy útil, aunque no estoy de acuerdo con todos los sentimientos, especialmente con la forma en que presenta animaciones SMIL.

Zach Saucier
fuente
- SVG también se usa en aplicaciones móviles. El mayor crecimiento de SVG en los últimos dos años fue en los activos vectoriales de la interfaz de usuario de la aplicación. Los mapas de bits ya no se usan.
Emanuele Sabetta
Además, actualmente no hay forma de crear una gran animación con CSS. Necesitas SMIL para crear grandes animaciones como esta: tbyrne.org/portfolio/smil/LoveDota.svg
Emanuele Sabetta
Sobre la elección del equipo de desarrollo de Chrome para dejar de admitir SMIL, en el hilo de dicho anuncio dijeron que la razón principal era el hecho de que ahora puede usar SMIL a través de este polyfill: github.com/ericwilligers/svg-animation
Emanuele Sabetta
44
Dios mío, estoy a favor de sacar el máximo provecho de las tecnologías si apestan, pero oh, Flash manejó las animaciones vectoriales incluso antes de que tuviera ese nombre hace 20 (!) años. Me entristece leer esta respuesta (excelente e informativa, +1) que comienza con cómo las cosas no funcionan en los navegadores y termina con cómo podría haber algo como un estándar en el futuro, tal vez (y todos los dedos cruzados se implementarán algun lado). Y si el párrafo sobre "Herramientas" comienza con " El único software ... ", algo está mal. Querido internet, por favor reúna su mierda.
Rapidograph
1
También debe verificar Bodymovin que exporta animaciones de After Effects a svg + JS github.com/bodymovin/bodymovin
airnan
2

Siempre he encontrado que depender de otra cosa que no sean las bibliotecas JS es un gran problema para el soporte / mantenimiento de WRT.

Siempre he usado D3.js . Fue creado originalmente para crear elementos SVG / DOM interactivos a partir de conjuntos de datos. Sin embargo, puede modificarlo SVG / DOM que se incluye en una página, siempre que JS tenga acceso a él.

Lo he usado en una variedad de proyectos para crear / animar SVG / DOM. Algunos ejemplos incluyen paneles de control en tiempo real, visualizaciones de mapas, transformaciones DOM y crear archivos SVG para incluirlos en archivos PDF. Lo he visto en toda la web también. El sitio web tiene muchos ejemplos y enlaces a páginas que lo han utilizado.

Lo recomiendo porque es bastante compatible con varios navegadores, tiene una comunidad activa y es fácil de aprender. Eche un vistazo a la página web y preste atención a los usos del mundo real para ver una pequeña muestra de lo que puede hacer con ella.

bob0the0mighty
fuente
1
Alguna información adicional podría hacer que esta respuesta sea de mucha mayor calidad. El nombre que deja caer una biblioteca no es muy útil. ¿Cuándo debe usarse D3 en lugar de otros métodos más simples?
Zach Saucier
2

Las siguientes son las formas posibles de animar svg:

SVG ANIMACIONES SONRIENTES

El SVG se puede animar a través de su potente lenguaje de marcado nativo, llamado SMIL, exportado directamente desde herramientas de animación como Adobe Animate CC + flash2svg.

Para animar un SVG con SMIL incluso en navegadores que no son compatibles, solo necesita usar un polyfill SMIL.

Un polyfill es un código de JavaScript especial que brinda soporte para las funciones que faltan en un navegador, traduciendo la codificación original en una que el navegador pueda entender.

El polyfill SMIL realizado por Eric Willigers hace exactamente eso: traduce SMIL en API de animaciones web que incluso el navegador de Microsoft admite. Es tan eficiente que los desarrolladores de Google Chrome decidieron abandonar el soporte SMIL nativo y centrarse en las animaciones web, dejando a Eric Willigers polyfill la tarea de reproducir archivos SMIL en Chrome.

Alguien interpretó erróneamente esto como una depreciación de SMIL por parte de Chrome, y criticó a los desarrolladores por esta elección. Pero no fue una verdadera depreciación, solo una reubicación del trabajo de interpretar SMIL a nivel de polyfill.

De hecho, los propios desarrolladores de Chrome citaron el polyfill de Willigers en el anuncio oficial sobre su intención de desaprobar SMIL.

Entonces, si lees en la web sobre la desaparición de SMIL, no te preocupes. La "muerte" de SMIL fue muy exagerada. Es más como un renacimiento.

Para usar SMIL en todos los navegadores, incluidos IE y EDGE, solo necesita agregar este polyfill de javascript a su página web:

https://github.com/ericwilligers/svg-animation

Aquí hay una página de demostración que utiliza el polyfill hecho por Tom Byrne, el autor del popular exportador flash2svg:

la página sin el polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

y la misma página con el polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Si nos fijamos en la fuente, se explica por sí misma.

Además, el rendimiento con el polyfill suele ser mejor que el SMIL original, porque en muchos navegadores Web Animations es acelerado por hardware, mientras que SMIL generalmente no lo es.

ANIMACIONES DE EXPORTACIÓN EN SVG SMIL

La forma más sencilla de crear animaciones SVG es utilizar herramientas como Adobe Animate CC para dibujarlas y complementos como Flash2svg ( https://github.com/TomByrne/Flash2Svg ) para exportarlas en SVG. Con él, puede exportar casi todas las animaciones + sonido como un solo archivo SVG, como este episodio de dibujos animados:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANIMATION JS BIBLIOTECAS

La forma javascript es más complicada. En primer lugar, debes ser un programador de JavaScript. Entonces tienes que elegir entre muchas bibliotecas. Los más populares son:

  • SnapSVG http://snapsvg.io
    Esta biblioteca es la sucesora de la antigua y popular biblioteca de animación Raphael hecha por el mismo autor. Muy estable, pero convierte SVG en un formato interno en tiempo de ejecución para animarlo. Las opciones de transformación también son muy básicas, solo interpolación lineal. (NOTA: También hay un complemento snap.svg para Adobe Animate CC, pero los archivos exportados están hinchados. El exportador produce un comando snap svg para cada cuadro de la animación, no para cada fotograma clave, produciendo un archivo svg de 18Kb con más de 1000 líneas de código, solo para rotar un rectángulo simple en 360 grados. El complemento Flash2svg es mucho más eficiente, solo un comando y pocos bytes para hacer el mismo trabajo).

  • Greensock MorphSVG
    http://greensock.com/morphSVG
    Una biblioteca de morphing con todas las funciones que permite animar SVG fácilmente y sin la necesidad de convertirlos en un formato interno. Simplemente cree fotogramas clave de 3-4 svg en Inkscape y la libra Greenock SVGMorphing se interpolará automáticamente entre los fotogramas y creará todos los fotogramas intermedios para una reproducción fluida. Aquí hay un ejemplo:
    http://codepen.io/Emasoft/pen/reOqYE

  • 3D Seen.js
    http://seenjs.io/demo-svg-canvas.html
    Si desea animar en 3D, esta biblioteca es muy poderosa.
    Seen.js procesa mallas de archivos .obj en 3D en SVG y las anima con mucha facilidad.

SVG EDITORES DE IMÁGENES

En cuanto a las herramientas, puede crear los fotogramas clave de animación principalmente con tres software:

  • Inkscape: código abierto, tiene muchas características, es un paquete avanzado de edición de vectores hecho por personas que participan en el Grupo de Trabajo SVG. La referencia para el formato SVG. No es fácil de aprender.

  • Adobe Illustrator: software comercial de dibujo vectorial muy potente, ofrece muchas características que SVG aún no admite, pero también tiene la peor compatibilidad con el formato. A menudo necesitará editar manualmente el archivo SVG exportado para arreglar el desastre de Illustrator. Pero es muy popular en la escuela de arte, y todos los gráficos saben cómo usarlo.

  • Affinity Designer: este es un software comercial como Illustrator, pero con una excelente compatibilidad SVG, casi al nivel de Inkscape. La interfaz de usuario es mucho más amigable, y ahora se está volviendo muy popular entre los artistas SVG.

SVG EDITORES DE ANIMACIÓN

Actualmente el único editor de animación SVG es este:

  • Adobe Animate CC: el antiguo Adobe Flash Pro fue reescrito completamente por Adobe para migrar de las animaciones flash ahora obsoletas a las animaciones SVG modernas. Puede exportar las animaciones SVG resultantes junto con una biblioteca javascript personalizada, o elegir guardar en SVG + SMIL usando complementos como "flash2svg". Esta última opción es muy eficiente, siempre la uso en lugar del exportador nativo hinchado.

Puede descargar el complemento gratuito desde aquí: https://github.com/TomByrne/Flash2Svg

O instálelo desde el panel de complementos de Adobe: https://creative.adobe.com/addons/products/7232

Lamentablemente, Adobe Animate CC es comercial. Hay aplicaciones de animación alternativas de código abierto gratuitas, pero las probé todas y todavía apestan en mi humilde opinión. Esperemos por el futuro.

Referencias:
Mi publicación de blog más exhaustiva sobre el tema: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

El caso hace referencia a snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files

Emanuele Sabetta
fuente
Algunos navegadores también admiten el uso de CSS para animar elementos SVG.
bemdesign
Esta respuesta es muy obvia e ignora mucho de lo que sugieren los mejores profesionales que trabajan en animación web.
Zach Saucier
1
Adobe Animate CC está lejos de ser el único software de animación SVG
Zach Saucier
1
No tiene que usar una biblioteca JS para animar muchos SVG. Su respuesta implica que son obligatorios
Zach Saucier
44
Oye, nos llamó la atención que esto se copia literalmente del Reddit que vinculaste , reddit.com/r/webdev/comments/4996ph/how_best_to_animate_svgs --- si no es así, debes editar tu respuesta para mostrar su una cita. O escribe la respuesta con tus propias palabras.
Ryan