DesarrolloLibre

Desarrollo Web, Android, juegos 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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Templates para Android y iOS

Templates para Android y iOS

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Algunos artículos que te pueden interesar

¿Qué es el SDK de Android?

¿Qué es el SDK de Android?

El SDK proporciona las librerías de desarrollo necesarias para construir, testear y debug nuestras aplicaciones para Android.

Andrés Cruz 02-09-2013

¿Cómo importar una librería (jar) en Android?

¿Cómo importar una librería (jar) en Android?

En este artículo explicaremos algunas de las diferentes forma que hay para importar las librerías JAR en un proyecto Android, utilizando eclipse y el plugin ADT.

Andrés Cruz 21-09-2013

El Drag and Drop en HTML5 (JavaScript)

El Drag and Drop en HTML5 (JavaScript)

Drag and Drop (Arrastrar y Soltar) es una característica que permite "agarrar" un objeto, arrastrarlo y soltarlo en una diferente localización. En en esta entrada hablaremos sobre el Drag and Drop en HTML5, ejemplos, métodos y atributos.

Andrés Cruz 04-01-2016