Plugin para hacer efectos jQuery con Easing

En este Taller de jQuery presentamos un plugin de los que resulta interesante tener dentro de nuestro paquete de herramientas habituales. Su nombre es Easing jQuery Plugin y está ampliamente extendido en el mundillo de los widgets jQuery

Es un componente tan útil como versátil que nos permite implementar un gran abanico de funciones de efectos de animación en jQuery. Digamos que no es un plugin que sirva para un efecto específico, sino que nos servirá como herramienta para producir componentes de interfaz de usuario más dinámicos y con animaciones suavizadas.

El plugin que os vamos a presentar está en la URL: http://gsgd.co.uk/sandbox/jquery/easing/

Funciones de animación "easing"

La verdad es que no sé cómo traducir "easing", pero es que quizás no necesite traducción. Realmente a lo que nos referimos con esa palabra son a funciones matemáticas que sirven para alterar un valor dentro de un rango, con un cambio que se realiza de manera suavizada. Esas funciones se utilizan para hacer efectos de animación de lo más variado.

Si tuviéramos que mover un objeto de un punto a otro, por ejemplo entre la posición 1 y la 100 podríamos cambiar el valor de manera lineal: 1, 2, 3, ... 99, 100. Pero podemos utilizar otras funciones diferentes, cuyos cambios no sean siempre iguales. Por ejemplo implementar una aceleración, para que el valor poco a poco vaya cambiando más rápido, o que llegue rápidamente al final y luego rebote y vuelva a llegar, como si fuera una bola de pelota de goma botando en el suelo.

Pues bien, Easing jQuery Plugin no es más que un repositorio de funciones easing que podemos utilizar en jQuery para lo que deseemos.

Animaciones en jQuery

Por refrescar la memoria de las personas que están aprendiendo jQuery vamos a recordar cómo se realizaban animaciones en este framework Javascript. Para ello teníamos un método llamado animate() que recibe el valor CSS que deseamos animar, el tiempo de animación y la función easing.

En principio sólo es obligatorio informar sobre los valores CSS hacia los que queremos animar un elemento de la página. Podemos ver un ejemplo a continuación:

$("#micapa").animate({
   "top": 200,
   "left": 300
})

En ese ejemplo tenemos una animación que lleva el elemento "#micapa" hacia la posición marcada por top: 200 (píxeles) y left 300. la animación se realizará de manera suavizada en jQuery y con la función de animación que jQuery dispone de manera predeterminada, que es bastante lineal.

Animación con Easing jQuery Plugin

Ahora bien, nosotros podemos cambiar la función de animación por otra cualquiera y ahí es justamente donde entra el Plugin Easing de jQuery. Para ello definiremos la animación expresando otros dos parámetros del método animate(), la duración y la función de animación.

Veamos el siguiente ejemplo.

$("#micapa").animate({
   "top": 200,
   "left": 300
}, 1000, "easeOutBack")

En este caso estamos realizando exactamente la misma animación en la que se cambia la posición de un elemento, pero además estamos indicando que dure 1 segundo y que se utilice la función easing "easeOutBack".

Esa función de easing, "easeOutBack" es la que tenemos disponible gracias al plugin Easing, así como muchas otras con nombres tan extraños como ese: "easeInQuad", "easeOutCubic", "easeInOutQuart", "easeInSine", "easeOutExpo", "easeInOutElastic", "easeOutBounce", etc.

Ejemplo completo de script que usa el plugin easing

Ahora paso a dar una receta para hacer un ejemplo de animación con Easing, que servirá para aquellos a los que les gusta ver los desarrollos paso a paso.

Como ya podéis imaginaros, tenemos que descargar la última versión del plugin e instalarlo en la cabecera de la página, después de haber incluido también jQuery.

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Luego colocamos en el cuerpo de la página una capa que vamos a animar y un botón.

<div id="micapa">
   Esta capa la voy a utilizar para hacer efectos de easing
</div>
<button id="b2">Animación easing</button>

Ahora unos estilos CSS para la capa:

#micapa{
   position: absolute;
   top: 120px;
   left: 20px;
   background: #ffcc99;
   font-size: 1.2em;
   z-index: 100;
   width: 500px;
   height: 60px;
   line-height: 60px;
   text-align: center;
}

Por último un script jQuery para producir la animación al hacer clic sobre el botón.

$(document).ready(function(){         
   //animación con easing
   $("#b2").click(function(){
      $("#micapa").animate({
         "top": 200,
         "left": 300
      }, 500, "easeOutBack").animate({
         "top": 120,
         "left": 20
      }, 500, "easeInOutElastic")
   })   
})

Fíjate que hemos concatenado dos animaciones, invocadas una detrás de otra, ya que animate() devuelve el objeto jQuery que se está animando y ese valor de retorno lo utilizamos para invocar otra vez a animate() sobre ese mismo elemento.

Puedes ver este ejemplo de animación en una página aparte.

Acabamos comentando otro posible uso de este plugin y es simplemente definir la función easing por defecto a ejecutar en jQuery, asignando a la propiedad jQuery.easing.def la cadena con la función easing que deseamos configurar como predeterminada.

jQuery.easing.def = "easeInOutBounce";