jQuery animation

Constantemente en la web vemos sitios en los cuales para mejorar la usabilidad y la interfaz de usuario, muchas de esas animaciones son realizadas  en Flash o en Silverlight, sin embargo acá yo plantearía tres varias cosas, 1) se tiene el conocimiento necesario en algunas de esas tecnologías? 2)la animación es tan compleja que requiere hacer uso de algunas de esas tecnologías? 3)Silverlight es mucho más que una simple tool para hacer nuestro sitios más bonito. Claro tampoco estoy diciendo que hacer uso de alguna tecnología adicional sea malo, solo digo que se debe hacer buen uso de dichas herramientas.

Ahora, jQuery provee la facilidad para realizar animaciones, esto haciendo uso del evento animate.

Así que vamos a ver tres maneras de usar este elemento.

  • Animación de propiedades: Bueno en esta caso podemos modificar el valor de las propiedades, además de especificar un tiempo de duración para dicho cambio.

La sintaxis general es:

 1: $("selector").animate(
 2:                     {

 

 3:                         propiedad: 'valor',
 4:                         propiedad: 'valor',

 

 5:                         propiedad: 'valor'
 6:                     }, tiempo)

Acá el tiempo es manejado en milisegundos.

  • Efectos [easing]: El easing permite animar las propiedades en un tiempo determinado agregando una mejora progresiva, con la cual la velocidad de la animación se va incrementando de manera progresiva, existen dos tipos de easing disponibles en la librería core de jQuery:
  • linear: La velocidad aumenta de manera constante
  • swing: La velocidad aumenta de manera progresiva

La sintaxis general es:

 1: $("selector").animate(
 2:                     {

 

 3:                         propiedad: 'valor',
 4:                         propiedad: 'valor',

 

 5:                         propiedad: 'valor'
 6:                     }, tiempo,'tipo easing')
  • Efectos avanzados [easing avanzado]: El easing avanzado, funciona de la misma manera que lo hace el easing normal, la diferencia es que acá se dispone de 6 tipos más de easing, dichos tipos no vienen incluidos en la librería core de jQuery, por lo tanto deben ser descargados y referenciados en la página para poder ser utilizados, en la página jQuery Easing Plugin se encuentra una completa información sobre cada tipo de animación . Los seis nuevos tipos de easing disponibles son:
  1. easeInCirc
  2. easeInOutExpo
  3. easeOutBack
  4. easeOutElastic
  5. easeOutBounce
  6. easeInOutElastic

La sintaxis general es:

 1: $("selector").animate(
 2:                     {

 

 3:                         propiedad: 'valor',
 4:                         propiedad: 'valor',

 

 5:                         propiedad: 'valor'
 6:                     }, tiempo,'tipo easing')

Espero les sea de utilidad esta pequeña referencia sobre animaciones con jQuery, como siempre les dejo un ejemplo el cual implementa las tres animaciones anteriores:

Link al ejemplo !

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *