Le classi Fx.Tween ed Fx.Morph studiate nella precedente lezione permettono di creare animazioni personalizzate di base, ma non sono le uniche sottoclassi del costruttore Fx. Tra i numerosi plug-in ufficiali, infatti, troviamo le classi Fx.Slide, Fx.Scroll ed Fx.Elements. In questa lezione vedremo come utilizzare le funzionalità offerte da queste ultime e come metterle in pratica.
Fx.Slide
La classe Fx.Slide, come indica il nome, permette di creare un effetto di "sliding" su di un elemento. Possiamo fare scivolare il nostro elemento in entrata, in uscita oppure a seconda del suo stato tramite la keyword 'toggle'. Vediamo un semplice esempio:
// creiamo l'istanza
var slide = new Fx.Slide('myElement')
// slide "out"
slide.slideOut();
// slide "in"
slide.slideIn();
// slide "toggle"
slide.toggle();
Anche per il costruttore Fx.Slide, cosi come per Fx.Tween ed Fx.Morph, abbiamo a disposizione un metodo della classe Element che funge da shortcut: il metodo slide. Possiamo passare una stringa come argomento per indicare il comportamento dello 'sliding':
// settiamo le opzioni per la nostra istanza
el.set('slide', {duration: 4000, link: 'cancel'});
'slide' hide
el.slide('hide');
'slide' hide
el.slide('in');
'slide' out
el.slide('out');
'slide' toggle
el.slide('toggle');
Ecco la demo che mette in pratica le animazioni di "sliding": premendo sul primo pulsante si azionerà lo "slide out", mentre con il secondo avremo lo "slide toggle".
Fx.Scroll
La classe Fx.Scroll permette di effettuare un effetto di "scrolling" agendo su di un elemento che possiede un "oveflow", ovvero un contenuto nascosto o a scorrimento. Tra gli elementi sulla quale possiamo applicare l'effetto scroll troviamo ovviamente anche l'oggetto window. Ecco un esempio dove applicchiamo l'effetto sull'elemento con id 'myElement':
// creiamo l'istanza
var scroll = new Fx.Scroll('myElement');
// scrolla alle coordinate 20 (x) e 400 (y)
scroll.start(20, 400);
// scrolla l'elemento rispettivamente al suo massimo valore 'top' e 'right'
scroll.toTop();
scroll.toRight();
Un esempio di effetto "scrolling" è in azione in questa demo.
Fx.Elements
La classe Fx.Elements è leggermente differente da quelle viste finora, dato che, come indica il nome, permette di applicare l'effetto ad una collezione di elementi contemporaneamente. Per azionare l'animazione occorre passare al metodo start un oggetto le cui keywords devono essere rappresentate da numeri in formato stringa, ognuna indicante un determinato elemento (ad esempio, l'elemento con indice '0' sarà la prima ancora della pagina se i nostri elementi sono le seguenti ancore: $$('a')). Al costruttore devono essere passati rispettivamente la collezione di elementi e le opzioni. Vediamone ora la rappresentazione pratica:
// la nostra istanza agirà sui div presenti nell'elemento con id 'main'
var fx = new Fx.Elements($$('#main div'), {
onComplete: function(){
alert('The animation is completed');
}
});
// azioniamo l'effetto
fx.start({
'0': {
'height': [200, 300],
'opacity': [0,1]
},
'1': {
'width': [200, 300],
'color': ['#ff0000', '#ff00ff']
}
});
Se il nostro HTML è formato nel seguente modo:
<div id="main"> <div> first </div> <div> second </div> </div>
al primo div verranno modificati i valori delle proprietà 'height' e 'opacity', mentre al secondo verranno alterate le proprietà 'width' e 'color'.
In questa demo è possibile provare la classe Fx.Elements ed animare una serie di elementi di tipo 'div'.
Conclusione
In questa sezione dedicata agli effetti abbiamo imparato come utilizzare tutti i costrutti che MooTools ci offre per creare animazioni di ultima generazione. Ovviamenteè possibile utilizzare queste classi per creare ulteriori sottoclassi ancora più specifiche, proprio come accade con le numerose classi Fx personalizzate che ho inserito nella libreria moo.rd.