DesarrolloLibre

Desarrollo Web, Android y mucho más

15-06-2015

Hasta la fecha, hemos visto múltiples entregas de cómo trabajar con SVG en HTML:

Y por supuesto, hemos visto pequeñas secciones de código CSS que muestran parte de la versatilidad que tienen las animaciones CSS; entre las principales tenemos:

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 entrada.

Animando SVGs por partes -figuras-

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 se pueden animar por separado empleando las distintas propiedades existentes entre ellas la translación y la opacidad para obtener el siguiente efecto:

Su navegador no soporta SVG :/s Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/

Realizando nuestra animación: El CSS para las animaciones

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.

Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Botón flotante

Botón flotante

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Algunos artículos que te pueden interesar

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript

Andrés Cruz 06-06-2016

Probando las transformaciones 3d con anime.js

Probando las transformaciones 3d con anime.js

Andrés Cruz 01-09-2016

Detectando los eventos de teclado con Canvas

Detectando los eventos de teclado con Canvas

En esta entrada veremos un pequeño experimento en donde con el Canvas mediante los eventos de teclados específicamente emplearemos las flechas de direcciones del teclado.

Andrés Cruz 07-12-2015