soy Kseso y esto EsCSS

motion-path: animaciones CSS de elementos Html a lo largo de un path SVG

Presentación del documento del W3c "Motion Path Module Level 1" y explicación de las propiedades en él recogidas para animar elementos con Css (animation) a lo largo de un trazado o path SVG. El post incluye la traducción del artículo de Dudley Storey "Animate Elements on a Path with CSS"

motion-path: animaciones CSS de elementos Html a lo largo de un path SVG

✎ 1
COLABORACIÓN AUTOR INVITADO
motion-path: elementos animados con CSS a lo largo de un path SVG

El documento del W3c "Motion Path Module Level 1" (Abril de 2015) nace para, y cito textualmente,:

permitir a los autores animar cualquier objeto gráfico a lo largo de un path (de SVG).

Esto queire decir que en vez de tener que indicar en cada frame de una animación Css todos y cada uno de los puntos intermedios entre el inicial y final (tedioso, difícil o diréctamente imposible según qué) sólo será necesario indicar un trazo o path de un svg y el navegador se encargará de todo.

Para ello el documento describe la propiedad motion que es a su vez la forma acortada de otras tres:

  1. motion-path

    Con ella se indica el trazo o path a lo largo del cual se desplazará el objeto.

  2. motion-offset

    La distancia a lo largo del path a la que se coloca el objeto. 0% = al inicio, 50% = a la mitad, 100% = al final del path.

  3. motion-rotation

    La orientación o giro del objeto respecto al path. Así lo podemos situar "alineado", perpendicular o con cualquier otro ángulo.

Los editores de este documento son Dirk Schulze de Adobe Systems Inc. y Shane Stephens de Google. Así que este detalle explica, en parte, que pese a lo tierno del documento hoy ya sean soportadas por Chrome 46+ y Opera 33.

Mi scalextric en motion-path

¿Nostalgia por las horas junto al scalextric, sus coches y circuitos?

Estoy de cuerdo con Dudley Storey en las grandes posibilidades que tiene la propiedad motion-path. Y como muestra este pequeño experimento, demo en la que juego a adecuar la velocidad del objeto a las características del trazado.

See the Pen scalextric car on motion-path by Kseso (@Kseso) on CodePen.

Ver Demo a Full

En esta ocasión para explicar cada una de estas propiedades nada mejor que hacerlo con el artículo de un viejo conocido de este blog: Dudley Storey autor del blog thenewcode.com.

Animate Elements on a Path with CSS

por Dudley Storey [@dudleystorey]

See the Pen Moving Elements on a Path with CSS by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Nota de Kseso: Este pen es un fork del original al que he modificado un poco la animación.

Css es muy bueno moviendo elementos punto a punto usando animation y @keyframes, para escalarlos, moverlos en segmentos de arcos, balanceándolos...[1]. También puede recrear la tradicional animación paso a paso utilizando step(). Pero Css ha estado muy limitado cuando se trata de mover elementos a lo largo de curvas o trazados complejos.

Derivada de la tecnología que ha estado presente en SVG durante una década, la nueva especificación Motion Path permiten a los elementos seguir trayectorias curvas o predibujadas en Html y CSS con algo de asistencia de SVG. En el momento de escribir esto Css motion path sólo es soportado por Chrome 46+ y Opera 33. Así que para ver las demos asegúrate que tu navegador está actualizado a la última versión. (Al final del artículo analizo alternativas y adopciones futuras).

Nota de Kseso: en versiones anteriores de Chrome está disponible previa habilitación por el usuario chrome://flags/

Pregúntale a Alicia

Empecemos con el ejemplo (pen) inicial. Alicia es una simple imagen PNG. El quiz de la cuestión es el path. He obtenido los mejores resultados creando los paths así:

  • [1] Crea tu path en Illustrator o cualquier otro programa editor vectorial. E path para la animación del pen previo es algo como:
    Y su código:
<svg xmlns="http://www.w3.org/2000/svg" width="388px" height="401.1px" viewBox="0 0 388 401.1"> <path fill="#FFF" stroke="#000" d="M69.8, 98.3c116.9, 0,76.9, 261.5, 261.5, 261.5 s103.8-195.4, 233.8-195.4S627.5, 356, 715.2, 356"/> </svg>
  • [2] Borra todo el código del SVG excepto la información del path. Esto es, coge el valor que está a continuación del atributo d y elimina el resto.
  • [3] Asegúrate que las coordenadas del path tienen espacios en blanco después de cada una de las comas y que no hay retornos de carro (saltos de línea) en la secuencia de las coordenadas (mientras que pareciera que no hay diferencia, encontré que Chrome tiene por ahora problemas al interpretarlas).
  • [4] En el Css referencia este código del path en la regla del elemento que quieras mover como el valor de la propiedad Css motion-path.
#alice { motion-path: path("M69.8, 98.3c116.9, 0,76.9, 261.5, 261.5, 261.5 s103.8-195.4, 233.8-195.4S627.5, 356, 715.2, 356"); }

La especificación también indica que puede usarse como valor de la URL una ruta a un SVG en línea, lo que puede ser muy útil para los diseños RWD. Por ahora parece que no está soportado. (SVG shape elements, incluyendo rect, ellipse, line y polyline, sí son soportados).

  • [5] Crea una animación para el elemento usando la nueva propiedad motion-offset
@keyframes rabbithole { 0% { motion-offset: 0; } 100% { motion-offset: 100%; } }

El valor de motion-offset es la distancia que ha recorrido el elemento a lo largo del path.

En el pen de Alicia también escalo la imagen a al tiempo que se desarrolla la animación:

@keyframes rabbithole { 0% { motion-offset: 0; transform: scale(1); } 100% { motion-offset: 100%; transform: scale(0); } }
  • [6] Y para terminar llamo a la animación:
#alice { will-change: transform; animation: rabbithole 2.2s forwards; }

Un apunte

Por defecto el elemento animado es alineado con la tangente del trayecto del path. Esta alineación puede ser manipulada con la propiedad motion-rotation: estableciendo el valor en reverse reflejará el elemento (haciendo su animación como backwards), mientras que declarando un ángulo (por ejemplo motion-rotation: -45deg) forzará a seguir el path con una orientación fija.

También es importante tener en cuenta que el elemento será animado desde el primer punto dibujado en el SVG, aunque este comportamiento predeterminado se puede cambiar invirtiendo los valores de motion-offset.

Conclusión

Motion Path es la novedad más excitante de las animaciones Css en los últimos cinco años y este artículo de introducción apenas rasca la superficie de sus posibilidades.

Lo que frena su uso generalizado es la falta de soporte por los navegadores. Sin embargo, teniendo en cuenta las similitudes de la especificación y la implementación SVG original, no debería ser demasiado difícil creat un polyfill que duplicase el movimiento a lo largo del SVG.

Si encuentro un hueco libre en mi trabajo esta será una de las primeras cosas que haré. De momento complementaré este artículo con otro próximo con la animación SVG equivalente, así quienes estén interesados podrán usar estas técnicas en sus webs.

Crédito y autoría

Avatar de demosthenes.info

Hasta quí el articulo original de Dudley Storey [@dudleystorey] Animate Elements on a Path with CSS
Lo publico aquí al amparo y según las condiciones del propio autor: The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.
En este enlace tienes todas las formas de contacto con el autor original así como información adicional.

No te vayas, aún hay más

Y como el Sr. Jorge Aznar es un señor de palabra poco tiempo después de esta conversación la cumplió.

Motion path disponible en Chrome 46 y Opera 33

En su artículo, además de la explicación de cada una de las propiedades del grupo motion también encontrarás otras demostraciones (pens) suyas y enlaces a otras más de otros autores.

Si estás interesado en el uso de paths SVG´s (y todas las posibilidades que ofrece) en las animaciones Css con la propiedad motion-path es obligado que pases por el post de Jorge. En serio.