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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Paleta de colores para el Material Design

Paleta de colores para el Material Design

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Algunos artículos que te pueden interesar

Llamadas asíncronas dentro y fuera del ámbito una Actividad en Android

Llamadas asíncronas dentro y fuera del ámbito una Actividad en Android

En esta entrada explicaremos como realizar llamadas asíncronas en el ámbito y fuera de una Actividad en Android.

Andrés Cruz 06-07-2015

Algunos efectos interesantes que se pueden lograr con listas en CSS

Algunos efectos interesantes que se pueden lograr con listas en CSS

En esta entrada veremos algunos efectos curiosos sobre listas ul (algunos con efectos 3D).

Andrés Cruz 30-04-2015

El atributo pattern en HTML5

El atributo pattern en HTML5

Con este atributo podemos realizar validaciones sin necesidad de usar javascript.

Andrés Cruz 26-07-2013