Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (II Efectos)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 218

Visitas el mes pasado: 66

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools2 (V)

Encadenar Efectos

imagen mootools

Introducción

El encadenamiento de efectos consiste en hacer que al aplicar varios efectos, éstos aparezcan de forma secuencial, es decir al acabar uno empieza el siguiente.

Si aplicamos varios efectos sobre un mismo elemento, éstos se producirán de manera casi instantánea, es decir los veremos a la vez. Es decir, la ejecución del segundo efecto no espera a que se acabe el primero, sino que en cuanto el programa lee la función ésta empieza a ejecutarse.

En el encadenamiento de efectos queremos que cada efecto espere a que acabe el anterior, y sólo entonces se empiece a ejecutar. Para el encadenamiento de efectos mootools dispone del objeto Chain(). Este objeto encadena las funciones, cada una de ellas espera a que se acabe la anterior para poder ejecutarse la siguiente.

Sin embargo con los efectos de Fx no tenemos que crear ningún objeto, ya que podemos usar el método .chain() directamente, para crear una función que espere a otra para ser ejecutada.

La clase Chain forma parte del "core" de mootools, por lo que basta con tener acceso al archivo "core" para poder ponerla en marcha.

Veamos esto de una forma más práctica con algunos ejemplos:


Encadenar efectos en un elemento

Veamos cómo hacer que varios efectos aplicados a un mismo elemento aparezcan de forma encadenada. Explicamos esto a la vez que vamos viendo un ejemplo:

En primer lugar creamos un código HTML:

<div id="capa1">
<div id="elem"></div>
</div>

En este código tenemos un elemento contenedor (capa1) y otro elemento (elem) sobre el que aplicaremos el efecto.

Ahora para que podamos verlos y situarlos les aplicamos un código CSS:

#capa1 {width: 250px; height: 250px; border: 2px solid black; float: right; position: relative;}

#elem { width: 40px; height: 40px; margin: 5px;background-color: #00f; position: absolute; left: 0px; top: 0px; }

Cómo lo que queremos es poder desplazar el elemento dentro de su contenedor les hemos dado un posicionamiento relativo al contenedor, y uno absoluto al elemento. Esto hace que en las propiedades left y top el elemento tenga como punto de referencia su contenedor.

Ahora para poner en marcha el efecto creamos también un botón, en el código HTML:

<button id="boton1">Efecto encadenado 1</button>

Este es el botón y aquí a la derecha tenemos el contenedor con el elemento sobre el que producimos el efecto.


Y ahora vamos con el código javascript/mootools. Lo escribiremos todo dentro de la estructura "domready". En primer lugar crearemos los objetos Fx.Tween que nos permiten desplazar el elemento en horizontal y en vertical:

tween1=new Fx.Tween("elem",{
   property: "left",
   duration: 1000,
   transition: "linear"
   });
tween2=new Fx.Tween("elem",{
   property: "top",
   duration: 1000,
   transition: "linear"
   });

A continuación creamos un evento click para el botón, y dentro pondremos varias funciones encadenadas mediante el método .chain() que hacen que cada una de ellas espere a la anterior para ser puesta en marcha:

$("boton1").addEvent("click",function(){
   tween1.start("200").chain(function(){
   tween2.start("200").chain(function(){
   tween1.start("0").chain(function(){
   tween2.start("0");
   });
   });
   });
});

Observa cómo para cada nuevo elemento encadenado se crea una nueva función con .chain; ésta está incluida en la anterior, por lo que al final debemos cerrar todas las funciones y métodos .chain abiertos. El orden en que se cierran es inverso al que se abren, ya que están incluidas unas dentro de otras. Debemos tener mucho cuidado con que los métodos y funciones abiertos se cierren correctamente para no cometer errores.


Encadenar efectos con varios elementos

Vamos a poner un segundo ejemplo, en el que complicamos un poco más la cosa, aquí encadenaremos efectos que se producen en varios elementos distintos, y además a cada elemento se le aplicarán varios efectos a la vez.

En primer lugar vemos el codigo html del ejemplo:

<div id="capa2">
  <div id="elem1"></div>
  <div id="elem2"></div>
  <div id="elem3"></div>
</div>
<p><button id="boton2">Efecto encadenado 2</button></p>

Tenemos un elemento contenedor (capa2), y tres elementos a los que aplicaremos los efectos (elem1, elem2, elem3). También tenemos un botón (boton2) que es el que activará el efecto.

Ahora aplicamos un código CSS sobre los elementos anteriores:

#capa2 {width: 250px; height: 200px; border: 2px solid black;
        float: right; position: relative;}
#elem1 { width: 40px; height: 40px; margin: 5px;background-color: #f00;
         position: absolute; left: 0px; top: 0px; }
#elem2 { width: 40px; height: 40px; margin: 5px;background-color: #0f0; 
         position: absolute; left: 0px; top: 70px; }
#elem3 { width: 40px; height: 40px; margin: 5px;background-color: #00f; 
         position: absolute; left: 0px; top: 140px; }

Hemos posicionado el contenedor como relativo, y los elementos con posición absoluta. Cada elemento recibe un color primario distinto.

Ahora el efecto consistirá en que al pulsar el botón los elementos se mueven uno tras otro hacia la derecha, a la vez que cambian de color. Una vez movidos todos se espera tres segundos y vuelven, todos a la vez a su posición inicial.

Tenemos aquí a la derecha el ejemplo, y aquí debajo el botón:

El código javascript/mootools es el que genera el efecto, para ello en primer lugar creamos tres objetos Fx.Morph, uno por cada elemento:

morph1=new Fx.Morph("elem1",{
   duration: 1000,
   transition:"linear"
   });
morph2=new Fx.Morph("elem2",{
   duration: 1000,
   transition:"linear"
   });
morph3=new Fx.Morph("elem3",{
   duration: 1000,
   transition:"linear"
   });

Después creamos el código del evento "click" para el botón. En él pondremos los efectos de cada elemento encadenándolos:

$("boton2").addEvent("click",function(){
    morph1.start({"left":"200","backgroundColor":"#0ff"}).chain(function(){
    morph2.start({"left":"200","backgroundColor":"#f0f"}).chain(function(){
    morph3.start({"left":"200","backgroundColor":"#ff0"}).chain(function(){
      morph1.start({"left":"0","backgroundColor":"#f00"});
      morph2.start({"left":"0","backgroundColor":"#0f0"});
      morph3.start({"left":"0","backgroundColor":"#00f"});
      }.delay(3000));
    });
    });
});

Fíjate que a cada efecto le encadenamos el siguiente. En la última función de encadenamiento, metemos los tres efectos a la vez, lo cual hace que se produzcan a la vez. Además a esta última función le añadimos el método delay() para retardar su ejecución.






Hasta aquí hemos visto la parte correspondiente al archivo "core" de MooTools. Las siguientes páginas tratarán de lo que podemos hacer con el archivo "more". Empezamos por los efectos que amplian la clase Fx:

La Clase Fx.Element()



Manual de Mootools (II Efectos)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com