soy Kseso y esto EsCSS

Animaciones nativas de SVG´s con SMIL por Jorge Aznar

Introducción a las animaciones de SVG con SMIL por Jorge Aznar (aka @jorgeATGU) Autor entre otras, de la web jorgeatgu.com y de "SCALABLE, un libro sobre SVG". El artículo incluye demos y vídeo de ejemplos.

Animaciones nativas de SVG´s con SMIL por Jorge Aznar

✎ 2
COLABORACIÓN AUTOR INVITADO
Animaciones nativas de SVG´s con SMIL por Jorge Aznar

Artículo original de Jorge Aznar sobre las animaciones de los elementos de gráficos verctoriales escalables [SVG´s] con su lenguaje nativo SMIL. Explicación de cada uno de los elementos, etiquetas, atributos, funciones y valores que lo hacen posible. Se acompañan de su pen correspondiente así como de un polyfill (y vídeo) para extender su funcionamiento a los IE.
Este artículo fue publicado originalmente en el fallido proyecto #tras42.

El método nativo para animar nuestros elementos en SVG proviene de SMIL [Synchronized Multimedia Integration Language (1)], un estándar de la W3C desde 1998.

Para animar nuestros elementos en SVG tenemos a nuestra disposición animate animateTransform animateMotion animateColor set. Vamos a ver las que para mí son las dos más importantes animate y animateTransform .

Antes de seguir un apunte, animateColor dejará de formar parte de la especificación a partir de SVG 2.

Animate

La etiqueta animate es la piedra angular de las animaciones, con ella podemos animar casi todos los atributos que componen nuestros elementos en SVG. Vamos a poder animar desde el atributo de un filtro, pasando por los bordes redondeados de un rectángulo, continuando por el color, grosor y tipo de borde cualquier forma básica que tenemos a nuestra disposición en SVG.

Vamos a ver una parte del código de una animación

<animate attributeName="fill" values=" crimson; navajowhite; snow; maroon" begin="2s" dur="10s" fill="freeze" repeatCount="1"/>

La primera etiqueta animate va a modificar el color, esto se lo vamos a indicar a través de attributeName="fill".

Ahora le vamos a pasar los valores a través de values="", en este caso como vamos a modificar el color le vamos a pasar colores, los valores los vamos a separar con punto y coma [;]. Otra opción más limitada y similar a values es usar from y to, con la limitación de que solo le vamos a poder pasar dos valores, el del principio y el del final.

Con el atributo begin="" le indicamos cuando queremos que se inicie la animación.

Con el atributo dur="" le indicamos cuanto queremos que dure la animación.

El atributo fill="" tiene dos valores, el valor por defecto es remove con el cual el elemento que es animado vuelve a su valor original, en este caso crimson. Con el valor freeze le indicamos que el elemento se quede con el último valor que le hemos indicado en la animación, en este caso color maroon.

Con el atributo repeatCount="" le indicamos cuantas veces queremos que se repita la animación. También tenemos a nuestra disposición repeatDur="" con el cual le indicamos cuanto queremos que dure cada repetición.

See the Pen SVG animate fill by Jorge Aznar (@jorgeatgu) on CodePen.

Para tener más control sobre nuestra animación tenemos los atributos calcMode, keyTimes y keySplines.

calcMode

Con el vamos a especificar el modo de interpolación de la animación. Tenemos cuatro valores los cuales son discrete, linear, paced y spline. Su valor por defecto es linear.

Discrete

La animación saltara de un valor a otro sin ningún efecto.

Linear

La interpolación linear entre los valores se utiliza para calcular la función de animación. Es el valor por defecto excepto en animatemotion.

Paced

Define la interpolación para producir un ritmo incluso de cambio a lo largo de la animación. Solamente es compatible con los valores que definen a un rango numérico lineal, y para el cual se puede calcular alguna noción de “distancia” entre los puntos (por ejemplo, posición, anchura, altura, etc.). Si utilizamos paced cualquier keyTimes o keySplines no será tomado en cuenta. Es el valor por defecto para animatemotion.

Spline

Interpolación que se crea desde una lista de valores según una función de tiempo definido por una línea cúbica de Bézier. Los puntos se definen en keyTimes, y los puntos de control para cada intervalo se definen en keySplines.

Vamos a ver una demo con la misma animación para los cuatro rectángulos pero con todos los valores de calcMode.

See the Pen SVG calcMode by Jorge Aznar (@jorgeatgu) on CodePen.

keyTimes

El atributo keyTimes se utiliza para controlar el ritmo de una animación, cada valor definido debe ser igual o mayor que el anterior. Tendremos tantos valores en calcMode como valores tengamos en value.

  • Para linear y spline, el primer valor de la lista debe ser 0 y el último valor debe ser 1.
  • Para discrete, el primer valor de la lista debe ser 0.
  • Para paced la lista de valores no es tomada en cuenta.

Vamos a ver una demo con un círculo en el que el radio del círculo se va modificando a lo largo de la animación.

See the Pen SVG animate radius by Jorge Aznar (@jorgeatgu) on CodePen.

Una gran parte de la animación transcurre con estos dos valores animate attributeName="r" values="100; 0; consecuencia de los keyTimes que le hemos dado a continuación keyTimes="0; 0.8;.

keySpline

Este atributo solo funciona con calcMode="spline".
Con keySplines definimos la velocidad de la animación a través de una curva Bezier. Para definir cada punto de control utilizamos cuatro valores: x1 x2 y1 y2, todos estos valores tienen que estar entre el 0 y el 1.

Una buena herramienta para crear keySpline: http://www.carto.net/papers/svg/samples/keysplines.svg

animateTransform

Con animateTransform vamos a dar movimiento a las diferentes transformaciones que tenemos a nuestra disposición en SVG, las cuales son rotate, scale, translate, skewX y skewY. Una de las diferencias con animate es que ademas de decirle a través de attributeName que es una transformación le tendremos que decir con type="" que tipo de transformación vamos a utilizar.

Rotate

Como su nombra indica vamos a dar un movimiento de rotación a un elemento. Para indicar los valores de la rotación como hemos visto anteriormente podemos utilizar values y from y to. Le vamos a pasar tres valores, el primero de ellos corresponde a los grados de la rotación los cuales estarán comprendidos entre 0 y 360. Los dos siguientes valores corresponden a las coordenadas horizontales y verticales desde donde vamos a rotar el objeto.

Para las rotaciones vamos a tener en cuenta la posición de los objetos en la coordenada horizontal y vertical.

En la demo que vamos a ver a continuación el primer rectángulo rota desde la esquina superior izquierda. El segundo rectángulo rota desde su centro. Esto lo vamos a lograr con una sencilla operación de suma: Para el segundo valor sumamos la mitad de su anchura (que es 50px) más su posición en la coordenada horizontal (que es 300), lo cual nos da 350, para el tercer valor sumamos la mitad de su altura (que es 50px) más su posición en la coordenada vertical (que es 100) lo cual nos da 150

.

See the Pen SVG rotate by Jorge Aznar (@jorgeatgu) on CodePen.

Translate

Con esta transformación vamos a conseguir un movimiento de traslación a lo largo de la coordenada horizontal y vertical. Si tan solo le pasamos un valor solo vamos a mover el objeto a lo largo de su coordenada horizontal. Si le pasamos dos valores el primero corresponderá a su coordenada horizontal y el segundo a su coordenada vertical.

See the Pen SVG translate by Jorge Aznar (@jorgeatgu) on CodePen.

Scale

Con esta transformación vamos a cambiar la escala del objeto. Si tan solo le pasamos un valor vamos a modificar uniformemente toda la escala del objeto. Si le pasamos dos valores el primero modificara su anchura y el segundo su altura.

See the Pen SVG scale by Jorge Aznar (@jorgeatgu) on CodePen.

Soporte

Llegamos a la parte final del artículo el tema del soporte por los navegdaores. Seguramente estas pensando en ese ¿no? Pues correcto.

¿Quién da soporte a SMIL?

Pues todos los navegadores modernos como Chrome, Opera, Safari y Firefox. Por otra parte siempre esta IE el cual no da soporte a SMIL en ninguna de sus versiones.

Los desarrolladores de IE en su día publicaron un borrador con cosas de SMIL que soportaba IE6 pero el día que sacaron IE10 dejaron claro que no iban a dar soporte a SMIL. El motivo que dieron fue para centrarse plenamente en un método de animación y ellos eligieron CSS3, pero curiosamente las transformaciones de CSS3 no tienen soporte sobre SVG en ninguna versión de IE.

Pero no todo está perdido, si queremos que las animaciones funcionen en IE tenemos a nuestra disposición un polyfill llamado FAKESMILE, el funcionamiento es sencillo lo descargamos de la página, lo adjuntamos en nuestro proyecto y solamente tenemos que colocar lo siguiente <script type="text/ecmascript" xlink:href="smil.user.js"/> entre las etiquetas de SVG.

A continuación os dejo un vídeo en el que se puede ver como funcionan algunas animaciones hechas con SMIL en IE10 e IE11.

iefake de Jorge Aznar en Vimeo.

En la pasada conferencia GraphicalWeb anteriormente conocida como SVGOpen tuitearon el siguiente tweet:

Quién sabe igual al final se animan y todo…

Recursos

Un par de colecciones con varias animaciones hechas con SVG&SMIL

  1. Ejemplos:
  2. Gente que hace cosas increíbles con SVG&SMIL en CodePen:

El autor

Animaciones nativas en SVG. Por Jorge Aznar

@Jorge Aznar
Diseñador gráfico/web.
Colaboro con los hangouts de #vectoresIO una iniciativa de desarrolloWeb.
En mi web [jorgeatgu.com] puedes ver diferentes trabajos, en mi blog lo que escribo y en CodePen mis experimentos con SVG + HTML5 * SMIL * CSS3. Y en twitter @jorgeATGU
También he escrito un libro sobre SVG llamado SCALABLE

Licencias de este artículo

Pese a que el blog está bajo una licencia Beerware, este artículo queda fuera de ella. Todos los derechos corresponden a su autor, y debes contactar con él para cualquier tema relacionado con él.