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++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 18
Visitas el mes pasado: 19
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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.
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"); }
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.
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()
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