Tutorial MooTools pasul 10 Fx Tween I

Am revenit cu un nou tutorial despre biblioteca MooTools. Astazi vom discuta despre Fx.tween. La fel ca si celelalte functii MooTools despre care am discutat acestea sunt foarte usor de folosit si ofera multa putere programatorului. Tween are calitatea de a oferi developerului posibilitatea de a crea efecte asemanatoare "Flash" cu ajutorul JavaScript.

In mod normal ar trebui sa incepem cu notiunile de baza, dar MooTools 1.2 ofera comenzi rapide atat de simple si atat de usor de folosit incat vom incepe de aici.
Tween-ul este o tranzitie lina intre doua valori de proprietate pentru stil. De exemplu, cu ajutorul tween-ului se poate tranzita usor un div de la "height: 200px" la "height: 300px".

//creaza o functie noua
var tweenerFunction  = function() {
        //selecteaza elementul pentru tween
        //adauga .tween
        //declara proprietatea de stil si valoarea pentru tween
	$('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
        //adauga un eveniment unui buton pentru a initia tween-ul on click
        //apeleaza functia tween
        $('tween_button').addEvent('click', tweenerFunction);
});

Html-ul pentru functia de mai sus ar arata cam asa:


 

fade();

Functia fade permite adjustarea lina a opacitatii unui element. Set-up-ul ar arata asemanator cu cel al functiei anterioare:

//creaza o functie noua
var tweenFadeFifty = function() {
       //aici cream selectorul
       //se adauga .fade
       //se declara o valoare intre 0 si 1  (0 inseamna invizibil, 1 inseamna vizibilitate maxima)
	$('tweener').fade('.5');
}
 
window.addEvent('domready', function() {
        //adauga un eveniment unui buton pentru a initia tween-ul on click
        //apeleaza functia 
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});


	
	

 

highlight();

Highlight este o comanda rapida targetata ce ofera doua functii:

  1. folosita pentru a schimba culoarea background-ului
  2. setarea imediata a unei culori de background diferie, apoi schimbarea catre alta prin tween

Acestea sunt foarte folositoare pentru crearea de feedback-ui. De exemplu,se poate evidentia un element cand ceva este selectat, sau schimba culoarea, apoi evidentia dinami, cand a fost salvata si inchisa. Exista foarte multe optiui si este usor de folosit. Pentru exemplu, putem crea doua div-uri si atasa cele doua tipuri de evidentiere:

//creaza o functie noua
var tweenHighlight = function(event) {
        //folosim event.target de la functie
        //adica, targetarea evenimentului
        //deoarece efectul se aplica aceluiasi eveniment nu trebuie sa cream din nou un selector 
        //addEvent va trece automat obiectul evenimentului ca parametrul functiei apelate
	event.target.highlight('#ffffff');
}
 
//creaza o functie noua
//adauga un parametru

var tweenHighlightChange = function(item) {
        //aici, in loc de o singura culoare, o adaugam si pe a dou dupa virgula 
        //vom seta prima culoare, apoi tranzita catre a doua
        item.target.highlight('#ffffff', '#333333');
}
 
window.addEvent('domready', function() {
	$('tweener').addEvent('mouseover', tweenHighlight);
        $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

Vom continua sa vorbim despre functia Tween in articolul urmator.Pentru mai multe detalii despre efectul tween, cititi tutorialele de pe site-ul MooTools.

Alex B.

0Comentarii la "Tutorial MooTools pasul 10 Fx Tween I"

Adauga Comentariu

Mesaj

Trimite