Tutorial MooTools pasul 13 Optiuni si Evenimente Fx

Dupa ce am explicat in capitolele precedente cum functioneaza Fx.Tween si Fx.Morph, astazi vom incheia discutia despre Fx, vorbind putin despre optiunile si evenimentele legate de acesta

Optiunile Fx

Optiunile urmatoare sunt acceptate atat de Fx.Tween cat si de Fx.Morph. Sunt foarte usor de implementat si ofera mai mult control asupra efectelor. Pentru a defini aceste efecte, folositi sintaxa urmatoare:

	//definiti-va propriul tween sau morph
	//definiti optiunile voastre intre { }
	var morphObject = new Fx.Morph(morphElement, {
	//la inceput, numele optiunii,
	//urmat de un :
	//apoi treceti valoarea optiunii
	duration: 'long',
	transition: 'sine:in'
	});
	

fps (frame-uri per secunda)

Aceasta optiune determina numarul de frameuri per secunda ale unei animatii. Vloarea default este 50 si accepta numere si variabile ce contin numere.

	//definiti-va propriul tween sau morph
	//definiti optiunile voastre intre { }
	var morphObject = new Fx.Morph(morphElement, {
	fps: 60
	});
	//sau
	var framesPerSecond = 60;
	
	var tweenObject = new Fx.Tween(tweenElement, {
	fps: framesPerSecond
	});
	

unit

Aceasta optiune defineste numarul de unitati. De exemplu, doriti ca 100 sa reprezinte pixeli, procente, sau ems?

	//definiti-va propriul tween sau morph
	//definiti optiunile voastre intre { }
	var morphObject = new Fx.Morph(morphElement, {
	unit: 'px'
	});
	

link

Link va ofera o modalitate de a gestiona apeluri multiple pentru a incepe un efect.De exemplu, daca aveti un efect de tip mouseover, nu doriti sa inceapa de fiecare data cand utilizatorul trece cu mouse-ul peste element?Link are trei elemente:

  • - ignore (default) - ignora toate apelurile de a incepe pana cand efectul este finalizat
  • - cancel - anuleaza efectul in curs daca un alt apel este realizat, oferind avantajul noului apel.
  • - chain - orice apeluri ce trebuie sa porneasca in timp ce efectul este in desfasurare vor fi introduse intr-o coada si vor avea loc imediat ce efectul curent s-a incheiat, unul dupa altul.
	//definiti-va propriul tween sau morph
	//definiti optiunile voastre intre { }
	//puis définissez vos options entre les { }
	var morphObject = new Fx.Morph(morphElement, {
	 link: 'chain'
	});
	

duration

Duration permite definirea duratei animatiei. Aveti posibilitatea sa introduceti un numar (in milisecunde), o variabila care contine un numar, sau una dintre aceste comenzi rapide:

  • - ’short’ = 250ms
  • - ‘normal’ = 500ms (default)
  • - ‘long’ = 1000ms
	//definiti-va propriul tween sau morph
	//definiti optiunile voastre intre { }
	var morphObject = new Fx.Morph(morphElement, {
	 duration: 'long';
	});
	
	//sau
	var morphObject = new Fx.Morph(morphElement, {
	 duration: 1000
	});
	

transition

Ultima optiune, transition, ofera posibilitatea de determinare a tipului tranzitiei.De exemplu, daca va fi o tranzitie lina, sau va incepe incet si va accelera spre sfarsit.

	var tweenObject = new Fx.Tween(tweenElement, {
	transition: 'quad:in'
	});
	

In nucleul bibliotecii MooTools exista 30 de tipuri de tranzitii disponibile, grupate in 10 categorii: quad, cubic, quart, quint, expo, circ, sine, back, bounce si elastic. Fiecare dintre aceste categorii are 3 optiuni: Ease In, Ease Out si Ease In Out.

Evenimente Fx

  • - onStart - se executa cand efectul incepe
  • - onCancel - se executa cand efectul este anulat
  • - onComplete - se executa cand efectul a fost finalizat
  • - onChainComplete - se executa cand toate efectele din coada au fost finalizate

Cand construiti un Tween sau un Morph, puteti seta unul din aceste evenimente cu o optiune, cu exceptia faptului ca nu se ia o valoare, ci o functie:

	//la inceput, trecem noul Fx.Tween intr-o variabila
	//apoi, definim elementul care va face obiectul unui tween
	quadIn = new Fx.Tween(quadIn, {
	//cateva optiuni aici
	link: 'cancel',
	transition: 'quad:in',
	
	//urmeaza un eveniment:
	onStart: function(passes_tween_element){
	//acestui eveniment i se va aplica un obiect tween
	//aici aplicam efectul 'highlight'
	//cand incepe animatia
	passes_tween_element.highlight('#C54641');
	},
	
	//remarcati ca virgulele sunt intotdeauna prezente
	//intre fiecare optiune si eveniment
	//dar nu exista nici o virgula dupa ultimul eveniment sau optiune
	onComplete: function(passes_tween_element){
	//aici aplicam un efect highlight la final
	passes_tween_element.highlight('#C54641');
	}
	});

Cam atat pentru astazi. In articolele viitoare, vom vorbi in continuare despre clasa Drag.Move, expresii regulare sau perioade.Pentru mai multe detalii despre optiunile si evenimentele Fx, cititi tutorialele de pe site-ul MooTools.

Alex B.

0Comentarii la "Tutorial MooTools pasul 13 Optiuni si Evenimente Fx"

Adauga Comentariu

Mesaj

Trimite