Cómo crear una animación SVG usando CSS
La animación de SVG se puede hacer a través de elementos nativos como
La animación CSS también podría ser una forma alternativa de usar la biblioteca de JavaScript como SnapSVG. En esta publicación veremos qué podemos ofrecer con la animación CSS en SVG.
1. Creando las formas
En primer lugar, tendremos que dibujar las formas y los objetos que queremos animar. Puedes usar aplicaciones como Bosquejo, Ilustrador Adobe, o Inkscape para crear uno.
Para este ejemplo, dibujé un cielo nublado como telón de fondo, y un cohete disparando hacia arriba, las llamas incluyeron:
Una vez hecho esto con el dibujo, necesitamos exportar cada objeto que hemos creado a SVG.
Voy a usar Sketch como ejemplo para este paso. Seleccione el objeto que desea convertir en formato SVG. En la parte inferior derecha de su ventana, haga clic en Hacer exportable. Elija el formato SVG, luego haga clic en Exportar nombre de objeto. Necesitas hacer esto un objeto a la vez..
2. Inserte el SVG en HTML
Cuando abres el archivo SVG en un editor de códigos, encontrarás que los códigos SVG son bastante complicados. Por lo tanto, antes de implementar el archivo SVG, ordenemos el código y lo optimicemos con esta herramienta de línea de comandos llamada SVGO.
Lanzamiento Terminal o Símbolo del sistema, e instale SVGO con esta línea de comando:
[sudo] npm install -g svgo
Sintonice el comando, svgo, en el archivo SVG usando --bonita para producir un código SVG legible:
svgo rocket.svg - bonita
Si tiene varios SVG en un directorio, puede optimizarlos todos a la vez. Asumiendo que el directorio es nombrado / imágenes, luego desde el directorio padre use este comando:
svgo -f imágenes - bonita
Veamos la diferencia antes y después de usar SVGO..
Copie el código dentro del archivo SVG y péguelo en un archivo HTML. Trabajaremos en un espacio de trabajo de 800px por 600px de ancho, así que no olvidemos definir el anchura en el elemento SVG.
El SVG se establece en el archivo HTML. Tendremos que definir una ID para cada objeto, para poder seleccionarlos en CSS más adelante.
Para este tutorial, necesitamos definir la ID para el cohete y las llamas, y algunas de las nubes. Para que los objetos manejen la etapa de animación más adelante, necesitamos agregar carné de identidad - también puedes usar clase - a cada objeto. En esta etapa, el código se verá así:
3. Animar utilizando CSS
Ahora vamos a divertirnos un poco. El plan es impulsar el cohete hacia el espacio. El cohete se divide en dos grupos; El cohete en sí y la llama..
En primer lugar, colocamos el cohete en el centro del espacio de trabajo de la siguiente manera:
#rocket transform: translate (260px, 200px);
Lo que ves es esto:
Ahora, para hacer que el cohete parezca que va hacia arriba, necesitamos crear la ilusión de nubes cayendo. El CSS que usamos para esto es:
# cloud1 animación: caída 1s lineal infinito; @keyframes fall from transform: translateY (-100px); a transform: translateY (1000px)
Para que se vea aún más realista, animemos cuatro nubes y hagamoslas “otoño” a diferentes velocidades También los posicionaremos de forma diferente al eje X.
La segunda nube tendrá un código como este:
# cloud2 animación: caída-2 2s lineal infinito; @keyframes fall-2 from transform: translate (200px, -100px); a transformar: traducir (200px, 1000px)
Tenga en cuenta que hemos movido la nube # 2 un poco hacia la derecha, por 200px con traducir. En esta etapa, el resultado debería verse así..
A continuación, hagamos que el cohete cobre vida. Asignaremos un fotograma clave de animación, de la siguiente manera:
#rocket animación: emergente 1s facilidad infinita; @keyframes popup 0% transform: translate (260px, 200px); 50% transformar: traducir (260px, 240px); 100% transformar: traducir (260 px, 200 px);
Y agrega animación a la llama del cohete también:
#flame animación: agitar .2s infinito lineal; @keyframes shake 0% transform: translate (55px, 135px) rotate (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
¡Derecha! Ahora que nuestros códigos están listos, la animación debería estar funcionando en nuestro SVG.
Echa un vistazo a nuestro lanzamiento de cohetes al espacio..
Pensamiento final
La animación no es la característica más fácil de comprender en CSS. Pero esperamos que encuentre este tutorial como un buen punto de partida para explorar la Animación CSS en SVG; Te sorprendería saber qué se puede lograr con la animación CSS a mano..
Si desea comenzar con lo más básico, puede comenzar aquí con esta publicación: Una mirada a: animación de gráficos vectoriales escalables (SVG) o seguir el resto de la serie SVG..
- Ver demostración
- Descargar fuente
