Animando los SVG con CSS: animando el logo de Android vectorizado
- Andrés Cruz
En esta entrada veremos un tutorial de como crear el logotipo del popular muñeco verde conocido como Android mediante SVG y cómo animar el mismos; pero antes de esto hagamos un pequeño resumen de lo que se ha creado hasta la fecha y cómo podemos trabajar con todo esto de forma junta pero no desordenada, hemos visto múltiples entregas de cómo trabajar con SVG en HTML:
- construyendo nuestro propio logo android con svg en html
- gradientes svg en html
- dibujando nuestro propios svg en html (parte 1)
- el elemento symbol para los svg en html
Y por supuesto, hemos visto varios tutoriales empleando CSS que muestran parte de la versatilidad que tienen las animaciones CSS; entre las principales tenemos:
- primeros pasos con las animaciones en css
- botones con fondo corredizo en css
- elementos reversibles con estilo 3d en css
Animaciones CSS + SVG/HTML
En esta entrada veremos una combinación de ambas cosas empleando las animaciones CSS con los SVGs en HTML, específicamente emplearemos el logo de Android con el cual hemos trabajado desde entradas pasadas listadas a principio de esta.
Animando SVGs por partes -figuras-
Recordemos que los SVGs son una estupenda manera de crear imágenes vectoriales que no se pixelen; es decir, podemos crear imágenes con un peso muy pequeño y escalar tanto como queramos y no se perderá detalle, cosa que no podemos hacer con otros tipos de imágenes como los png, jpg, gif, etc; por supuesto crear SVGs de imágenes muy complejas es muy complicado y no es recomendable pero todo tiene sus ventajas y desventajas y para ello existen los demás formatos de imágenes.
Tal cual como especifica el título no animaremos el SVG como un todo (es decir, el logo completo) sino por partes; dichas partes no son más que las figuras que componen el logo:
- Elipses: Para la cabeza.
- Círculos: Para los ojos.
- Rectángulos: Para los brazos, piernas, antenas y torso.
Cada una de las figuras anteriores son tags SVG mediante HTML que se pueden animar por separado empleando las distintas propiedades existentes entre ellas la translación y la opacidad para obtener el siguiente efecto deseado:
Realizando nuestra efecto de animación: El CSS para animar
El HTML y CSS para definir su color y forma es igual al empleado en entradas anteriores y lo puedes encontrar aqui; en esta sección mostraremos y explicaremos el CSS necesario para crear la animación anterior.
Para cada parte (figura) del logo es definido una animación diferente que dura diez segundos; el CSS está definido de tal forma que cada animación comienza justo después de la anterior empezando con los brazos siguiendo por las piernas para terminar con la cabeza:
.example2 rect#c {
animation: c ease-in-out 3s infinite ;
}
.example2 rect#bd {
animation: bd ease-in-out 10s infinite;
}
.example2 rect#bi {
animation: bi ease-in-out 10s infinite ;
}
.example2 rect#pi {
animation: pi ease-in-out 10s infinite ;
}
.example2 rect#pd {
animation: pd ease-in-out 10s infinite ;
}
.example2 rect#antena1 {
animation: head ease-in-out 10s infinite ;
}
.example2 rect#antena2 {
animation: head ease-in-out 10s infinite ;
}
.cabeza{
animation: head ease-in-out 10s infinite ;
}
Como habrás observado en el CSS anterior y como especificamos anteriormente, son definidas animaciones para cada figura..
Ahora las animaciones especificadas en el CSS anterior para cada parte del logo:
/*************************************Brazo derecho*/
@keyframes bd {
0% {
transform: translate(50px,0);
opacity:0;}
10% {
transform: translate(0,0);
opacity:1;}
90% {
transform: translate(0px,0);
opacity:1;}
99% {
opacity:0;}
100% {
transform: translate(50px,0);
opacity:0;}
}
/*************************************Brazo izquierdo*/
@keyframes bi {
0% {
transform: translate(-50px,0);
opacity:0;}
10% {
transform: translate(-50px,0);
opacity:0;}
20% {
transform: translate(0px,0);
opacity:1;}
90% {
transform: translate(0px,0);
opacity:1;}
99% {
opacity:0;}
100% {
transform: translate(-50px,0);
opacity:0;}
}
/*************************************Pierna derecha*/
@keyframes pd {
0% {
transform: translate(0,-50px);
opacity:0;}
20% {
transform: translate(0,-50px);
opacity:0;}
30% {
transform: translate(0,0);
opacity:1;}
90% {
transform: translate(0,0);
opacity:1;}
99% {
opacity:0;}
100% {
transform: translate(0,-50px);
opacity:0;}
}
/*************************************Pierna izquierda*/
@keyframes pi {
0% {
transform: translate(0,-50px);
opacity:0;}
30% {
transform: translate(0,-50px);
opacity:0;}
40% {
transform: translate(0,0);
opacity:1;}
90% {
transform: translate(0,0);
opacity:1;}
99% {
opacity:0;}
100% {
transform: translate(0,-50px);
opacity:0;}
}
/*************************************cabeza*/
@keyframes head {
0% {
opacity:0;}
40% {
opacity:0;}
50% {
opacity:1;}
90% {
opacity:1;}
99% {
opacity:0;}
100% {
opacity:0;}
}
Y esto es todo, con el CSS mostrado anteriormente es suficiente para animar nuestro logo Android; como vemos es muy sencillo y con las tecnologías webs actuales y sin ningún plugin podemos hacer efectos interesantes en nuestras imágenes vectorizadas o SVG con puro HTML5, este es uno de los muchos ejemplos de animación que podemos usar en donde el cielo es el límite.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter