DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
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:

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

Hover over the cards

Hover over the cards

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Algunos artículos que te pueden interesar

¿Cómo instalar el ADT Bundle de Android?

¿Cómo instalar el ADT Bundle de Android?

El ADT Bundle nos permite desarrollar aplicaciones para Android rápidamente; nos ofrece un entorno de desarrollo ya completo e integrado sin necesidad de hacer alguna configuración previa o posterior a su instalación.

Andrés Cruz 02-09-2013

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015

¿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