Snap.svg de Adobe: animaciones con HTML 5, sin Flash
Flash ha sido durante mucho tiempo el estándar para animaciones web basadas en vectores. Algunos dicen que durante demasiado tiempo. El auge de los clientes móviles condujo a una aceleración de los estándares web como HTML5. Gracias a los formatos SVG, ampliamente compatibles con los navegadores modernos, podemos incrustar gráficos basados en vectores en nuestros proyectos web sin necesidad de un complemento. La biblioteca de JavaScript de Adobe Snap.svg incluso permite la creación de animaciones basadas en vectores con SVG.
Trabaje con SVG existentes o cree otros nuevos
Después de haber llamado a la biblioteca de JavaScript desde el encabezado HTML de su documento, se pueden procesar los gráficos SVG existentes y se pueden crear otros nuevos.
var graphic1 = Snap("#graphic");
var graphic2 = Snap(300, 400);
La primera línea de nuestro pequeño ejemplo se ocupa del elemento SVG con el ID graphic
. Usando la variable graphic1
tenemos acceso a todos los elementos dentro del elemento SVG. La segunda línea crea un nuevo gráfico SVG con un ancho de 300 px y una altura de 400 px.
Ahora tenemos la posibilidad de manipular formas existentes dentro del elemento o agregar nuevas formas. Para conseguirlo, la biblioteca ofrece diversas funciones, con las que podemos dibujar círculos, cuadrados y otras formas.
var round = graphic1.circle(100, 100, 50);
round.attr({
fill: "#00ffff",
stroke: "#000000",
strokeWidth: 3
});
Usando circle()
dibujamos un – ¿y ahora qué? – círculo… Los primeros dos valores definen las coordenadas x e y del centro del círculo, el tercer valor describe el radio. attr()
le permite controlar los colores de relleno y marco, así como el tamaño del borde del marco. Puede trabajar con todos los atributos que admite el elemento de formulario original.
Los archivos SVG existentes también se pueden cargar y procesar. Ese es el método Snap.load()
es para. Carga un SVG externo, que luego se adjunta a una función.
Snap.load("triangle.svg", function (file) {
var triangle = file.select("polygon");
graphik1.append(triangle);
});
En este ejemplo cargamos el archivo triangle.svg
y entregarlo a una función, con la variable file
como ayudante El método select()
ahora te permite acceder a todos los elementos del SVG. select()
en sí mismo siempre selecciona el primer elemento, mientras que selectAll()
selecciona todos los elementos disponibles del mismo tipo y los escribe en una matriz.
Usando append()
une la selección de formas al gráfico. Los gráficos externos pueden ser accedidos y manipulados de la misma manera y en la misma medida que los gráficos internos, aquellos creados directamente con Snap.svg
pueden. De este modo, attr()
le permite alterar la forma del triángulo.
Animar el SVG
Además de manipular estáticamente las formas de su SVG, Snap.svg es incluso capaz de animar sus gráficos. animate()
le permite modificar las propiedades de una forma SVG a lo largo de una ruta de movimiento. El método espera al menos dos parámetros. El primer parámetro define la propiedad a modificar, mientras que el segundo define el tiempo de la animación en milisegundos.
Si desea más, puede agregar un método de aceleración o una función para que se ejecute una vez que finalice la animación.
round.animate({
r: 100,
cx: 100,
}, 1000, mina.easein);
En nuestro ejemplo, alteramos el radio y cambiamos la coordenada x del centro del círculo. Nuestra animación se ejecutará un segundo. Usando mina.easein
asegura que la animación se ralentizará antes de detenerse. Las funciones de aceleración se parecen a las que ya conoce de CSS3.
Interacciones como arrastrar y mover el mouse
Snap.svg ofrece varias posibilidades para agregar interacción a su SVG. Hacer que una forma se pueda arrastrar con el mouse es totalmente simple así:
round.drag();
En este pequeño ejemplo, nuestro círculo se puede arrastrar dentro del espacio SVG. Los efectos de mouseover también son fáciles de adjuntar. Digamos que queremos que nuestra animación comience al pasar el mouse:
round.mouseover(function() {
round.animate({
r: 100,
cx: 50
}, 1000);
});
El siguiente video le brinda una descripción general rápida de qué más puede hacer y lo ayuda a acelerar rápidamente:
Conclusión
Snap.svg es una poderosa biblioteca de JavaScript para crear animaciones complejas y aplicaciones gráficas. La biblioteca es parte de Adobe Web Platform y está disponible de forma gratuita bajo una licencia Apache 2.0. Se le permite utilizar la biblioteca para proyectos privados y comerciales por igual. La biblioteca está disponible a través de su propia página web y a través de su repositorio Github.
(dpe)
#Snapsvg #Adobe #animaciones #con #HTML #sin #Flash