Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

Animación en CSS3 III

Ejemplo de animación

Ejemplo 1: coche circulando

En esta página vamos a hacer algunos ejemplos de cómo aplicar las animaciones en CSS3.

En este primer ejemplo veremos una animación de un coche circulando por una calle. Además le añadiremos unos botones en la parte inferior de la animación para poder pararla, ponerla en marcha, y elegir la velocidad.

Para hacernos una idea de lo que queremos hacer en el siguiente enlace se muestra la página ya acabada:

Coche circulando - acabado.

Planteamiento:

Esta animación consta de dos dibujos, uno de fondo que es el que se mueve, y el del coche, que está parado. Sobre un fondo en movimiento colocamos la figura de un coche, esto de la sensación de que es el coche el que avanza cuando en realidad retrocede el fondo.

Debajo hemos puesto unos botones de control, Si sabemos algo de javascript, no tendremos ninguna dificultad en crear estos botones y hacer que funcionen.

Los dibujos

La imagen de fondo da la sensación de ser una tira continua que no se acaba. Para conseguir esto la técnica es sencilla. Hacemos un dibujo de fondo en el que su borde izquierdo coincida con el derecho, tanto en las líneas como en los colores. duplicamos después el dibujo y pegamos uno al lado de otro, de forma que el resultado es un dibujo duplicado en el que la mitad izquierda es igual a la mitad derecha. El dibujo debe medir el doble de largo que la ventana en la que lo mostraremos.

De esta forma el dibujo pasa por la ventana de derecha a izquierda viendo siempre una parte del mismo. Cuando éste se acaba vuelve a empezar el ciclo, con lo que siempre estaremos viendo el dibujo pasando de derecha a izquierda.

El coche es simplemente una imagen con el fondo transparente.

Si quieres seguir con nosotros este ejemplo puedes copiar las imágenes, las cuales son las siguientes:

Fondo Coche

Coche

Tal como hemos dicho antes observa que la imagen de fondo tiene su mitad izquierda y su mitad derecha exactamente iguales.

Código HTML

El siguiente paso es colocar los elementos en la página, Empezamos por el código HTML, el cual es simple ya que consiste en un "div" donde colocaremos los dibujos. Dentro del "body" ponemos el siguiente código:

<h2>Coche circulando:</h2>
<div id="visor">
<img id="fondoCoche" src="../objetos/fondoCoche.gif" alt="fondoCoche">
<img id="coche" src="../objetos/coche.gif" alt="coche">
</div>

Nos falta todavía el código para los botones de control, pero eso lo añadiremos más adelante, de momento vamos a seguir con la animación.

Código CSS

LLegamos al punto más importante, donde se crea la animación, el código CSS. Pero antes de crear la animación debemos definir y posicionar los elementos que la forman por lo que empezamos el código con unas reglas que ponen ya los elementos en su sitio:

#visor { width: 600px; height: 440px; background-color: silver;
         overflow: hidden; position: absolute; }
#fondoCoche { position: relative; width: 1200px; height: 400px; }
#coche{ position: absolute; top: 250px; left: 140px; width: 200px;  }

Con esto hemos posicionado los elementos en la página. Vamos a comentar algunas de estas propiedades:

Para crear la animación, lo primero es definir la regla @keyframes:

@keyframes micoche { 
     from { left: 0px; }
     to { left: -600px; }   
}
@-moz-keyframes micoche { 
     from { left: 0px; }
     to { left: -600px; }   
}
@-webkit-keyframes micoche { 
     from { left: 0px; }
     to { left: -600px; }   
}

Por los problemas de compatibilidad con navegadores, debemos repetirla varias veces.

Seguimos en el código CSS, ahora incorporamos las propiedades de estilo al fondo:

#fondoCoche {
    animation-name: micoche;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
		
    -moz-animation-name: micoche;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
		
    -webkit-animation-name: micoche;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;	
    }

Como hemos hecho anteriormente, tenemos que repetir el código por problemas con la compatibilidad con navegadores. Las propiedades indican que la duración de la animación en sí es de 3 segundos, que ésta se repetirá indefinidamente, y que la velocidad es constante.

La animación en sí ya está acabada y queda como en el siguiente enlace:

Coche Circulando I

Sin embargo el ejemplo no está acabado, ya que queremos incorporarle unos botones de control:

Utilizar javascript:

Vamos a poner unos botones de control en la parte inferior de la animacion, estos serán un boton de pausa: "stop" un botón de continuar "play" y una lista desplegable en la que elegiremos la velocidad.

Controlaremos estas acciones mediante unas funciones de javascript, en las que modificaremos las propiedades de animación al pulsar los botones o elementos de la lista.

En primer lugar creamos el formulario con los botones y la lista desplegable, el cual colocaremos dentro del div "visor", después de las imágenes:

<div id="visor">
<img id="fondoCoche" src="../objetos/fondoCoche.gif" alt="fondoCoche">
<img id="coche" src="../objetos/coche.gif" alt="coche">
<form action="#" name="controles" id="controles">
<p><input type="button"  name="stop" value="stop" onclick="parar()"/>
   <input type="button"  name="play" value="play" onclick="seguir()"/>
   <b>Elige la velocidad:</b> <select name="vel">
     <option selected="selected" onclick="velocidad(3000)"  >Normal</option>
     <option onclick="velocidad(7000)">Muy lento</option>
     <option onclick="velocidad(4500)">Lento</option>
     <option onclick="velocidad(2000)">Rápido</option>
     <option onclick="velocidad(1000)">Muy Rápido</option>
     <option onclick="velocidad(500)">Super Rápido</option> 
   </select>
</form>
</div>	

En color gris está el código anterior que ya teníamos, y en negro el que hemos añadido. Como puedes ver es un formulario con dos botones y una lista desplegable. En estos elementos hemos puesto ya los eventos de javascript que nos llevan a las funciones que cambian el comportamiento de la animación.

Hay tres funciones javascript, la función parar(), que detiene la animación. La función seguir que reinicia la animación. Y la función velocidad() que indica el cambio de velocidad en la animación. Los números que pasamos como parámetros en esta última son los milisegundos que tarda la animación en producirse una vez.

Sabiendo esto el código javascript será el siguiente:

//Buscamos el elemento animado en el DOM.
window.onload = function() {
   elFondo=document.getElementById("fondoCoche");
}
//parar la animación: propiedad animation-play-state: paused;
function parar() {
        elFondo.style.animationPlayState="paused"; //W3C
        elFondo.style.MozAnimationPlayState="paused"; //Firefox
        elFondo.style.WebkitAnimationPlayState="paused"; //Safari y Chrome
        }
//reiniciar la animación: propiedad animation-play-state: running;
function seguir() {
        elFondo.style.animationPlayState="running";
        elFondo.style.MozAnimationPlayState="running";
        elFondo.style.WebkitAnimationPlayState="running";
        }
//Cambiar la velocidad: propiedad animation-duration: "num"
function velocidad(num) {
        valor= num+"ms";
        elFondo.style.animationDuration=valor;
        elFondo.style.MozAnimationDuration=valor;
        elFondo.style.WebkitAnimationDuration=valor;
        }

Como último detalle añadimos una línea más en el código CSS, para cambiar el estilo de la línea de control:

#controles p  { background-color: navy; color: yellow; margin: 0px; padding: 5px; }	

Ahora ya tenemos la animación completa la cual quedará como en el siguiente enlace:

Coche circulando

Y el código completo del ejemplo anterior puedes verlo en el siguiente enlace:

Código completo de "coche circulando"






En la siguiente página vamos a ver otra forma de animaciones: las transiciones.

Transiciones



Manual Animación CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo