Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Es la temporada, así que en este tutorial, explicaré la creación de algunos iconos SVG animados con CSS y con temas navideños. Hay algunos iconos geniales en Iconmelon, un sitio que alberga muchos conjuntos de iconos vectoriales gratuitos que pueden interesarte. Los iconos que estoy usando son cortesía del diseñador Sam Jones. ¡Así que tómate una taza de ponche de huevo, acerca tu computadora portátil al tronco de Navidad y comencemos!
SVG y la Web
Si estás interesado en usar SVG en la web, los iconos son un excelente lugar para comenzar. Los SVG son flexibles, independientes de la resolución y livianos, por lo que los iconos se prestan naturalmente al formato vectorial. Además, al igual que HTML, los SVG se pueden diseñar fácilmente con CSS, que incluye animación CSS3. Agregarle un toque de interactividad con animación a tus iconos puede ayudar a crear una experiencia agradable para tus usuarios y también agregar contexto sobre lo que representa un icono.
Para obtener una introducción sobre SVG y la web, revisa Archivos SVG: de Illustrator a la Web.
Nota: Las siguientes demostraciones utilizan tecnologías de vanguardia que, en el momento de escribir este artículo, no son compatibles con algunos navegadores, como Internet Explorer. Si sigues el tutorial, es mejor que uses Chrome o Safari. El soporte de Mozilla es perfectamente posible con los prefijos de propiedad apropiados. Ciertamente puedes esperar que el soporte para estas tecnologías mejore en el futuro.
Además: En este artículo omití algunos prefijos de navegador necesarios de algunas propiedades CSS para la concisión y la legibilidad. Revisa la biblioteca sin prefijos de Lea Verou si quieres escribir CSS sin prefijos fácilmente. También puedes intentar crear tus demostraciones en Codepen, que se puede configurar fácilmente para usar prefixfree.
Preparación del código SVG para la edición
Uno de los mayores problemas de SVG es que el código es difícil de manejar. El código SVG que exporta Illustrator, mi editor de gráficos vectoriales preferido, es bastante ilegible a primera vista. Inkscape en realidad hace un mejor trabajo exportando SVG a este respecto, pero descubrí que simplificar y formatear el código puede contribuir en gran medida a que el código sea más fácil de leer y trabajar.
Este es el código SVG para el primer ejemplo de animación que demostraré, una luz navideña parpadeante.
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3 |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
4 |
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
5 |
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> |
6 |
<path id="outline" d="M38.178,12.142H25.822v10.723c-1.605,2.67-2.461,6.529-2.461,11.406c0,9.473,4.748,17.587,8.637,17.587 |
7 |
s8.641-8.114,8.641-17.587c0-4.881-0.854-8.744-2.461-11.412V12.142z"/> |
8 |
<rect id="basefill" x="29.822" y="16.142" fill="#4D4B4C" width="4.355" height="4.273"/> |
9 |
<path id="lightfill" fill="#FFFFFF" d="M31.998,47.768c-1.402-0.959-4.637-6.229-4.637-13.497c0-5.775,1.271-8.566,2.207-9.855 |
10 |
h4.857c0.945,1.293,2.213,4.08,2.213,9.855C36.639,41.542,33.402,46.809,31.998,47.768z"/> |
11 |
</svg>
|
Este código se exportó desde mi herramienta de edición de vectores, Adobe Illustrator. Es casi ilegible a primera vista. Este es el mismo marcado simplificado:
1 |
<svg class="svg-light" |
2 |
viewBox="0 0 64 64" |
3 |
xmlns="http://www.w3.org/2000/svg" |
4 |
>
|
5 |
|
6 |
<path class="outline" |
7 |
d="M38.178,12.142H25.823v10.723c-1.606,2.67-2.461,6.529-2.461,11.406c0,9.473,4.748,17.587,8.636,17.587c3.889,0,8.641-8.114,8.641-17.587c0-4.881-0.854-8.744-2.461-11.412V12.142z" |
8 |
/>
|
9 |
|
10 |
<rect class="base" |
11 |
x="29.822" |
12 |
y="16.142" |
13 |
width="4.355" |
14 |
height="4.273" |
15 |
/>
|
16 |
|
17 |
<path class="bulb" |
18 |
d="M31.998,47.768c-1.402-0.959-4.637-6.229-4.637-13.497c0-5.775,1.272-8.566,2.207-9.856h4.858c0.945,1.293,2.213,4.081,2.213,9.856C36.639,41.542,33.402,46.809,31.998,47.768" |
19 |
/>
|
20 |
</svg>
|
Simplifiqué significativamente este xml al eliminar gran parte del marcado adicional que el programa genera de forma predeterminada. Mi elemento SVG base contiene lo siguiente:
- Una clase:
svg-light. Usé el prefijosvg-para apuntar fácilmente a elementos dentro de un SVG específico. - La propiedad
viewbox. El valor de la propiedadviewboxdefine la relación de aspecto del documento y es equivalente al tamaño de la mesa de trabajo en Illustrator. - La propiedad
xmnls. Esta propiedad define el espacio de nombres XML del SVG y le ayuda a algunos agentes de usuario a comprender el marcado.
A los elementos anidados dentro del SVG que definen las formas que componen la imagen, como paths, circles y rects, les apliqué clases en línea con su etiqueta de apertura. Todas las propiedades en línea del elemento, como sus coordenadas, las dividí en nuevas líneas. Además, sangré todos los elementos internos debajo de la etiqueta base SVG.
Todo este trabajo es por una razón. En primer lugar, hace que el código sea mucho más fácil de leer. En segundo lugar, en mi editor de código de elección, Sublime Text 3, puedo plegar fácilmente elementos SVG individuales o SVG completos, mientras que los nombres de las clases aún ayudan a retener el contexto sobre cuáles son esos elementos.
Luces de Navidad
¡Muy bien, entremos en el espíritu navideño y animemos una luz navideña parpadeante! Esto es lo que buscaremos lograr:
Ve la luz de Pen de Noah Blon (@noahblon) en CodePen
Lo que quiero hacer es animar el elemento de ruta que le di a una clase bulb en el SVG.
1 |
<path class="bulb" |
2 |
d="M31.998,47.768c-1.402-0.959-4.637-6.229-4.637-13.497c0-5.775,1.272-8.566,2.207-9.856h4.858c0.945,1.293,2.213,4.081,2.213,9.856C36.639,41.542,33.402,46.809,31.998,47.768" |
3 |
/>
|
Con CSS, le daré a la bombilla un color de relleno y definiré sus propiedades de animación.
1 |
.svg-light .bulb { |
2 |
fill: hsl(204, 70%, 23%); |
3 |
animation-name: glow-blue; |
4 |
animation-duration: 1s; |
5 |
animation-iteration-count: infinite; |
6 |
animation-timing-function: ease-in-out; |
7 |
animation-direction: alternate; |
8 |
}
|
La propiedad fill nos permite establecer el color de un elemento SVG. Cuando es posible, me gusta usar HSL (tono, saturación, luminosidad) para definir valores de color porque es muy intuitivo trabajar con él. Aquí, elegí un color azul (tono 204) y mantuve el valor de luminosidad bajo, 23%, lo que significa que tendremos un color azul oscuro.
Configuré la bombilla para que sea animada por una animación de fotogramas clave llamada glow-blue. La duración de la animación es de 1 segundo. La animación se repite infinitamente, lo que significa que se ejecutará para siempre. El tiempo de la animación se reduce al principio y al final de los fotogramas clave, creando una transición de aspecto más suave en los puntos inicial y final de la animación. Finalmente, la animación está configurada para alternar, lo que significa que irá y vendrá desde el principio hasta el final y viceversa.
Sugerencia: es posible que sepas que existe una sintaxis abreviada para las reglas de animación CSS, pero generalmente prefiero dividir las reglas para que sean más fáciles de entender, modificar y compartir si se encadenan varias animaciones.
Ahora, definiré la animación de fotogramas clave en glow-blue:
1 |
@keyframes glow-blue { |
2 |
0% { fill: hsl(204, 80%, 23%); } |
3 |
100% { fill: hsl(204, 80%, 63%); } |
4 |
}
|
Aquí configuré el color de relleno inicial y final del elemento al que se le aplica esta animación. El único valor que está cambiando es la claridad del color (el bit "l" en hsl), lo que significa que la luz se animará de una versión más oscura a una más clara del mismo tono. Esa es la sintaxis intuitiva que proporciona HSL.
Debido a que definí la animación para alternar infinitamente, la luz se alternará de oscuro a claro y nunca se detendrá. Por lo tanto, parecerá parpadear.
Animación de varias luces
Bien, ahora canalicemos nuestro Clark W. Griswold interior y animemos un montón de luces navideñas. Esto es lo que crearé:
Ve el Pen 540257e4a8b727e435c8e4033602ebb0 de Noah Blon (@noahblon) en CodePen
Creé cinco luces de diferentes colores. Cada luz está envuelta en un div con un ancho del 20%. Estos divs luego flotan a la izquierda para que aparezcan alineados entre sí. Como no configuré el SVG para que tenga un alto o ancho establecido y conservé la propiedad viewbox, el SVG es fluido al tamaño de su padre sin perder su relación de aspecto o calidad. Solo una de las grandes fortalezas de SVG.
1 |
<svg class="svg-light svg-light--red"> |
Para cada SVG, amplié la clase base svg-light con un sufijo de color (por ejemplo, svg-light--red). Este es un extracto de las reglas que usé para animar las numerosas luces:
1 |
.svg-light .bulb { |
2 |
animation-duration: 1s; |
3 |
animation-iteration-count: infinite; |
4 |
animation-timing-function: ease-in-out; |
5 |
animation-direction: alternate; |
6 |
}
|
7 |
|
8 |
.svg-light--red .bulb { |
9 |
fill: hsl(6, 63%, 16%); |
10 |
animation-name: glow-red; |
11 |
animation-delay: .5s; |
12 |
animation-duration: 1.25s; |
13 |
}
|
14 |
|
15 |
@keyframes glow-red { |
16 |
0% { fill: hsl(6, 63%, 16%); } |
17 |
100% { fill: hsl(6, 63%, 56%); } |
18 |
}
|
Las propiedades de animación básicas aún se aplican a la clase base de svg-light para que puedan compartirse entre todas las luces. Para cada variación de color, creé una animación de fotograma clave diferente, como glow-red o glow-blue, y les di diferentes demoras y duraciones de animación. De esta manera, las luces parpadearán con su color apropiado, y no parpadearán todas al mismo tiempo.
Rudolph el reno de nariz roja
Usaré los mismos conceptos que describí anteriormente para animar al reno más famoso de todos, Rudolph. Este es el resultado final:
Mira el icono Pen SVG Rudolph animado con CSS por Noah Blon (@noahblon) en CodePen
Primero, animaré su brillante nariz roja:
1 |
.svg-rudolph .nose { |
2 |
animation-name: glow; |
3 |
animation-duration: 6s; |
4 |
animation-iteration-count: infinite; |
5 |
animation-timing-function: ease-in-out; |
6 |
animation-direction: alternate; |
7 |
}
|
8 |
|
9 |
@keyframes glow { |
10 |
0% { fill: hsl(6, 93%, 16%); } |
11 |
50% { fill: hsl(6, 93%, 56%); } |
12 |
100% { fill: hsl(6, 93%, 56%); } |
13 |
}
|
Esto se parece bastante a nuestra luz navideña. En la animación de fotogramas clave, estoy animando al 50% y luego al 100%. Como la duración de la animación es de seis segundos, esto significa que en tres segundos, la nariz se volverá de un rojo más claro y permanecerá en ese color durante otros tres segundos hasta el final de la animación. Además, debido a que configuré la animación para que se alterne, ahora se ejecutará desde el final hasta el principio. Por lo tanto, la nariz permanecerá completamente roja durante otros tres segundos antes de oscurecerse finalmente en los últimos tres segundos. Comprender la interacción entre los porcentajes de fotogramas clave y las definiciones de animación, como la duración, es clave para crear animaciones CSS efectivas.
También apliqué una transición al resaltado en la nariz de Rudy:
1 |
.svg-rudolph .nose-highlight { |
2 |
fill-opacity: 0; |
3 |
animation-name: highlight-fade; |
4 |
animation-duration: 6s; |
5 |
animation-iteration-count: infinite; |
6 |
animation-timing-function: ease-in-out; |
7 |
animation-direction: alternate; |
8 |
}
|
9 |
|
10 |
@keyframes highlight-fade { |
11 |
0% { fill-opacity: 0; } |
12 |
25% { fill-opacity: 0; } |
13 |
100% { fill-opacity: 1; } |
14 |
}
|
Aquí estoy animando una propiedad SVG diferente, el fill-opacity. Esta propiedad toma un valor entre 0 y 1; 0 es completamente transparente, 1 es completamente opaco. Finalmente, le daré un poco más de vida a Rudy haciendo que sus ojos parpadeen:
1 |
.svg-rudolph .eye { |
2 |
animation-name: blink; |
3 |
animation-duration: 8s; |
4 |
animation-iteration-count: infinite; |
5 |
transform-origin: 50%; |
6 |
}
|
7 |
|
8 |
@keyframes blink { |
9 |
0% { transform: scaleX(1) scaleY(1); } |
10 |
1% { transform: scaleX(1.3) scaleY(0.1); } |
11 |
2% { transform: scaleX(1) scaleY(1); } |
12 |
60% { transform: scaleX(1) scaleY(1); } |
13 |
61% { transform: scaleX(1.3) scaleY(0.1);} |
14 |
62% { transform: scaleX(1) scaleY(1); } |
15 |
100% { transform: scaleX(1) scaleY(1); } |
16 |
}
|
Creé una animación llamada blink. Esta animación se ejecuta durante ocho segundos y nunca se detiene. No estoy alternando la animación esta vez, en su lugar, la animación se ejecutará hasta el final y luego se reiniciará desde el principio.
En los fotogramas clave, la animación parpadeante se crea manipulando la escala de los ojos en los ejes X e Y. Por ejemplo, en la marca del 1%, los ojos se escalan a 1,3 de su tamaño en el eje X y a 0,1 veces su tamaño normal en el eje Y. En otras palabras, se vuelven un poco más anchos y mucho más cortos. Más tarde, el uno por ciento de la duración de la animación, la escala de los ojos vuelve a la normalidad. Por lo tanto, el cambio de escala ocurre extremadamente rápido; 8 segundos / 100 = 8 centésimas de segundo.
Un componente clave del uso de transform para animar elementos SVG es configurar los elementos transform-origin. En la mayoría de los casos, para que una transformación se aplique correctamente en un SVG, debemos definir el origen de la coordenada de transformación para que sea el centro del elemento. A diferencia de la de un elemento HTML, por defecto el origen de transformación de un elemento SVG es su esquina superior izquierda, la coordenada (0,0). Al configurar el origen de transformación en (50%, 50%), los orígenes de los ejes X e Y de la transformada estarán en el centro del elemento, y las transformaciones se aplicarán correctamente.
Nota: Firefox tiene problemas cuando se trata de transformar el origen. Desafortunadamente, configurar el origen de la transformación en 50% en realidad restablece las coordenadas X/Y del elemento. Una solución es transformar el elemento de nuevo a su posición original.
Ding Dong alegremente en lo alto
Para esta demostración, animaré una campana que suena así:
Ver el Pen 63cdc3e8e785028deb35132d889b6090 por Noah Blon (@noahblon) en CodePen
Revisemos un extracto del marcado SVG:
1 |
<svg class="svg-bell" viewBox="0 0 88 72" xmlns="http://www.w3.org/2000/svg"> |
2 |
<g class="group-striker"> |
3 |
<circle class="outline" |
4 |
cx="43.998" |
5 |
cy="54.571" |
6 |
r="7.99" |
7 |
/>
|
8 |
<circle class="fill" |
9 |
cx="43.998" |
10 |
cy="54.567" |
11 |
r="3.99" |
12 |
/>
|
13 |
</g>
|
14 |
<g class="group-bell"> |
15 |
<path class="outline" |
16 |
d="M71.5,38.184h-3.291l-6.213-21.879c-1.367-4.816-5.951-8.693-10.904-9.514C50.91,3.02,47.812,0,43.996,0c-3.812,0-6.91,3.018-7.092,6.787c-4.957,0.822-9.539,4.697-10.908,9.514l-6.211,21.883h-3.289l-4.498,15.85h19.251H36h15.994h3.963h20.041L71.5,38.184z M40.975,6.611C41.229,5.143,42.455,4,43.996,4c1.543,0,2.77,1.143,3.025,2.615L40.975,6.611z" |
17 |
/>
|
18 |
<path class="fill" |
19 |
d="M29.844,17.395c1.045-3.678,5.156-6.783,8.975-6.783l10.355,0.004c3.82,0,7.93,3.105,8.975,6.783l5.902,20.785H23.943L29.844,17.395z" |
20 |
/>
|
21 |
<polygon class="fill" |
22 |
points="19.52,42.184 68.477,42.184 70.705,50.033 17.291,50.033" |
23 |
/>
|
24 |
</g>
|
25 |
</svg>
|
Ajusté el contorno de la campana y lo llené con una etiqueta <g> (o grupo). Esta etiqueta es muy útil para organizar elementos, similar a cómo podrías ajustar varios elementos HTML con un <div>. Las animaciones se pueden aplicar a un grupo. Dado que en este caso, quiero que tanto los rellenos como el contorno de la campana giren, puedo simplemente rotar el grupo en lugar de cada elemento individualmente.
1 |
.svg-bell .group-bell { |
2 |
animation-name: bell-ring; |
3 |
animation-duration: 3s; |
4 |
animation-iteration-count: infinite; |
5 |
animation-timing-function: ease-in-out; |
6 |
animation-delay: -1.5s; |
7 |
animation-direction: alternate; |
8 |
transform-origin: 50%; |
9 |
}
|
10 |
|
11 |
@keyframes bell-ring { |
12 |
0% { transform: rotate(27deg); } |
13 |
100% { transform: rotate(-27deg); } |
14 |
}
|
Este CSS ya debería ser familiar, pero están sucediendo un par de cosas nuevas. Primero, en la animación de fotogramas clave, la campana se está transformando, pero en lugar de transformar la escala, estoy transformando el valor de rotación del elemento. Esta animación hace que la campana oscile entre 27 y -27 grados.
La otra cosa nueva que hice es usar un valor negativo para el animation-delay. Un valor negativo hace que la animación comience esa cantidad de tiempo en la animación. En este caso, en lugar de que la animación comience después de un retraso de 1.5 segundos, la animación realmente comenzará 1.5 segundos después de la animación. Al hacer esto, la campana comenzará en la posición neutral, que se encuentra en 1,5 segundos después de la animación, en lugar de en la posición girada, que está en 0 segundos en la animación.
1 |
.svg-bell .striker { |
2 |
animation-name: striker-move; |
3 |
animation-duration: 3s; |
4 |
animation-iteration-count: infinite; |
5 |
animation-timing-function: linear; |
6 |
animation-delay: 1.5s; |
7 |
animation-direction: alternate; |
8 |
transform-origin: 50%; |
9 |
}
|
10 |
|
11 |
@keyframes striker-move { |
12 |
0% { transform: translateX(3px); } |
13 |
100% { transform: translateX(-3px); } |
14 |
}
|
Apliqué una animación similar al grupo que contiene los elementos del percutor de la campana. Esta vez, sin embargo, estoy trasladando o moviendo los elementos a lo largo del eje X en lugar de girarlos, por lo que el percutor oscilará hacia la izquierda y hacia la derecha.
¡Deja que nieve! ¡Deja que nieve! ¡Deja que nieve!
Para esta animación, animaré la nieve que cae dentro de una bola de nieve.
Mira el Pen 2addb5f98c757d61cec87bdcacb5870d por Noah Blon (@noahblon) en CodePen
Creé un montón de elementos circulares para representar la nieve, y coloqué estos elementos alrededor del perímetro de la bola de nieve, envolviéndolos en una etiqueta <g> .
La nieve no es visible fuera de la bola de nieve porque apliqué un trazado de recorte al grupo que contiene la nieve. Un trazado de recorte es una forma que se puede aplicar a elementos SVG, enmascarando otros dentro de él. En nuestro ejemplo de globo terráqueo, creé un trazado de recorte circular que cubre el interior del globo.
1 |
<defs>
|
2 |
<clipPath id="globeClipPath"> |
3 |
<circle cx="32" cy="31" r="26.825"/> |
4 |
</clipPath>
|
5 |
</defs>
|
La etiqueta <clipPath> es nuestro elemento de enmascaramiento, para realizarla debemos darle un ID.
Envolví el trazado de recorte en una etiqueta defs. SVG nos permite crear elementos que luego podemos reutilizar, como trazados de recorte, filtros o formas que podemos eliminar. Se recomienda ajustar definiciones como recortar trazados en una etiqueta defs para que el SVG se pueda leer más fácilmente.
Para aplicar el trazado de recorte, hacemos referencia a su url, en este caso su ID precedido de un símbolo hash, en la propiedad de trazado de recorte en línea de un elemento SVG:
1 |
<g class="group-snow" clip-path="url(#globeClipPath)"> |
2 |
<circle class="snow" |
3 |
cx="49.498" |
4 |
cy="8.482" |
5 |
r="2.5" |
6 |
/>
|
7 |
<circle class="snow" |
8 |
cx="35.748" |
9 |
y="2.783" |
10 |
r="2.5" |
11 |
/>
|
12 |
<circle class="snow" |
13 |
cx="21.001" |
14 |
cy="4.728" |
15 |
r="2.5" |
16 |
/>
|
17 |
<circle class="snow" |
18 |
cx="28.25" |
19 |
cy="2.783" |
20 |
r="2.5" |
21 |
/>
|
22 |
<circle class="snow" |
23 |
cx="42.997" |
24 |
cy="4.728" |
25 |
r="2.5" |
26 |
/>
|
27 |
<circle class="snow" |
28 |
cx="14.502" |
29 |
cy="8.482" |
30 |
r="2.5" |
31 |
/>
|
32 |
<circle class="snow" |
33 |
cx="9.194" |
34 |
cy="13.793" |
35 |
r="2.5" |
36 |
/>
|
37 |
<circle class="snow" |
38 |
cx="54.806" |
39 |
cy="13.793" |
40 |
r="2.5" |
41 |
/>
|
42 |
</g>
|
La nieve ahora solo es visible dentro de esa trayectoria de recorte circular.
La nieve está animada con las mismas técnicas que describí anteriormente; traducido a lo largo del eje Y y la opacidad de relleno acercándose a cero a medida que termina la animación.
1 |
.svg-snowglobe .snow { |
2 |
animation-name: snowfall; |
3 |
animation-duration: 10s; |
4 |
animation-iteration-count: infinite; |
5 |
animation-timing-function: ease-in; |
6 |
}
|
7 |
|
8 |
.svg-snowglobe .snow:nth-child(1) { animation-delay: 2s; } |
9 |
.svg-snowglobe .snow:nth-child(2) { animation-delay: 4s; } |
10 |
.svg-snowglobe .snow:nth-child(3) { animation-delay: 6s; } |
11 |
.svg-snowglobe .snow:nth-child(4) { animation-delay: 8s; } |
12 |
.svg-snowglobe .snow:nth-child(5) { animation-delay: 10s; } |
13 |
.svg-snowglobe .snow:nth-child(6) { animation-delay: 12s; } |
14 |
.svg-snowglobe .snow:nth-child(7) { animation-delay: 14s; } |
15 |
.svg-snowglobe .snow:nth-child(8) { animation-delay: 16s; } |
16 |
.svg-snowglobe .snow:nth-child(9) { animation-delay: 18s; } |
17 |
.svg-snowglobe .snow:nth-child(10) { animation-delay: 20s; } |
Sí, los selectores CSS3 funcionan con elementos SVG. Aquí, le di a cada elemento de nieve un retraso diferente para que no caigan todos a la vez.
Saludos de temporada
Finalmente, animaré un texto basado en SVG para lograr un resultado como este:
Ve el Mensaje Pen de Noah Blon (@noahblon) en CodePen
SVG nos brinda la capacidad de aplicar trazos a elementos SVG con CSS. Para mi última animación, te mostraré cómo dibujar progresivamente el trazo de un elemento.
Para lograr esta animación, utilicé las siguientes propiedades de trazo:
-
stroke-width: el ancho del trazo. Esto es relativo al tamaño del SVG y, por lo tanto, adaptable. -
stroke: el color del trazo. -
stroke-dasharray: define un trazo discontinuo. Una matriz de valores alternos define la longitud de las partes dibujadas de la línea discontinua y el espacio vacío entre guiones. -
stroke-dashoffset: define dónde comienza el trazo en relación con la longitud del trazado.
La configuración del texto con trazos requiere algo de trabajo en un editor de gráficos. Mi flujo de trabajo es el siguiente:
- Crear un elemento de texto.
- Convertir ese texto en trazados vectoriales.
- Combinar esas rutas en una ruta compuesta.
Este es mi CSS para configurar la animación:
1 |
.svg-message .text { |
2 |
stroke-width: 1px; |
3 |
stroke: hsl(6, 63%, 36%); |
4 |
stroke-dasharray: 1865.753px 1865.753px; |
5 |
stroke-dashoffset: 1865.753px ; |
6 |
fill-opacity: 0; |
7 |
fill: hsl(6, 63%, 36%); |
8 |
animation-name: stroke, fill; |
9 |
animation-duration: 1s; |
10 |
animation-delay: 0, 1s; |
11 |
animation-iteration-count: 1; |
12 |
animation-timing-function: ease-in-out; |
13 |
animation-fill-mode: forwards; |
14 |
}
|
15 |
|
16 |
@keyframes fadeIn { |
17 |
0% { fill-opacity: 0; } |
18 |
100% { fill-opacity: 1; } |
19 |
}
|
20 |
|
21 |
@keyframes drawStroke { |
22 |
100% { stroke-dashoffset: 0 } |
23 |
}
|
Definí la propiedad stroke-dasharray como la longitud del trazado total (puedes encontrar este valor en Illustrator en la Paleta de Información del Documento mediante la opción Objeto). Luego, le di al stroke-dashoffset un valor de la longitud total de la ruta, lo que empuja todo el trazo fuera de la visibilidad. Luego, al animar el fotograma clave de la propiedad stroke-dashoffset, el trazo se dibujará progresivamente en la pantalla.
Si quieres aprender más sobre esta técnica, revisa la publicación de Jake Archibald Dibujo de líneas animadas en SVG.
También configuré el texto para que se desvanezca después de que se haya completado el dibujo de línea, utilizando la propiedad de opacidad de relleno similar a lo que hice anteriormente con la animación de la bola de nieve.
Yendo más lejos con SVG y CSS
En este tutorial, demostré que con CSS y SVG, puedes crear algunas animaciones bastante efectivas. Si quieres quedarte atrapado con todo el código, así como con algunas animaciones adicionales, puedes descargar los ejemplos de Github o revisar mi colección en Codepen.
Si quieres ser más avanzado, puedes explorar el control de animaciones CSS con JavaScript o complementar tus animaciones CSS con animaciones JavaScript más complejas, como la que admite la increíble biblioteca SVG JS Snap SVG.
Gracias por seguir este tutorial, ¡no puedo esperar a ver las creaciones que se te ocurran!
By
