Animación lineal con JavaScript

Javascript

Vamos a aprender a crear una pequeña animación en la que desplazaremos un avión de izquierda a derecha sobre un fondo. En esta guía no utilizaremos un elemento CANVAS de HTML5, sino que trabajaremos con elementos básicos de HTML como imágenes y divs Dividiremos el código en tres archivos, un archivo HTML que mostrará todo en pantalla, otro archivos CSS para los estilos y otro JavScript con el código necesario para realizar la animación.

Elementos HTML de la animación

Primero creamos la estructura básica de una página web con las etiquetas, <html>, <head> y <body>.

Dentro de <head> importamos el archivo CSS y el archivo JavaScript.

Dentro de la etiqueta <body> creamos dos divs relativos; uno para la animación al que llamaremos camara y otro para los controles al que llamaremos controles.

Dentro del div que utilizaremos a modo de cámara agregamos tres imágenes, una para el avión y otras dos imágenes idénticas para el fondo. El motivo de que agreguemos dos imágenes de fondo en lugar de una es que para realizar al animación de modo que nunca termine, mantendremos el avión estático mientras movemos el fondo de derecha a izquierdo. Si solamente tuviésemos una imagen, veríamos el fondo de la página a medida que éste se desplaza hacia al izquierda. Lo que haremos es colocar la segunda imagen a la derecha de la primera, fuera de la cámara, para que vaya siguiendo a la primera a medida que se desplaza. ¿Qué ocurrirá cuando la segunda imagen se desplaza a la izquierda lo suficiente? ¿Veremos también el fondo blanco? No, puesto que llegados a ese punto colocaremos la primera imagen, que a estas alturas ya estará también fuera de la cámara, detrás de la segunda para que la siga al igual que antes.

En el div con los controles colocamos un botón para parar la animación, otro para iniciarla y un select copn diferentes opciones para cambiar la velocidad de la animación de los fondos, dando así la sensación de que el avión va más rápido o más despacio.

Aquí tenéis el código HTML:

<html>
  <head>
    <script type= "text/javascript" src="botones.js"></script>
    <link href="hojaestilo.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <h1>Avión volando</h1>
    <div id="camara">
      <img id="fondo_1" src="playa.jpg" >
      <img id="fondo_2" src="playa.jpg" >
      <img id="avion" src="avion.png" >
    </div>
    <div id="controles">
      <input type="button" name="Parar" value="parar" onclick="anim.parar()" />
      <input type="button" name="Arrancar" value="arrancar" onclick="anim.arrancar()" />
      <b>Elige la velocidad</b>
      <select name="vel" onchange="anim.cambiarVelocidad(this.value);">
        <option value="0.2" >Muy lento</option>
        <option value="0.5" >Lento</option>
        <option selected value="1" >Normal</option>
        <option value="2" >Rápido</option>
        <option value="4" >Muy Rápido</option>
      </select>
    </div>
  </body>
</html>

Estilos CSS de la animación

En este archivo definimos los estilos de la cámara. Lo único que es importante destacar es que la cámara tendrá un ancho fijo de 620 pixels, que será también el ancho de cada imagen de fondo. Es también importante destacar la propiedad de la cámara que mantendrá invisible cualquier elemento o cualquier parte de un elemento que sobresalga de su área, que será: «overflow:hidden;».

El primer fondo, fondo_1, es una imagen que tendrá un ancho de 620 pixels y una altura de 349 pixels. Su posición será absoluta con respecto al div que la contiene.

La imagen fondo_2 es exactamente igual, con la única particularidad de que se situará justo después de la otra; es decir, 620 pixels a la derecha del inicio de la imagen fondo_1. Además, también la invertiremos mediante mediante CSS para que encaje con el final de la primera y que al transición sea suave a medida que el avión se desplaza.

El avión siempre estará en al misma posición fija, ya que lo que hacemos es crear la sensación de movimiento, manteniendo el avión siempre fijo, algo que por ejemplo ocurre en muchos videojuegos.

Aquí tenéis el código CSS:

#camara{
  position: relative; float: left;
  height: 349px; width:620px;
  overflow:hidden;
}

#fondo_1 {
  position: absolute;
  top: 0px; left: 0px;
  width: 620px; height: 349px;
}

#fondo_2{
  position: absolute;
  top: 0px; left: 0px;
  width: 620px; height: 349px;
  left:620px;
  -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);
  filter: FlipH; -ms-filter: "FlipH";
}

#avion {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 50px;
}

#controles{
  position:relative; float:left;
  margin-top: 20px;
  width:100%;
}

Código JavaScript de la animación

Al cargar la página se ejecutará el código que hay dentro de window.onload, que crea una animación, que no es otra cosa que el «molde» de la animación que estamos creando, en el que defino los elementos, que son el avión y el fondo. En este ejemplo utilizamos prototype de JavaScript, que es la solución que este lenguaje nos ofrece para seguir un estilo de programación orientado a objetos.

A las propiedades avión, fondo_1 y fondo_2 de la animación les asigno la correspondiente imagen mediante document.getElementById(‘el_id_del_elemento’). Seguidamente creo las variables de posición para mantener siempre dos variables con la posición actualizada de cada fondo y, finalmente defino la propiedad velocidad y también un intervalo, que es el número de veces por segundo que la animación se ejecutará.

Luego, a la animación le añado las funciones de arrancar, parar, cambiarVelocidad y animar.

En la función de arrancar, creamos un intervalo que se ejecutará cada 16 milisegundos para tener una suavidad decente. Lo que se ejecutará en este intervalo es la función animar, que es en la que ocurre todo el «meollo».

Con la función parar, sencillamente elimino el intervalo para que no se ejecute la función animar.

En animar, actualizo la posición de los dos fondos restándoles el número de pixels que hemos indicado en velocidad y cuando dejen de ser visibles por la izquierda, los colocamos de nuevo a la derecha.

En cambiarVelocidad, sencillamente cambio el valor de la variable velocidad de la animación, que se utiliza en la función animar.

Aquí tenéis el código JavaScript de la animación:

window.onload = function() {
  anim= new animacion('avion', 'fondo_1', 'fondo_2');
  anim.arrancar();
}
animacion = function (id_avion, id_fondo_1, id_fondo_2) {
  this.avion=document.getElementById(id_avion);
  this.fondo_1=document.getElementById(id_fondo_1);
  this.fondo_2=document.getElementById(id_fondo_2);
  this.posicion_fondo_1=0;
  this.posicion_fondo_2=620;
  this.velocidad=1;
  this.intervalo;
};

animacion.prototype.arrancar = function(){
  var that=this;
  clearInterval(this.intervalo);
  this.intervalo=setInterval(function() { that.animar(); }, 16 );
}

animacion.prototype.parar = function(){
  clearInterval(this.intervalo);
}

animacion.prototype.cambiarVelocidad = function(velocidad){
  this.velocidad=velocidad;
}

animacion.prototype.animar = function(){
  this.posicion_fondo_1-=this.velocidad; this.posicion_fondo_2-=this.velocidad;

  if(this.posicion_fondo_1<=-620) { this.posicion_fondo_1=this.posicion_fondo_2+620; }
  if(this.posicion_fondo_2<=-620) { this.posicion_fondo_2=this.posicion_fondo_1+620; }

  document.getElementById('fondo_1').style.left=(this.posicion_fondo_1)+'px';
  document.getElementById('fondo_2').style.left=(this.posicion_fondo_2)+'px';
}

Aquí tenéis un enlace al fiddle con el código completo. Ésto es todo, espero que os haya sido de ayuda para aprender a animar elementos con JavaScript, viendo así también los fundamentos de animación dentro de un CANVAS.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”