En este tutorial aprenderemos a realizar gráficos sencillos con SVG y a animarlos añadiendo y modificando atributos con jQuery.
¡Hola, amigos de Devcode! Hoy vamos a aprender a graficar una calabaza con SVG de HTML, y la animaremos utilizado los atributos transform para que siga con la mirada el movimiento del mouse.
Primero conozcamos que es SVG, estos son gráficos vectoriales escalables, comúnmente se encuentra como un formato de imagen, al igual que PNG y JPG.
Dentro de HTML se usa como un elemento para la creación de gráficos, estos pueden ser recuadros, círculos, textos e imágenes gráficas. A diferencia de un elemento
Bueno empecemos, en HTML añadimos un elemento con la clase contenedor, además de los atributos de ancho y alto, recordemos que, al igual que un elemento
En CSS añadimos propiedades para centrar el contenedor y color de fondo para su visualización.
.contenedor {
display: block;
margin: 0 auto;
background-color: #2e294e;
}Ahora agregamos dos círculos mediante el elemento , ambos con un radio "r" de 50 píxeles, con los atributos "cx" y "cy" ubicamos los centros de los círculos, estos equidistantes del centro vertical del contenedor. Con el atributo "fill" indicamos el color de relleno de los círculos, en este caso un tono naranja.
Ahora para cubrir los espacios entre los círculos creamos un rectángulo, mediante el elemento , de un alto igual al diámetro de los círculos y un ancho igual a la diferencia horizontal de estos. Con los atributos "x" y "y" ubicamos el rectángulo de tal forma que una los círculos.
Ahora agregaremos la nariz y los ojos de la calabaza con el uso de triángulos, para graficar un triángulo en se hace usando el elemento , aquí agregamos el atributo "points" con 3 a mas puntos podemos generar polígonos. Para los ojos y la nariz en color de relleno ser igual al color del contenedor.
Para el tallo usaremos un polígono de 4 esquinas y el color de relleno será un tono marrón.
Para la boca usamos el elemento path.
Este posee un atributo "d" que mediante algunas instrucciones podremos crear geometrías complejas. A continuación veremos las instrucciones principales:
- M = Mover M 225 135
- L = Línea L 225 135
- H = Línea horizontal H 225
- V = Línea vertical V 135
- C = Curva cubica de Bézier C 325,180 235,180 225,135
- Z = Cerrar Z
Para las curva cúbica de Bézier las coordenadas pertenecen al punto final y los puntos de control, en siguiente gráfico se visualizara mejor.
Con esto hemos terminado el gráfico ahora lo animaremos usando jQuery, iniciamos agregando la librería de jQuery a Codepen.
Haciendo uso de jQuery vamos a obtener la posición del mouse dentro de la ventana.
$(".contenedor").mousemove(function(event) {
let posx = event.pageX - $(this).offset().left;
let posy = event.pageY - $(this).offset().top;
}A esta posición la referenciamos al centro y escalamos de -1 a 1 para sus máximos y mínimos valores.
let movex = (posx-280)/280;
let movey = (posy-125)/125;En HTML agregamos identificadores a cada uno de los elementos.
Ahora mediante la propiedad transform y el valor de "translate(X,Y)" creamos movimientos a los ojos, nariz, boca y tallo.
$('.ojos').attr("transform", "translate(" + movex * 15 + "," + movey * 5 + ")");
$('#nariz').attr("transform", "translate(" + movex * 22 + "," + movey * 5 + ")");
$('#boca').attr("transform", "translate(" + movex * 18 + "," + movey * 5 + ")");
$('#tallo').attr("transform", "translate(" + movex * 18 + "," + movey * 5 + ")");Ahora para obtener un efecto de giro, vamos a desplazar horizontalmente los círculos en función de la posición del mouse.
if (movex > 0) {
/*desplazar círculo izquierdo*/
} else {
/*desplazar círculo derecho*/
}A esto se adiciona el desplazamiento y reducción del rectángulo.
if (movex > 0) {
/*desplazar círculo izquierdo*/
$('#izq').attr("transform", "translate(" + movex * 18 + ")");
/*reducir y desplazar rectángulo*/
$('#rec').attr("transform", "translate(" + movex * 18 + ")");
$('#rec').attr("width", 60 - (movex * 22));
} else {
/*desplazar círculo derecho*/
$('#der').attr("transform", "translate(" + movex * 18 + ")");
/*reducir rectángulo*/
$('#rec').attr("width", 60 + (movex * 22));
}Si deseas aprender mas de programación, recuerda que en Devcode tenemos el Curso de jQuery y muchos otros cursos esperando por ti para ayudarte a complementar tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.