Easing Functions

---

El trabajo ha comido bastante mi cerebro y había estado llegando muy cansado a la casa, es por eso que no había podido publicar algo reciente, pero hoy que tengo unos minutos libres quise escribir una entrada que aborde una de las características de jquery que más me gusta, las funciones easing.

Como ya sabemos, jquery agrega una función llamada animate a cualquier objeto jquery.   Vayamos construyendo un ejemplo sencillo:

1. Creamos un nuevo sitio web (al mío lo llamé EasingFunctions) en Visual Studio.
2. Creamos la carpeta js y ahí metemos la librería jquery y el plugin easing de jquery.
3. Agregamos una página HTML y la llamaremos TestFunctions.htm
4. Agregamos referencia a jquery.js y a jquery.easing.1.3.js.    Aquí es importante recordar que HTML se va intepretando línea a línea por lo que es necesario que la primera referencia sea hacia jquery y la segunda sea al plugin de funciones.

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.1.3.js"></script>

5. Busquemos algunas imágenes para hacer un pequeño slider en nuestra página y así vayamos viendo cómo es que se comportan algunas funciones del plugin.    Vayan a Google y busquen 5 imágenes de lo que quieran (yo voy a utilizar de los Simpson) que sean de 400x300 y las nombraremos 1.jpg, 2.jpg, 3.jpg, 4.jpg y 5.jpg y las guardaremos en la carpeta img de nuestro proyecto.

Hasta ahora nuestro explorador de soluciones debería verse así:

6. Vamos a construir el código HTML para meter botones de "adelante" y "atrás" y ver la galería fotográfica.   Notemos que el secreto, al menos en la solución que yo propongo, es colocar un div con un overflow en hidden para que los elementos que estén más allá de las dimensiones del div estén ocultos.

<table cellspacing="0" cellpadding="0">
    <tr>
        <td align="left"><input type="button" value="Anterior" /></td>
        <td align="right"><input type="button" value="Posterior" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="width: 400px; height: 300px; overflow: hidden; position: relative;">
                <table cellspacing="0" cellpadding="0" style="position: absolute; left: 0px; top: 0px;">
                    <tr>
                        <td><img src="img/1.jpg" /></td>
                        <td><img src="img/2.jpg" /></td>
                        <td><img src="img/3.jpg" /></td>
                        <td><img src="img/4.jpg" /></td>
                        <td><img src="img/5.jpg" /></td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

De una vez he puesto las imágenes en un arreglo horizontal en una tabla.    También deberemos notar que el div tiene un posicionamiento relativo de manera tal que los elementos que contenga estén posicionados respecto al div y no respecto al documento completo, tal y como lo estamos haciendo con la tabla que de inicio estará en la coordenada (0,0) del div.

Ahora crearemos un script sumamente básico que lo que hará es mover la tabla de manera tal que se vea el cambio de imágenes.   Modificaremos la declaración de nuestros botones y quedarán de la siguiente manera:

<input type="button" value="Anterior" onclick="showPrevious()" />
<input type="button" value="Posterior" onclick="showNext()" />

Y el script lo que hará es mover la tabla hacia la izquierda o la derecha dependiendo del botón que hayan presionado:

<script language="javascript" type="text/javascript">
    var currentPic = 0;
    var picCount = 5;
    var picWidth = 400;
    function showPrevious() {
        if (currentPic == 0)
            currentPic = picCount - 1;
        else
            currentPic--;
        $('#tblPics').css('left', -currentPic * picWidth);
    }
    function showNext() {
        currentPic = (currentPic + 1) % picCount;
        $('#tblPics').css('left', -currentPic * picWidth);
    }
</script>

He declarado algunas variables que guarden los valores importantes de manera tal que después podamos agregar fotos sin problema alguno.

Ejecutemos nuestra página y veamos cómo van cambiando las fotografías dependiendo del botón que hayamos presionado.

Con un simple cambio en el código, ahora lo que haremos es hacer el movimiento de la tabla de forma animada.    Utilizaremos la función animate y nuestro código deberá quedar de la siguiente manera:

Antes: $('#tblPics').css('left', -currentPic * picWidth);
Ahora: $('#tblPics').animate({ 'left': -currentPic * picWidth });

Probemos nuestra página y veremos que el cambio de foto a foto ya se ve mucho mejor.

El parámetro que le estamos pasando a la función animate, es un objeto que contiene todos aquellos atributos de la hoja de estilo de nuestra tabla que queramos modificar de forma animada.

De inicio, jquery utiliza una función de animación llamada "linear", esto significa que no tiene aceleración.    Modifiquemos nuestra llamada a la función animate hacia el segundo valor que por defecto trae jquery:

Antes: $('#tblPics').animate({ 'left': -currentPic * picWidth });
Ahora: $('#tblPics').animate({ 'left': -currentPic * picWidth }, 'normal', 'swing');

Si ejecutamos de nuevo la página no veremos un cambio muy significativo dado que el ancho de las fotografías es algo pequeño, pero ahora que utilicemos las funciones que tiene el plugin podremos observar grandes cambios.

Probemos la animación "easeInCubic":

$('#tblPics').animate({ 'left': -currentPic * picWidth }, 'normal', 'easeInCubic');

Al ejecutar la página veremos que al principio comienza lento y conforme va pasando el tiempo comienza a acelerar.    En lo personal, me gusta mucho la función easeInCirc.

Para obtener la lista completa de las funciones a las que tenemos acceso a través de este plugin, abrimos el archivo jquery.easing.1.3.js y ahí aparecerán todas las funciones easing a las que se les ha asignado un nombre en el plugin.

Ya dependerá del gusto de nuestro cliente cuál utilizaremos, pero en las funciones easing tenemos un aliado que nos permitirá darle una vida y presentación diferente a nuestras páginas.

Podrán ver este pequeño ejercicio en ejecución en esta dirección web:

http://www.jorgetoriz.com/easingfunctions/testfunctions.htm

Espero les haya sido de mucha utilidad.