Movimientos enlazados
Descripción
  Este objeto te permitirá dotar a tu página de multiples movimientos y secuencias que la harán aún más atractiva. Es un objeto muy versátil y fácil de utilizar. Míra el ejemplo de uso, un caso muy completo que te servirá para entender el funcionamiento del objeto. Queda en tu mano personalizar los detalles para aplicarlo a tu caso en concreto. Es realmente un objeto con el que puedes lograr efectos muy llamativos.
Si no lo crees echa un vistazo a la muestra


  

Reiniciar animación


Como usarlo
 

Coloca en tu página una capa DIV con posicionamiento absoluto para cada uno de los elementos que vayas a mover, serán lo que llamaremos móviles. Estas capas pueden contener cualquier texto, imagen o ser simples cuadros de color (en la muestra con bolas de colores). Si quieres define estilos CSS para darles la forma que más te agrade. Ponle a cada capa DIV un atributo ID diferente.

<div id="solo" style="position:absolute; width:10px; height:15px; z-index:1; left: 109px; top: 236px">
<img src="bola3.gif" width="14" height="14">
</div>

Una vez tenemos los bloques DIV dispuestos decidimos como se van a mover y anotamos las coordenadas inicales y finales de cada movimiento.

Ahora toca escribir un poquito de código Javascript, el esquema de trabajo es:
Definir una variable tipo oMovil para cada movimiento que queramos ver en la página.
Definir las variables animaciones (globales, o sea sin anteponerles la clave var). Cada animación contendrá los bloques que se deban mover al mismo tiempo.
Enlazar a cada animación la animación que deberá seguirle.
Si se va a usar alguna función de movimiento diferente a la que el móvil usa por defecto escribir dicha función.
Iniciar la primera animación que debe ejecutarse.

Mírate la página de ejemplo para terminar de aprender como se usa.
  


Como funciona
 

El objeto oMovil describe el movimiento que debe realizar un bloque DIV por la página, este movimiento se realiza mediante pasos que se ejecutan periódicamente. En cada paso se calculan las coordenadas que debe tener el bloque en ese instante y si sitúa en el punto correspondiente. Esto se repite hasta que el bloque alcanza su posición final, en cuyo caso finaliza el movimiento.
Al crearlo debemos indicar el ID del bloque que se va a mover, las coordenadas iniciales desde las que comenzará a moverse, las coordenadas finales hasta las que deberá llegar, el tiempo que debe emplear en realizar ese movimiento (este factor es por supuesto aproximado y se interpreta como décimas de segundo). Lógicamente si el desplazamiento del objeto es muy pequeño no alcanzará ese tiempo. El penúltimo parámetro sirve para dejar el objeto visible u ocultarlo al terminar de moverse. Podemos usar un último parámetro para pasarle la función que queremos usar para ejecutar el movimiento del bloque, esta función es responsable de actualizar la propiedad esFinal del objeto para que finalice el movimiento

Propiedades del objeto
capa Objeto javascript correspondiente a bloque DIV que se moverá por la pantalla
px0, py0 Número: coordenadas horizontal y vertical iniciales del movimiento.
pxt, pyt Número: coordenadas actuales del movimiento
px1, py1 Número: coordenadas finales del movimiento
tiempo Número: factor de tiempo que debe durar el movimiento (seg)
esFinal lógico: true indica que ha finalizado el movimiento
visible lógico, true deja el objeto visible al final del movimiento, false lo oculta.
incx, incy Números: incrementos de las coordenadas X e Y para cada uno de los pasos que forman el movimiento


Métodos de oMovil

mover Calcula las coordenadas en cada instante del movimiento
situar Coloca el móvil en una posición dada por dos coordenadas. Si no lleva argumentos usa las dadas por las propiedades pxt, pyt. Puede ser sustituido por una función de usuario, esta función debe actualizar la propiedad esFinal del objeto.
reset Reinicializa el movimiento a su estado inicial
ponX, ponY Actualiza los valores de las coordenadas actuales (pxt, pyt)
leeX, leeY Lee las coordenadas actuales (pxt, pyt)

La función mover( ) puede ser sustituida por una función de usuario, cuyo funcionamiento en general se reducirá a incrementar una de las coordenadas y calcular la otra usando alguna función, cuando ambas coordenadas alcanzan el valor de las del punto final el movimiento debe finalizar, para lo cual la propia función pondrá a true la propiedad esFinal. Esta función es ejecutada a intervalos regulares de tiempo (concretamente cada 50 miliseg). El algoritmo de esta función será pues:

incrementar pxt
calcular pyt
situar el objeto en las coordenadas actuales
si pxt y pyt son iguales a px1, py1 se pone esFinal a true

Claro que no es imprescindible mover el bloque, podemos usar esta función para, por ejemplo, modificar su tamaño, o moverlo y modificar su tamaño, o cambiarle colores, todo es cuestión de imaginación. Por defecto la función mover desplaza el objeto en línea recta desde la posición inicial hasta la final.

Pero aún se necesita otro objeto: oAnimacion. Este objeto es el que controla la animación propiamente dicha. Contiene una lista de movimientos materializadas mediante objetos oMovil y además puede ser enlazado a otro objeto oAnimacion, pudiendo así realizar movimientos encadenados o bucles de movimientos. El esquema de su funcionamiento es simple: periódicamente se ejecutan los métodos mover( ) de los objeto oMovil contenidos en la lista móvimientos del objeto. Cuando todos esos móviles alcanzan su punto final, se pasa al siguiente objeto oAnimacion, que estará anotado en la propiedad enlazadas de la animación actual, si no existe termina la animación. Así pues vemos que una animación mueve simultáneamente varios bloques. Si queremos un intervalo de tiempo entre dos animaciones enlazadas podemos usar la propiedad retraso de la animación enlazada.

PROPIEDADES de oAnimacion
moviles Array o lista de objetos oMovil que forman esta animación.
enlazadas oAnimacion enlazada, o sea, animación que se ejecutará tras la actual.
retraso número indicando los miliseg que debe esperar el inicio de la animación.

MÉTODOS de oAnimacion
iniciar Inicia la animación
enlazar Enlaza una nueva animación
reset Reinicia la animación a sus condiciones iniciales

  Bajar archivos de la aplicación
Bajarlo
Verlo en funcionamiento
Verlo
 
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio