Cómo crear hermosas animaciones SVG fácilmente

¡Versión final de lo que estaremos creando!

Animar en la web nunca ha sido más simple. SVG (Gráficos vectoriales escalables) utiliza marcado XML para ayudar a procesar cosas en el navegador. Aquí hay un ejemplo. Si tuviera que descargar un png o un jpeg, obtendría solo la imagen que luego tendría que renderizar en el navegador utilizando una etiqueta . No hay nada de malo en esto, pero si quisiera animarlo, soy muy limitado. ¿Cómo SVG cambia esto?


 

Aquí hay una muestra de SVG. Utiliza XML que es muy similar a HTML. Para animar, esto hace que las cosas sean súper simples.

Para animar primero necesitamos 2 bibliotecas, TweenMax y TimelineMax de GSAP. Aquí hay más información en caso de que no haya oído hablar de ellos. Para los perezosos, aquí está el CDN.

En aras de un tutorial, no vamos a crear nuestros propios SVG. Simplemente tomaremos uno en línea. Uno de mis sitios favoritos para iconos e imágenes hermosas es Flaticon. Tienen muchas opciones diferentes, pero como somos codificadores, elegí un monitor. Realmente original, lo sé.

Flaticon nos conecta con un SVG porque saben que queremos animar

Una vez que haya descargado el archivo, ábralo y copie el código en un sitio web como CodePen o JSfiddle ... o si no confía en estos sitios web que trabajan duro, simplemente puede usar su propio editor de código. ¡¡Vamonos!!

Lanzar un poco de maquillaje

Este paso es opcional pero personalmente odio (lo siento, palabra fuerte) cómo el SVG no está centrado. El color de fondo tampoco es tan agradable. Vamos a cambiarlo Cambie el cuerpo al color que desee y luego agregue estas propiedades CSS a la ID del elemento SVG (en mi caso se llama "Capa_1"). Para centrar, simplemente agrega display: block; y margen: 0 auto ;.

Espera un minuto, esto te resulta familiar ...

Analizando nuestro SVG

En la última sección, probablemente notó que usamos CSS para centrar nuestro SVG. Echemos un vistazo a nuestro archivo SVG muy rápido ...



 
 

Interesante ... Podemos aplicar identificaciones a elementos SVG individuales ... pero, ¿qué representan?

Espera un minuto ... esto se está pareciendo mucho al código HTML ...

Mis cálculos fueron correctos ... todos estos polígonos y caminos son elementos diferentes dentro de la imagen SVG. Esto seguramente hará las cosas mucho más fáciles. Si te has dado cuenta en el gif, he localizado todos los caminos y polígonos y establecí una ID para ellos en consecuencia. Por ejemplo, el primer elemento de ruta era el soporte para el monitor, así que lo llamé stand. En aras del tutorial, te diré lo que estoy nombrando a cada elemento, de esa manera funciona si sigues.

Animando nuestro primer elemento

Comencemos con el elemento para el que establecemos la ID. Asegúrese de tener las 2 bibliotecas GSAP importadas. Primero, iniciemos una instancia de línea de tiempo. Aquí le mostramos cómo hacerlo en su archivo JavaScript:

var tl = nuevo TimelineMax ();

Ahora que tenemos una instancia de línea de tiempo. Vamos a usarlo

tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Power2.easeOut})

Esto hará que haga esto:

La pantalla no se procesó correctamente en mi software de creación de gifs. ¡No te preocupes!

¡Animación innovadora! Analicemos lo que el código ha hecho hasta ahora.

var tl = nuevo TimelineMax ();

Esto inicializa una línea de tiempo en la variable tl.

tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Power2.easeOut})

Usamos la variable tl para agregar animaciones en la línea de tiempo. Tiene algunos parámetros que debemos ingresar.

tl. desde la función from le permite definir dónde comienza la animación y se animará a donde el navegador renderizó el SVG antes de que el JavaScript estuviera presente. Otra opción popular es tl.to pero eso es para otro día. Piense en tl. Desde la definición de un auto de carrera en la línea de salida antes de que se dirija a una línea final ya definida.

tl.from ('# stand' Aquí apuntamos a qué elemento estamos buscando animar. En este caso, es el elemento con el soporte ID.

tl.from ('# stand', 0.5 Esto define la duración de la animación. En este caso, es medio segundo.

tl.from ('# stand', 0.5, {} Todo dentro de estas llaves son los parámetros de animación. Dentro de estos parámetros tenemos ...

{scaleY: 0 escala el elemento para que desaparezca al ser extremadamente delgado.

{scaleY: 0, transformOrigin: “bottom" La sección transformOrigin le dice en qué posición del elemento desea que se transforme. Por ejemplo, si nunca seleccionamos la opción inferior, se estiraría desde la parte superior, lo que arruina la ilusión de la computadora en sí misma.

Y por último, pero no menos importante, facilidad: Power2.easeOut. Es muy divertido de usar. El parámetro de facilidad le permite determinar la facilidad de cómo se presenta. ¿Notó cómo llegó lentamente al final en lugar de hacer una parada completa del 100%? Un poco difícil de explicar, pero GSAP tiene una herramienta de visualización fácil para ayudarlo con esto.

¡Y hasta te da código para copiar!

Avanzando ...

Wow, eso fue mucho para asimilar ... Siendo realistas, ahora tienes todo lo que necesitas saber sobre la animación de SVG. Ahora solo vamos a terminar nuestro proyecto y llamarlo un día juntos. Tengo un par de trucos geniales que creo que vas a cavar. ¡Sigamos adelante amigos!

Use las herramientas de desarrollo de su navegador para ubicar la parte posterior del soporte. Configuré la ID para standBack como en standBack porque estas animaciones te dejarán boquiabierto.

Esta animación también es bastante sencilla, ya que vamos a hacer la misma animación que la última vez. Esta vez usamos la facilidad de rebote. Creo que se ve muy caricaturesco, que es el ambiente que busco. Para demostrar cómo funciona la línea de tiempo. Pegaré el código final de este paso:

var tl = nuevo TimelineMax ();
tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Bounce.easeOut})

Para reproducir una animación justo después de la otra, simplemente use otra función .from debajo de ella. Ni siquiera tiene que hacer una función de devolución de llamada ni nada.

Otra hermosa animación. ¡Mi novia estaría muy orgullosa!

Transformar Origen

Si no entendió la sección transformOrigin, es de esperar que esto lo aclare más. Observe cómo en las últimas 2 animaciones se borraron de abajo hacia arriba. Para esta animación, quiero que la parte inferior del monitor se extienda desde el medio hacia los lados. Aquí es donde transformOrigin entra en juego antes de que hiciéramos el valor inferior, pero esta vez lo haremos en el centro. Como también lo estamos estirando verticalmente en lugar de horizontalmente, también utilizaremos el método scaleX. Esto se explica por sí mismo. Configuré la ID de este elemento para monitorBottom

var tl = nuevo TimelineMax ();
tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Bounce.easeOut})
.from ('# monitorBottom', 0.7, {scaleX: 0, transformOrigin: "center", facilidad: Bounce.easeOut})
¡Guauu! ¿Le pagan más de 100 mil al año por saber esto?

Tomando un respiro

Bien, esas animaciones eran demasiado geniales para que el humano las tomara. Necesitamos un poco de retraso de la próxima animación, de lo contrario podría tener un ataque de pánico. Afortunadamente, GSAP nos tiene cubiertos. Ahora vamos a animar la pantalla que viene.

Démosle a la pantalla una ID de pantalla. Ahora usaremos este código para animarlo.

tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Bounce.easeOut})
  .from ('# monitorBottom', 0.7, {scaleX: 0, transformOrigin: "center", facilidad: Bounce.easeOut})
  .from ('# pantalla', 0.6, {scaleY: 0, transformOrigin: "bottom", facilidad: Circ.easeOut, delay: 0.4})

Todo lo que hay es bastante sencillo. Sin embargo, agregamos otro parámetro ... ¿cuál podría ser? ¡Retrasar! Esta función de retraso activará el tiempo de espera antes de reproducir esta animación. Lo puse a 0.4 segundos. Veamos cómo se ve esto.

¡Se agregó un poco de retraso! Gracias a dios.

No tiene que ser complejo

Vamos a animar el cuadro amarillo ahora. Para esta animación, solo quiero que aparezca. Sin embargo, agregar muchos parámetros diferentes para cada elemento se vuelve tedioso ... aunque solo fuera simple. Establezcamos la ID del cuadro amarillo en yellowBox

var tl = nuevo TimelineMax ();
tl.from ('# stand', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Power2.easeOut})
  .from ('# standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", facilidad: Bounce.easeOut})
  .from ('# monitorBottom', 0.7, {scaleX: 0, transformOrigin: "center", facilidad: Bounce.easeOut})
  .from ('# pantalla', 0.6, {scaleY: 0, transformOrigin: "bottom", facilidad: Circ.easeOut, delay: 0.4})
.from ('# yellowBox', 0.5, {scale: 0})

Espera, eso es todo? ¿Seguramente no debe funcionar?

Easy Peasy Lemon Squeezy.

Supongo que es así de simple.

Calidad en cantidades

Así que hemos estado animando todo por cada elemento individual ... ahora estamos en el último momento con todas las líneas rojas. Esto me llevará para siempre ...

Espera amigo, no seas tan pesimista todavía, hay una manera fácil de animar bellamente estas líneas rojas con solo una línea de código. Déjame decirte el proceso. Primero veamos nuestras herramientas de desarrollo y busquemos el selector para estos caminos rojos.

¡¡¡Mejorar!!!

Interesante, por lo que parece que todas las líneas rojas tienen un elemento padre de . Usando las herramientas de desarrollo, copiaré el selector que es:

# Layer_1> g: nth-child (1)> g

Ahora, para obtener todos los elementos secundarios de este elemento primario, solo necesito agregar la ruta al final del selector. Esto funcionará:

# Layer_1> g: nth-child (1)> g ruta

Excelente. Ahora tenemos una lista de todos los elementos que están debajo de rojo.

Ahora podríamos usar la función tl.from para animarlos, pero los animará a todos al mismo tiempo. ¿No sería genial si todos animaran constantemente en un momento diferente? Probablemente ya esté viendo esta tendencia de mis preguntas retóricas. tl.staggerFrom hará exactamente esto! Veamos juntos esta última parte del código.

.staggerFrom ('# Layer_1> g: nth-child (1)> g path', 0.2, {scaleX: 0}, -0.1)

Como puede ver, es bastante sencillo. Ponemos en el selector que identificamos antes, establecemos la duración, también agregamos las propiedades, pero espera, ¿qué es esto? -0.1? ¿Qué significa esto?

En la función .staggerFrom, necesitamos definir en qué punto queremos que cada ruta se anime después de otra. En este caso, vamos a hacer 0.1 segundos. La razón por la que agregamos - fue para hacerlo ir de izquierda a derecha en lugar de viceversa. Veamos cómo se ve esto cuando se implementa.

Ahora eso es hermoso, pero no tan hermoso como tú.

Wow, eso es perfecto. Lo que hace que GSAP sea tan sorprendente es que puedes hacer animaciones tan sorprendentes con elementos HTML y elementos SVG rápidamente. Una vez que comprenda la sintaxis, algo como esto solo le llevará 10 minutos.

Bifurca mi Pluma y envíame un DM en Twitter para mostrarme lo que hiciste tú mismo .

CodePen

Gorjeo

Si te gustó esta publicación y te pareció útil Dame algunos aplausos! ¡No dudes en seguirme en Twitter y en Medium! Gracias