Share
En este tutorial, presentaremos Snap.svg, una biblioteca de JavaScript que ayuda a animar y manipular el contenido SVG. Para demostrar algunas de las funciones disponibles, vamos a animar un ojo SVG.
Snap.svg es una biblioteca de JavaScript que facilita la creación y manipulación de gráficos SVG para navegadores modernos. Es el sucesor del Raphaël de Dmitry Baranovskiy; La biblioteca de Javascript más popular para trabajar con SVG..
Raphäel.js es una gran biblioteca. Lanzado en 2008, su mayor triunfo fue su soporte para navegadores desde IE 5.5 en adelante. Sin embargo, admitir tantos navegadores fue limitante y significaba que no podía implementar los últimos desarrollos, en lugar de confiar en un subconjunto común de características SVG.
Después de un tiempo, la comunidad de Raphäel.js se dividió en dos, un grupo que confiaba en él para la compatibilidad entre navegadores y otro que lo usaba para crear SVG. Este último grupo exigió cambios para admitir más funciones SVG que Raphäel.js no pudo manejar.
Por lo tanto, Snap.svg fue creado, escrito completamente desde cero por Dmitry Baranovskiy (del equipo de la plataforma web de Adobe), para trabajar con SVG más fácilmente y usar lo último que SVG puede ofrecer; características como enmascaramiento, patrones, degradados, grupos, animaciones y más.
Eche un vistazo a la documentación de su API y verá características como máscara, grupo, degradado, filtro, animado y patrón, todos los cuales puede aplicar a SVG..
Snap.svg te ayudará a generar gráficos, pero también puede funcionar con SVG existentes. Esto significa que su contenido SVG no necesariamente tiene que crearse con Snap.svg, también puede manipular los gráficos creados con herramientas como Adobe Illustrator, Inkscape o Sketch.
En primer lugar, deberás descargar Snap.svg. Con eso hecho, encontrarás lo siguiente en el archivo:
Habiendo descargado los recursos de Snap.svg, comience un nuevo proyecto web que debe incluir:
Cree una plantilla HTML y haga referencia a los scripts "scripts / snap.svg.js" y "scripts / main.js" en algún lugar de su página.
Después de eso, coloca un contenedor dentro del y dale un id Deberías tener algo como esto:
Introduciendo Snap.svg
Ahora vamos a saltar directamente a la codificación. Para seguir adelante, necesitarás un poco de conocimiento y comprensión básicos de JavaScript, pero no importa demasiado porque no estamos profundizando en este tutorial..
En primer lugar, inicializaremos Snap, apuntando a la svg acaba de crear y asignarlo a una variable. En nuestro caso se llama la variable. s
Accentsconagua
var s = Snap ("# svg");A partir de ahora, dentro de la s variable tendremos acceso a todos los métodos de Snap.svg. Por ejemplo, digamos que queremos crear un círculo, o un rectángulo.
// Círculo con 80px radio var circle = s.circle (90,120,80); // Cuadrado con un ancho lateral de 160px var square = s.rect (210,40,160,160); // Elipse con 80px de radio vertical y 50px de radio horizontal var ellipse = s.ellipse (460,120,50,80);
El código anterior generará el siguiente resultado:
Como puede ver en la captura de pantalla adjunta, las formas, por defecto, tienen un # 000 (negro) color de relleno sin ningún otro estilo. Interactuemos con ellos y agreguemos más atributos de estilo, como color de relleno, opacidad de relleno, color de trazo, ancho de trazo, opacidad de trazo. Puede comprobar los atributos SVG para más detalles.
circle.attr (fill: 'coral', stroke: 'coral', strokeOpacity: .3, strokeWidth: 10); square.attr (fill: 'lightblue', stroke: 'lightblue', strokeOpacity: .3, strokeWidth: 10); ellipse.attr (fill: 'mediumturquoise', stroke: 'mediumturquoise', strokeOpacity: .2, strokeWidth: 10);
Estos atributos han hecho que nuestras formas svg sean mucho más bonitas.!
Tomemos nuestro ejemplo y vayamos más allá de lo básico..
Snap.svg usa un arma poderosa llamada grupo, que, como su nombre indica, agrupa los vectores, haciéndolos una forma. Puede agrupar tantas formas como desee agregándolas como una lista.
Vamos a crear dos círculos, agruparlos y reducir el relleno de cada círculo para visualizar más claramente lo que está pasando.
var circle_1 = s.circle (200, 200, 140); var circle_2 = s.circle (150, 200, 140); var circles = s.group (circle_1, circle_2); circles.attr (fill: 'coral', fillOpacity: .6);
Digamos ahora que queremos crear un ojo imaginario utilizando los elementos agrupados que ya hemos creado. Podemos hacerlo utilizando máscara. Primero necesitamos crear una elipse extra y colocarla en el centro del grupo..
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); var circles = s.group (circle_1, circle_2); var elipse = s.ellipse (275, 220, 170, 90); circles.attr (fill: 'coral', fillOpacity: .6,); ellipse.attr (opacidad: .4);
Ahora necesitamos enmascarar los círculos con nuestra elipse, agregando un color de relleno diferente a la elipse:
circles.attr (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacity: .8);
Continuando con nuestro ejemplo, podemos hacer que este ojo parpadee, agregando un método animado. Para animar la elipse que acabamos de crear, modificaremos el radio vertical desde 1 a 90 (que es el valor actual) y viceversa..
Crea la animación y envuélvela dentro de una función llamada parpadeo.
función parpadear () elipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90, 300);); ;
Esto dice que vamos a animar desde ry: 90 a ry: 1 y de ry: 90 a ry: 1 con diferente tiempo.
Ahora crea un setInterval llamar al parpadeoMétodo una vez cada tres segundos, para crear un efecto de parpadeo.
setInterval (parpadeo, 3000);
El código final debería verse así:
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); // Agrupe círculos juntos var circles = s.group (circle_1, circle_2); var elipse = s.ellipse (275, 220, 170, 90); // Agregue color de relleno y opacidad al círculo y aplique // la máscara circles.attr (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacity: .8); // Crea un efecto de parpadeo modificando el valor de rx // para elipse de 90px a 1px y función hacia atrás blink () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90 , 300);); ; // Recuerda el método de parpadeo una vez cada 3 segundos setInterval (blink, 3000);
Como se mencionó anteriormente, estas características son compatibles con los navegadores modernos: IE9+, Safari, Chrome, Firefox y Opera.
Snap.svg está disponible bajo una licencia de Apache 2, lo que significa que es completamente de código abierto y completamente gratis.
Snap.svg reduce la barrera para una manipulación SVG bastante sorprendente. Espero que hayas disfrutado siguiéndolo y que te haya inspirado para profundizar en SVG!
