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: 33

Visitas el mes pasado: 54

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 (II)

La clase Fx.Tween

imagen mootools

La clase Fx

Para crear efectos especiales algo más complejos que los vistos en la página anterior, utilizaremos la clase Fx.

Esta clase tiene una serie de subclases que son las que realmente utilizaremos, sin embargo todas ellas comparten muchos métodos y propiedades comunes, por lo que lo que veamos en esta página para la clase fx.Tween vale en gran medida para otras clases Fx.

Para utilizar la clase Fx.Tween basta con tener cargado el archivo "core" de mootools.


Instanciar objetos de Fx.Tween

La clase Fx.Tween Es una subclase de la clase FX, y sirve para realizar efectos con las propiedades CSS de los elementos de la página. No sólo podemos cambiar el valor de una propiedad CSS, sino que ese cambio (transición) se realiza de forma gradual. Durante el cambio podemos controlar variables como la duración, el número de fotogramas o imágenes por segundo de la transición, y otros parámetros que veremos más adelante.

Para trabajar un elemento desde la clase Fx.Tween lo primero que haremos será instanciar o crear un nuevo objeto de la clase Fx. Este objeto se refiere siempre a un elemento de la página sobre el que queremos aplicar el efecto, por lo que como argumento pasamos el "id" del elemento:

capaFx=new Fx.Tween("capa",{<opciones>})

Como segundo argumento pasamos una serie de opciones que indican tanto la propiedad CSS, como las características del efecto.

Veamos un ejemplo: Tenemos un elemento en el html que queremos aplicarle un efecto:

<div id="c1"></div>

Para poder realizar el efecto ponemos también un botón al que aplicaremos un evento "click":

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

A este elemento le aplicamos previamente un código CSS:

#c1 { width:80%; height: 100px; margin: 5px; background-color: blue; }

Ahora creamos sobre él un objeto Fx.Tween():

c1Fx=new Fx.Tween("c1",{
property:"width",
duration:4000,
fps:50,
transition:"elastic:out"
});

Hemos creado un objeto Fx.Tween(). Como primer argumento le hemos pasado el id del elemento sobre el que aplicaremos el efecto. Aquí hemos escrito "c1", aunque también podríamos haberlo escrito como $("c1").

El segundo argumento son una serie de opciones que escribimos entre llaves: Aquí hemos puesto la propiedad (property), duración (duration), fotogramas por segundo (fps) y tipo de transición (transition). Cada una de ellas consta de un par nombre:valor (separamos el nombre del valor por el signo de dos puntos). Las opciones se separan entre sí por comas.

Más adelante veremos qué opciones podemos poner y qué valores pueden tener.

Siguiendo con el ejemplo, ahora tenemos que hacer que el efecto se ejecute al pulsar el botón. Para ello usamos el método .start() aplicada al objeto Fx.Tween().

c1Fx.start("30");

Donde c1Fx es el objeto Fx.Tween que hemos creado anteriormente, y el argumento "30" indica el estado final de la propiedad CSS (podriamos haber puesto también "30px").

Sin embargo cómo nosotros hemos querido que el efecto se produzca la pulsar un botón, el código que deberemos poner es el siguiente:

$("boton1").addEvent("click",function(){
c1Fx.start("30");
});

Este es el botón y a la derecha podemos ver el elemento sobre el que hacemos el efecto.

Para completar el ejemplo hemos puesto un segundo botón, que también con un efecto similar, devuelve el elemento a su estado original:

El código utilizado para este segundo botón es similar al del primero, en primer lugar hemos puesto el siguiente html:

<button id="boton2">Efecto 2</button>

En el código javascript/mootools creamos un segundo objeto FxTween, similar al primero. El código del segundo botón tambíen es similar al del primero:

c1Fx2=new Fx.Tween("c1",{
   property:"width",
   duration:4000,
   fps:50,
   unit:"%",
   transition:"elastic:out"
   });
$("boton2").addEvent("click",function(){
   c1Fx2.start("80")
   });

Vemos en este codigo como novedad el uso de la opción unit, que expresa el tipo de unidades que utilizamos (en este caso porcentaje: "%").






En la siguiente página veremos las opciones y los métodos que podemos usar no sólo con Fx.Tween, sino también con otros objetos de Fx.

Opciones y métodos de FX



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