| 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
|
|
| 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"> 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: 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.
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 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.
MÉTODOS de oAnimacion
|
|||||||||||||||||||||||||||||||||||||||
Bajarlo |
Verlo |
||