Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 116

Visitas el mes pasado: 174

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introduccion a las animaciones
Desarrollo Web
animations CSS
W3CScools
CSS3 Transitions
W3CScools
CSS Animations Module Level 3
W3C Working Draft 20 March 2009
CSS Transitions Module Level 3
W3C Working Draft 01 December 2009
CSS 2D Transforms Module Level 3
W3C Working Draft 01 December 2009
CSS 3D Transforms Module Level 3
W3C Working Draft 20 March 2009
Uso de CSS transforms
mozilla: centro de documentación.
Curva de Bézier
Wikipedia.
Coordinate Transformation Matrices
Math is amazingy powerful
IE's CSS3 Transforms Translator
User Agent Man

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Animación en CSS3 (III)

Ejemplo de animación

Ejemplo de "coche circulando"

imagen css3_anim

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

En este 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>

Observa que hemos colocado las imágenes en la carpeta objetos, donde se suelen guardar imágenes y otros tipos de archivo que no sean páginas web.

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; }   
}
@-webkit-keyframes micoche { 
     from { left: 0px; }
     to { left: -600px; }   
}

Por los problemas ya explicados, debemos repetirla con el prefijo -webkit-.

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;
		
    -webkit-animation-name: micoche;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;	
    }

Al igual que en el anterior código, repetimos las propiedades con el prefijo -webkit-. 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 azul 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.WebkitAnimationPlayState="paused"; //Safari y Chrome
        }
//reiniciar la animación: propiedad animation-play-state: running;
function seguir() {
        elFondo.style.animationPlayState="running";
        elFondo.style.WebkitAnimationPlayState="running";
        }
//Cambiar la velocidad: propiedad animation-duration: "num"
function velocidad(num) {
        valor= num+"ms";
        elFondo.style.animationDuration=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



Animación CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com