
Apuesto a que todos habéis visto ese pequeño truco en el que se anima una ruta SVG para que parezca que se está dibujando. Es super guay. Jake Archibald fue pionero en la técnica y tiene una publicación de blog interactiva muy buena sobre cómo funciona. Brian Suda escribió sobre ello en 24 Ways. Polygon lo usó con gran efecto en un artículo diseñado a medida y escribió sobre él. Codrops tiene algunos buenos ejemplos.
Tengo muy poco que agregar, excepto que mi cerebro simplemente lo descubrió, así que pensé en explicarlo una vez más de la forma en que me encajó.
1. Tienes una forma SVG
2. La forma debe tener un trazo.
3. Los trazos pueden ser discontinuos
Podríamos hacer eso desde Illustrator, pero también podemos hacerlo mediante programación. Apuntemos a la ruta con CSS (asumiendo que estamos usando SVG en línea aquí, o mediante un <object>
) y aplique el guión de esa manera.
<svg ...>
<path class="path" stroke="#000000" ... >
</svg>
.path {
stroke-dasharray: 20;
}
Eso nos da guiones de 20px de longitud.
4. Esos guiones podrían ser más largos …
.path {
stroke-dasharray: 100;
}
5. También podemos “compensar” el trazo, que mueve la posición de esos guiones
Observe cómo animamos el desplazamiento de esos trazos largos:
Eso fue tan simple como:
.path {
stroke-dasharray: 100;
animation: dash 5s linear;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
6. Imagina un guión tan largo que cubre toda la forma.
Realmente no hay nada que ver, se parece a la forma completa si no estuviera punteada en absoluto. Solo necesitas hacer stroke-dasharray
un valor más largo que la longitud del trazo.
7. Ahora compensa ese trazo de modo que en lugar de cubrir toda la forma, NO cubra toda la forma.
Parecerá que la forma no existe en absoluto.
8. Ahora vuelva a animar el desplazamiento del trazo a 0
Si lo hace con CSS, querrá que la animación tenga animation-fill-mode
de forwards
por lo que el estado final sigue siendo cómo termina la animación.
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
¡Tada!
Ejemplo en vivo
Entonces, ¿por qué todo el JavaScript?
La mayoría de los ejemplos que ve de animaciones de líneas SVG usan JavaScript. Eso es porque es difícil saber cuál es realmente la longitud de ese trazo. Solo usamos 1000
en nuestro ejemplo porque resulta que tiene aproximadamente la longitud correcta.
Puede obtener esa longitud en JavaScript como:
var path = document.querySelector('.path');
var length = path.getTotalLength();
Entonces úsalo como quieras. Esos artículos a los que he vinculado en la parte superior abarcan mucho más todo esto, por lo que te dejaré consultarlos para obtener información más elegante. Solo quería cubrir el concepto, así que quizás también pueda hacer clic para usted.
¡También hay un truco! Echa un vistazo a un truco que hace que dibujar líneas SVG sea mucho más fácil.