28: Cómo funciona el dibujo lineal SVG - Trucos CSS

Anonim

Una pequeña técnica de animación SVG popular es el dibujo de rutas. Si no puede imaginarlo, aquí hay una colección de un trillón de ejemplos que he creado. Básicamente, el trazo alrededor de las formas SVG se dibuja a sí mismo con el tiempo.

Lo escuché por primera vez en el artículo de Jake Archibald Dibujo lineal animado en SVG, que es una buena explicación, ya que puede haberlo. Pero, por supuesto, también intenté mi propia explicación y lo repasamos en este video.

Creo que es más fácil pensar en comenzar con CSS y cómo funcionan las propiedades del guión aplicadas a una forma SVG. Cómo pueden alargarse, e incluso lo suficiente hasta el punto de cubrir (o no cubrir) toda la forma. Luego, compensarlos cuando son tan largos es cómo funciona el dibujo.

Luego, una vez que lo comprenda, comprenda que JavaScript puede ayudar a calcular la longitud de los guiones y compensaciones necesarios y hacerlo correctamente.