8 bibliotecas de JavaScript para animar SVG
SVG es un gráfico independiente de la resolución. Eso significa que lo hará Se ve bien en cualquier tipo de pantalla sin sufrir pérdida de calidad.. Más allá de eso, también puedes hacer que SVG cobre vida con algunos efectos de animación..
En uno de los post de nuestra serie SVG anteriormente, le mostramos cómo funciona la animación SVG con el
Más en Hongkiat.com:
- Animate.css - Biblioteca CSS3 para crear animaciones fácilmente
- Animar fácilmente el texto con Textillate.js
- Cómo convertir texto de Photoshop en SVG
- Animar para ocultar y deslizar contenido con jQuery.
1. Vivus
Vivus es una biblioteca de JavaScript que le da a tu SVG la apariencia de ser dibujado. Vivus trabaja fuera de la caja sin necesidad de dependencias (por ejemplo, jQuery). Simplemente incluya el .js archivo en su HTML, y designe el elemento SVG que desea animar, junto con algunas opciones preestablecidas para comenzar la animación de inmediato.
Por ejemplo:
nuevo Vivus ('svg-element', type: 'oneByOne', duración: 200); Lo anterior animará mi elemento SVG que tiene el elemento-svg Identificación en 200 milisegundos. Cada elemento de este SVG se dibujará uno tras otro dentro de ese marco de tiempo.
2. Bonsai
Bonsai es una potente biblioteca de JavaScript que le permite dibujar, transformar y animar elementos gráficos en páginas web. Soporta tanto el tipo de gráfico HTML5 Canvas como SVG. Con Bonsai, puedes construir un simple rectángulo o un círculo o, si quieres, un multijugador en toda regla Juego animado como este. Puedes usar Orbit para sentir cómo funciona Bonsai en acción en vivo o ver algunos de estos impresionantes ejemplos para inspirarte..
3. velocidad
Velocity es una biblioteca de JavaScript creada para animaciones rápidas. La velocidad de Velocity al renderizar la animación es increíblemente rápida. Supera a jQuery, e incluso a CSS, en comparación. La API de Velocity funciona de manera similar a la animación en jQuery, excepto que usa el alias de palabras clave $ .velocity () en lugar de $ .animate (). Aparte de eso, puede utilizar exactamente las mismas palabras clave de animación, como fundirse y desvanecimiento.
4. Rafael
RaphaelJS es una biblioteca que te permite dibujar y animar gráficos vectoriales SVG en páginas web. Es compatible con una amplia gama de navegadores hasta IE6, lo que hace que Raphael sea la biblioteca de JavaScript más confiable del nicho. Con RaphaelJS, puedes crear gráficos analíticos interactivos, mapas del mundo e interacciones de juego similares a los de Counter Strike.
5. Snap
SnapSVG es otra biblioteca de JavaScript popular para la animación SVG desarrollada por el desarrollador de Raphael, Dmitry Baranovskiy, junto con el equipo de la plataforma web de Adobe desde cero. Sin embargo, a diferencia de Raphael, SnapSVG está diseñado solo para los navegadores más recientes. Eso permite que la biblioteca sea significativamente más pequeña que Raphael y que admita funciones SVG como recorte y enmascaramiento.
6. Lazy Line Painter
Lazy Line Painter es un complemento de jQuery para animar rutas SVG para animar la secuencia de dibujo, similar a Vivus. La mala noticia es que este complemento solo hace algo muy específico. Por lo tanto, cuando importe SVG desde aplicaciones como Illustrator o Inkscape, asegúrese de que no haya color de relleno en su SVG, solo las rutas.
7. SVG.js
SVG.js es una biblioteca liviana para manipular y animar SVG. Con esta biblioteca, podrás animar el tamaño, la posición o el color dentro de tu elemento SVG. Aunque no solo anima; También puede aplicar complementos adicionales para agregar funcionalidades adicionales. Este ejemplo utiliza el complemento svg.filter.js para aplicar filtros como desenfoque gaussiano, desaturación, contraste, sepia, etc. a la imagen..
8. Paseo
La pasarela soporta tres tipos de elementos., camino, línea, y polilínea Se utiliza para dibujar líneas SVG. Aquí hay un ejemplo de Polygon que muestra la animación de la línea de consola de PlayStation 4.
