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

Visitas el mes pasado: 38

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

Opciones y métodos de Fx

imagen mootools

Introducción

En la página anterior hemos visto la clase Fx.Tween(). Al crear un objeto de esta clase poníamos como segundo argumento una serie de opciones. Explicaremos en esta página cuáles son estas opciones, las cuales forman parte del objeto "Options" de mootools.

También vimos que había que usar el método .start() para ejecutar el efecto. Explicaremos aquí este método, y veremos también otros métodos que podemos usar con la clase Fx.


Opciones de Fx

Estas son las opciones del objeto "Options" de mootools, y que podemos incluir en el segundo parámetro de la clase Fx.Tween y los valores que podemos darles. Estas mismas opciones valen también para otras subclases de Fx.


Ejemplo con transiciones

Para hacernos una idea de cuales son los efectos de las transiciones hemos hecho aquí un ejemplo en el que mostramos las transiciones más usadas. Veamos primero el ejemplo en marcha:

El elemento de color se expande (aumentamos la propiedad width) según el tipo de transición. El efecto dura 3 segundos, y dos segundos después vuelve a su estado original.

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...


Los códigos que hemos utilizado para este ejemplo son los siguientes:

En HTML:

<div id="ver1"><div id="p1"></div></div>
<p style="line-height: 2.5em;"><input type="button" value="linear" onclick="transicion(0)"/> ... 
<input type="button" value="quad:in" onclick="transicion(1)"/> ... 
<input type="button" value="quad:out" onclick="transicion(2)"/> ... 
<input type="button" value="quad:in:out" onclick="transicion(3)"/> ... 
<input type="button" value="back:in" onclick="transicion(4)"/> ... 
<input type="button" value="back:out" onclick="transicion(5)"/> ... 
<input type="button" value="back:in:out" onclick="transicion(6)"/> ... 
<input type="button" value="bounce:in" onclick="transicion(7)"/> ... 
<input type="button" value="bounce:out" onclick="transicion(8)"/> ... 
<input type="button" value="bounce:in:out" onclick="transicion(9)"/> ... 
<input type="button" value="elastic:in" onclick="transicion(10)"/> ... 
<input type="button" value="elastic:out" onclick="transicion(11)"/> ... 
<input type="button" value="elastic:in:out" onclick="transicion(12)"/> ... 
<input type="button" value="sine:in" onclick="transicion(13)"/> ... 
<input type="button" value="sine:out" onclick="transicion(14)"/> ... 
<input type="button" value="sine:in:out" onclick="transicion(15)"/> ... 
</p>

En CSS

#ver1 { border: 2px solid navy; padding: 10px; margin: 5px 3em; color: navy; font: normal 16px verdana; }
#p1 { width:100px; height: 25px; margin: 5px; background-color: lime;}

En javascript/mootools

transiciones=new Array("linear","quad:in","quad:out","quad:in:out",
     "back:in","back:out","back:in:out",
     "bounce:in","bounce:out","bounce:in:out",
     "elastic:in","elastic:out","elastic:in:out",
     "sine:in","sine:out","sine:in:out" );
function transicion(num){
     p1Fx=new Fx.Tween("p1",{
       property: "width",
       duration: 3000,
       transition: transiciones[num]
       });
     p1Fx.start("500");
     restaurar.delay(5000)
     }
function restaurar(){
     $("p1").setStyle("width","100px");
     }


Más sobre transiciones

Además de los valores vistos hasta ahora también podemos usar los valores cubic, quart,quint, pow, expo, circle todos ellos con los sufijos :in o/y :out.

Todos los valores de las transiciones están relacionados con funciones matemáticas, y su representación con vectores, por ejemplo pow está relacionado con la potenciación, circle está relacionado con la función del círculo, etc.

Para hacernos una idea de cual es el efecto que tienen estas transiciones en los elementos, podemos ver una página de ejemplo, en la que indicamos todos los valores posibles de las transiciones, pulsando en el siguiente enlace:

Todas las transiciones


El código que hemos usado para realizar la página de ejemplo es muy similar al usado en el ejemplo visto anteriormente.

También tenemos la posibilidad de crear nuestras propias transiciones, mediante la clase Fx.Transitions(). Utilizar esta clase para crear nuestras propias transiciones requiere tener un nivel bastante avanzado de matemáticas. El ejemplo que ponemos aquí está sacado de la página oficial de mootools:

myTransition = new Fx.Transition(function(pos, x){
return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
}, 1.3);

Una vez creada la transición la incluimos entre las demás opciones:

transition: myTransition.easeOut

En lugar de poner :in, :out o :in:out, en las transiciones que creamos mediante la clase Fx.Transition() debemos poner .easeIn, easeOut o easeInOut.


Métodos de Fx

El metodo start() inicia el efecto. Los argumentos que le pasemos dependen de la subclase que estemos usando:

Con la clase Fx.Tween() debemos poner siempre como mínimo un argumento, que es el valor final de la propiedad CSS. sin embargo podemos pasar uno, dos o tres argumentos.

Si pasamos tres argumentos, estos deben ser los siguientes:

miFxTween.start("propiedadCSS","valorInicial","valorFinal");

Es decir, el primer argumento es el nombre de la propiedad, el segundo el valor inicial (antes del efecto), y el tercero el valor final (después del efecto). El hecho de poner el nombre de la propiedad, supone que al crear el objeto Fx.Tween no hemos puesto el nombre de la propiedad.

Si pasamos dos argumentos estos deben ser el valor inicial y el valor final en ese orden.

Y Tal como hemos dicho antes, si sólo se pasa un argumento, éste es el valor final, tomando como valor inicial el que ya tiene la propiedad en ese momento.

Tenemos además otros métodos de Fx, los cuales se pueden aplicar no sólo a la clase Fx.Tween sino también al resto de clases Fx.

El metodo cancel() cancela una transición en marcha.

El metodo pause() hace una pausa temporalmente en la transición.

El metodo resume() permite reanudar la transición tras hacer una pausa.

El metodo set() permite cambiar el valor final marcado en la transición, por otro indicado como argumento.






En la siguiente página seguimos viendo efectos especiales, esta vez con la clase Fx.Morph()

La clase Fx.Morph



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