Tutorial MooTools pasul 12 Fx Morph

Astazi vom explora in continuare sectiunea Fx a bibliotecii, si vom invata sa folosim Fx.Morph care ne ajuta sa aplicam tween pentru mai multe proprietati CSS.

Crearea unui nou Fx.Morph

Initierea unui nou "morph" seamana foarte mult cu crearea unui nou tween doar ca trebuie luate in considerare mai multe proprietati CSS:

//pentru inceput sa initiem o variabila cu elementul nostru
var morphElement = $('morph_element');
//apoi, cream morph
var morphObject = new Fx.Morph(morphElement);
//acum cream proprietatile CSS la fel ca la Fx.tween
//doar ca acum putem seta mai multe proprietati CSS
morphObject.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
//putem porni morph la fel ca tween
//doar ca instantiem mai multe proprietati CSS
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});

Astfel, am creat, setat si pornit un 'morph'. Pentru a seta totul in regula, trebuie mai intai sa ne cream variabilele, sa separam functiile si sa cream cateva evenimente pentru a controla intreaga aplicatie.

var morphSet = function(){
//putem seta proprietatile CSS asemanator cu Fx.Tween
//setam mai multe proprietati CSS
this.set({
'width': 200,
'height': 200,
'background-color': '#fff'
});
}

var morphStart = function(){
//pornim morph la fel ca tween
//instantiem mai multe proprietati CSS
this.start({
'width': 400,
'height': 400,
'background-color': '#000'
});
}

var morphReset = function(){
//setam valorile de inceput
this.set({
'width': 0,
'height': 0,
'background-color': '#fff'
});
}
window.addEvent('domready', function() {
//cream o variabila cu elementul nostru
var morphElement = $('morph_element');
//se creaa morph-ul
var morphObject = new Fx.Morph(morphElement);
//adaugam evenimentul click unui buton
//legam morphObject de functie
//pentru a ne permite sa folosim 'this'
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});

Mai jos avem partea html pentru butoane:



Cam atat pentru astazi. In articolele viitoare, vom vorbi in continuare despre efectele tween si morph, despre optiunile si evenimentele pe care acestea le accepta.Pentru mai multe detalii despre efectul Morph, cititi tutorialele de pe site-ul MooTools.

Alex B.

2Comentarii la "Tutorial MooTools pasul 12 Fx Morph"

  1. tudorache adrian spune:

  2. Andrei spune:

    Foarte bun acest tutorial si bine explicat multumim

Adauga Comentariu

Mesaj

Trimite