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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
Ültima modificación: 29-01-2016.
Visitas este mes: 16
Visitas el mes pasado: 39
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.
Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.
MooTools2 (III)
Opciones y métodos de Fx
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.
- property : Propiedad CSS. Como valor pasaremos el nombre de la propiedad entre comillas. Ej.: property: "color".
- fps : Fotogramas por segundo. Es el número de imágenes por segundo que se generarán en la transición. Como valor pasamos un número que indicará los fotogramas por segundo. El valor por defecto es 50.
- frames : Fotogramas. El número de fotogramas de la animación completa. En su defecto se calcula mediante la opción fps.
- duration : Duración del efecto. Como valor podemos poner un número que expresa los milisegundos que dura el efecto. También podemos poner las palabras "short" (250 ms), "normal" (500 ms) o "slow" (1000 ms). El valor por defecto es 500.
- unit : Unidad de medida. Como valor pondremos la unidad de medida entre comillas ("px", "em", "%", etc). La unidad por defecto es el pixel "px".
- link : Indica, en caso de haber más de un efecto, cómo se produce la sucesión de efectos. sus posibles valores son:
- "ignore" : Es el valor por defecto, cada efecto espera a que se produzca el anterior para ejecutarse.
- "cancel" : El efecto no espera a los anteriores y se ejecuta en cuanto es llamado, anulando a los que estaban en espera.
- "chain" : El efecto pasa al final de una cadena de efectos, en el caso de que éstos ya se esten ejecutando, para producirse el último.
- transition : Indica el modo en que se produce la transición. Podemos pasar los siguientes valores: "linear" : la velocidad de la transición es constante. Los demás valores pueden tener diferentes velocidades al principio, ,medio o final de la transición, y efectos de rebote al inicio o al final. Ello se indica con los sufijos :in (al principio) y :out (al final). por ejemplo "quad:in", "quad:out" o también "quad:in:out". Además del valor "quad" tenemos también los valores "back", "bounce", "elastic" y sine, todos ellos con los sufijos :in y :out. El valor por defecto es "sine:in:out".
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:
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()
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com