Animar trazados con wheel

facebook-svg gplus-svg twitter-svg

El evento Wheel se dispara cuando movemos la rueda del ratón. Podemos utilizar este evento para animar trazados SVG. En el siguiente ejemplo tenemos un rectángulo dibujado con polygon, pero podemos utilizar también rect o polyline o incluso path.

<svg width="250" height="250" viewBox="0 0 250 250">
     <polygon points="50,50 200,50 200,200 50 200" 
              style="fill:none;
                     stroke:#000;
                     stroke-width:30;
                     stroke-linecap:round;
                     stroke-linejoin:round;"
              ></polygon>
</svg>

Para animar el trazado vamos a utilizar el atributos stroke-dasharray, que dibuja líneas discontinuas en SVG y stroke-dashoffset que especifica el desplazamiento inicial al crear líneas discontinuas.

Un ejemplo fácil

El rectángulo cuyo borde queremos animar tiene un perímetro de 600px (150 * 4). Así que necesitamos que el valor de stroke-dasharray = 600. Esto quiere decir que el patrón de líneas discontinuas utilizado está formado por fragmentos de línea de 600px seguidos por espacios de 600px. En el JavaScript guardamos este valor en una variable, y también establecemos el valor de stroke-dasharray en CSS.

var dasharray = 600;
svg.style.strokeDasharray = dasharray;

En JavaScript utilizamos strokeDasharray en lugar de stroke-dasharray, porque, ya se sabe: para referirnos a una propiedad CSS en JavaScript debemos utilizar CamelCase.

También establecemos el valor del atributo stroke-dashoffset = 600. Esto quiere decir que la primera raya del patrón aparece a 600px (en este caso) del inicio del trazado. Prácticamente no hay raya a la vista.

El evento Wheel

El evento wheel se dispara al mover la rueda del ratón. Para ver todas las propied ades y métodos de este evento podemos escribir:

document.addEventListener("wheel", function(e) { console.log(e); }, false);

y consultar lo que sale en la consola del navegador.

El comportamiento predeterminado del evento wheel es desplazar ( normalmente ) hacia abajo o hacia arriba al elemento de destino del evento ( event target ), el documento en este caso. Para que esto no pase tenemos que prevenir el comportamiento por defecto utilizando

e.preventDefault();

Pero lo que nos interesa en este momento es la propiedad deltaY: que representa el valor del desplazamiento vertical. Podemos utilizar este valor para modificar el valor del atributo stroke-dashoffset (strokeDashoffset en JavaScript):

var dashoffset = 600;
. . . . . . . . . . .
dashoffset -= e.deltaY;
. . . . . . . . . . .
svg.style.strokeDashoffset = dashoffset;

También tenemos que limitar el valor de stroke-dashoffset par que no sea nunca más grande de 600 o mas pequeño de 0:

if (dashoffset > 0 && e.deltaY > 0 || 
      dashoffset < 600 && e.deltaY < 0) {
      dashoffset -= e.deltaY;
   }
if(dashoffset < 0)dashoffset = 0;
if(dashoffset > 600)dashoffset = 600;

See the Pen event wheel stroke-dashoffset by Gabi (@enxaneta) on CodePen.

Y lo interesante es que podemos hacer lo mismo con texto:

See the Pen evento wheel stroke-dashoffset* by Gabi (@enxaneta) on CodePen.

Otro ejemplo que utiliza el evento wheel. El SVG es algo más complicado pero, como puede, ver el JavaScript queda casi sin cambiar.

See the Pen Have a coffee by Gabi (@enxaneta) on CodePen.