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 las aplicaciones móviles ahora se basan cada vez más en vectores, eliminando los mapas de bits debido a la necesidad de representarlos en todo tipo de resoluciones de pantalla, dpi, proporciones, etc. y debido a la útil capacidad de "zoom" para Las páginas de mejor lectura en los navegadores móviles hicieron que los activos de mapas de bits fueran feos e inutilizables.
Entonces, es hora de comenzar a crear íconos, fondos y controles animados en SVG, pero ¿cómo se animan los archivos SVG?
Gran parte de esta respuesta también se publica en esta pregunta relacionada sobre cómo animar ilustraciones para la web.
Sara Soueidan, probablemente la mejor animadora de SVG en la web, escribió : "Sé que escribí la guía de animaciones SMIL pero, viendo su futuro, personalmente ya no las uso". Tú tampoco deberías.
Las animaciones SMIL no funcionan en ningún IE, Edge, algunos navegadores móviles , y Chrome/Opera las está descartando gradualmente (aunque, más recientemente, el equipo de Chrome dijo que esta desactivación se suspendió temporalmente ). Debe evitar usarlos el 99% del tiempo.
SVG se puede animar en gran medida usando CSS puro (incluido el uso :hoverde estados, transforms, transitions y animations). Está planeado obtener soporte completo de animación CSS, pero actualmente solo algunos son compatibles y pueden tener errores con problemas de navegadores cruzados.
Sara Soueidan dice que CSS es excelente para animar SVG, pero prefiere JS porque ayuda a resolver estos problemas entre navegadores. Como tal, utilícelo cuando pueda, pero recurra a JS cuando las animaciones sean más complejas o no funcionen entre navegadores.
La mayoría de las veces, los SVG se pueden animar con un poco de JavaScript sin necesidad de una biblioteca de animación de JavaScript. La animación en JS tiene mucha más compatibilidad con varios navegadores 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 grande, pero la mayoría no maneja las animaciones tan fácilmente o con el mismo rendimiento que GSAP.
Para tipos particulares de animación, el uso de un complemento JS particular como MorphSVG de GSAP puede ahorrarle bastante tiempo porque se encargan de los problemas de navegadores cruzados y 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 de SMIL" para obtener más información.
También es aceptable usar polyfills para SMIL, pero estoy cansado de hacerlo porque no se usan ni se prueban mucho. Dicho esto, Eric Willigers y FakeSmile son los dos más comunes.
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 usando 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.
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 recurra a un buen enfoque de JavaScript cuando no sea posible.
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 .
Para obtener una visión 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 las animaciones SMIL.
imgetiqueta. Este archivo único también es significativamente más eficiente y ciertamente más legible que cualquier formato basado en JS. El futuro bien puede ser usar JS para leer y representar el contenido de SMIL, pero eso no lo convierte en un formato deficiente.Siempre he encontrado que depender de cualquier cosa que no sean las bibliotecas JS es un gran problema para el soporte/mantenimiento de WRT.
Siempre he usado D3.js. Originalmente fue creado para crear elementos SVG/DOM interactivos a partir de conjuntos de datos. Sin embargo, puede modificar el 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 suaves en tiempo real, visualizaciones de mapas, transformaciones DOM y para crear archivos SVG para incluirlos en PDF. Lo he visto por toda la web también. El sitio web tiene un montón de ejemplos y enlaces a páginas que lo han usado.
Lo recomiendo porque es bastante compatible con varios navegadores, tiene una comunidad activa y es fácil de aprender. Echa un vistazo a la página web y presta atención a los usos del mundo real para ver una pequeña muestra de lo que puedes hacer con ella.
Las siguientes son las formas posibles de animar svg:
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 el complemento 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 una pieza especial de código javascript 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 creado por Eric Willigers hace exactamente eso: traduce SMIL a la API de animaciones web que incluso admite el navegador de Microsoft. 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 desaprobación de SMIL por parte de Chrome y criticó a los desarrolladores por esta elección. Pero no fue una verdadera desaprobación, solo una reubicación del trabajo de interpretar SMIL en un nivel de relleno múltiple.
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 lee en la web sobre la desaparición de SMIL, no se preocupe. 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-animación
Aquí hay una página de demostración que usa 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 miras la fuente, se explica por sí mismo.
Además, el rendimiento con polyfill suele ser mejor que el SMIL original, porque en muchos navegadores Web Animations está acelerado por hardware, mientras que SMIL normalmente no lo está.
La forma más sencilla de crear animaciones SVG es usar 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 y el sonido como un solo archivo SVG, como este episodio de dibujos animados:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
La forma de javascript es más complicada. En primer lugar, debe 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 creada 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 inflados. El exportador produce un comando snap svg para cada fotograma de la animación, no para cada fotograma clave, produciendo un archivo svg de 18 Kb con más de 1000 líneas de código, solo para rotar un simple rectángulo a través de grados 360. 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 3-4 fotogramas clave svg en Inkscape y Greenock SVGMorphing lib 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 renderiza mallas de archivos .obj 3D en SVG y las anima muy fácilmente.
En cuanto a las herramientas, puede crear los fotogramas clave de animación principalmente con tres software:
Inkscape: código abierto, tiene toneladas de características, es un paquete de edición de vectores avanzado 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 funciones que aún no son compatibles con SVG, pero también tiene la peor compatibilidad con el formato. A menudo necesitará editar manualmente el archivo SVG exportado para solucionar el problema del ilustrador. 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 de SVG.
Actualmente, el único editor de animación SVG es este:
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 gratuitas de código abierto, pero las probé todas y todavía apestan en mi humilde opinión. Esperemos para 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 al que se hace referencia sobre snap.svg: https://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files
bemdesign
Luciano
Emanuele Sabetta
usuario9447
usuario9447