MooTools - Fx.Morph
Fx.Morph è una funzione fornita da MooTools. Viene utilizzato per creare una nuova interpolazione per le transizioni tra le proprietà di stile. Durante il morphing, dobbiamo selezionare l'elemento con un oggetto e quindi possiamo applicare ad esso diverse funzioni. È inoltre necessario associare l'elemento con un'interpolazione appena creata.
Prendiamo un esempio che fornisce tre pulsanti su una pagina web. Il primo è il fileSETpulsante che crea un elemento con proprietà di stile come altezza, larghezza e colore. Il secondo è il fileMORPHpulsante che modifica le proprietà di stile di un elemento. Il terzo è ilRESETpulsante che modifica tutte le impostazioni nella posizione iniziale. Dai un'occhiata al seguente codice.
Esempio
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement);
$('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject));
$('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>Riceverai il seguente output: