Tutorial MooTools pasul 11 Fx Tween II

Astazi vom vorbi in continuare despre tween-uri, mai exact cum putem crea un tween nou, si cum ii putem adauga stiluri si efecte.

Crearea unui tween

Desi exista mai multe functii MooTools ptr acest acest fapt, care scurteaza portiunile de cod folosite, daca doresti sa adaugi mai multa flexibilitate si control site-ului tau, poti crea un nou tween. Se foloseste "new" pentru a crea o noua instanta a Fx.tween:

window.addEvent('domready', function() {
        //la inceput ii atribuim unei variabile elementul asupra caruia vrem sa aplicam tween
        var elementTween = $('newTween');
 
       //cream un nou eveniment tween, si ii atribuim acest element ca parametru
       var nouTween = new Fx.Tween(elementTween);
});

CSS pentru tween-uri

Dupa ce am creat un tween nou pentru un element, ii putem adauga proprietati CSS cu ajutorul functiei .set();. Acest lucru are loc imediat si functioneaza ca si functia setStyle();.

var newTweenSet = function() {
        //observati folosirea lui "this"
	this.set('width', '200px');
}

Incercam sa separam functiile in afara evenimentului domready, dar in acest caz vom crea tween-ul in interior si ne vom referi la el in afara

.bind();

Cu aceasta functie putem egala un parametru cu "this" pentru o anumita functie

//la inceput adaugam un eveniment "click" butonului de mai devreme
//apoi, in loc doar sa apelam functia, ii adaugam .bind()
//apoi, i plasam ce dorim functiei
//in interiorul functiei "newTweenSet," "this" se va referi la "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

Daca privim functia de mai sus, acum "this" e echivalent cu "newTween". In continuare, sa incercam sa afisam totul legat:

//pentru inceput, scriem functia noastra
var newTweenSet = function() {
        //deoarece am folosit bind, "this" acum se refera la "newTween"
        //deci, de fapt spunem newTween.set('width', '300px')
	this.set('width', '300px');
}
 
window.addEvent('domready', function() {
        //plasam elementul intr-o variabila
	var newTweenElement = $('newTween');
 
        //apoi cream un nou FX.Tween si il adaugam propriei variabile
        var newTween = new Fx.Tween(newTweenElement);
 
        //apoi adaugam un nou eveniment si folosim bind() pentru newTween si newTweenSet
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});

Cum sa pornim un efect tween

Acum ca am setat deja obiectul pentru tween, functia este in afara evenimentului domready si am invatat cum sa setam un parametru CSS, sa trecem la efectul propriu-zis. Pornirea unui tween este foarte simpla si asemanatoare cu cea de la fade();, astfel, sunt doua modalitati de a folosi start(); :

  1. Aplicam tween valorii unei proprietati de la o valoare existenta catre alta
  2. Setam o valoare a proprietatii si apoi aplicam tween
//acum aplicam tween de la o valoare existenta cu latimea de 300px
newTween.start('width', '300px');
 
//acum vom seta intai valoarea la 100px, apoi aplicam tween catre 300px
newTween.start('width', '100px', '300px');

Mai sunt multe de discutat despre tween, de exemplu daca vrem sa il aplicam pentru mai multe proprietati CSS in acelasi timp. Astfel, vom folosi morph();, dar despre aceste lucruri vom vorbi in tutorialul urmator.Pentru mai multe detalii despre efectul Tween, cititi tutorialele de pe site-ul MooTools.

Alex B.

1Comentarii la "Tutorial MooTools pasul 11 Fx Tween II"

  1. bonousdox spune:

    Da, probabil, de aceea este

Adauga Comentariu

Mesaj

Trimite