27: Animación de SVG con JavaScript | Programar Plus

← Vídeo anterior Vídeo siguiente →

JavaScript es la última de las formas que cubriremos sobre la animación de SVG. Analizamos CSS, que es genial y bastante cómodo, pero no puede hacer una serie de propiedades SVG que quizás quieras animar. Luego miramos SMIL, que es una sintaxis declarativa directamente en el código SVG, que es más poderoso porque puede animar más cosas, incluida la forma de los elementos mismos.

JavaScript puede hacer todo lo que cualquiera de los dos puede hacer y hacerlo bien. Simplemente tiene el costo de escribir un código realmente complicado usted mismo o la sobrecarga de una biblioteca para ayudarlo. Pero una vez que esté en funcionamiento, la sintaxis puede ser realmente maravillosa y amigable para las animaciones y el rendimiento puede ser de primera categoría.

Otra ventaja de utilizar JavaScript para animaciones SVG es el soporte. Hay muchas peculiaridades de las que preocuparse al animar SVG. Algunos navegadores no admiten transformaciones en elementos. Algunos navegadores hacen cosas raras con el zoom de página. Algunos son inconsistentes con transform-origin. Las bibliotecas de JavaScript a menudo ayudan con estos problemas.

Si bien hablamos de animación específicamente, muchas bibliotecas SVG de JavaScript tratan sobre trabajar con SVG en general. Pueden crearlo y manipularlo, acceder a las propiedades del elemento, cambiarlas, etc. Es como agregar una API más robusta a SVG.

Snag.svg – “jQuery para SVG”

Ejemplo básico de uso de Snap.svg:

Otra cosa que hicimos en este video con Snap.svg fue convertir este lápiz de animación CSS en Snap.svg, enseñándonos que podemos usar Snap.svg para trabajar con SVG en línea que ya está en la página. Adobe ha recopilado varios ejemplos.

Raphael: biblioteca más antigua del mismo creador que Snap.svg

SVG.js: “Una biblioteca ligera para manipular y animar SVG”. Aquí está la demostración del reloj que vimos (sin conexión), que muestra cómo funcionan estas animaciones manipulando rápidamente el DOM.

D3.js: “D3.js es una biblioteca de JavaScript para manipular documentos basados ​​en datos. D3 le ayuda a dar vida a los datos mediante HTML, SVG y CSS “. Aquí hay un tutorial sobre cómo comenzar a crear SVG con él y otro que presenta la animación con él.

GreenSock: “Animación de nivel profesional y de rendimiento ultra alto para la web moderna”. GreenSock trata sobre animaciones en la web en general, pero es compatible con SVG. Aquí tienes un bolígrafo donde puedes ver cómo funciona.

Velocity.js: “Animación JavaScript acelerada”. También una biblioteca sobre animación en la web en general, que es compatible con SVG. Julian Shapiro lo creó y ha escrito sobre por qué la animación JavaScript puede ser en realidad el estilo de animación con mayor rendimiento, así como también sobre cómo funciona Velocity.js. Aquí hay una demostración muy simple que anima algunas propiedades específicas de SVG.

También puede hacerlo por su cuenta con animaciones de JavaScript sin la ayuda de un marco. Recuerde que el SVG en línea está en el DOM, por lo que todas las cosas normales de la API DOM están disponibles para usted. Algo así como tú, cómo realmente no necesitas jQuery para trabajar con DOM, solo que a menudo lo hace más fácil. Aquí hay un ejemplo que hace las cosas a su manera que es bastante interesante.

(Visited 3 times, 1 visits today)