Dziudek's jogger

Jak już pisałem we wstępie - plik moo.fx.js jest "sercem" całej biblioteki moo.fx . Zawiera on 4 klasy:

• Fx.Base - klasa bazowa biblioteki,
• Fx.Style - klasa pozwalająca zmieniać właściwość elementu,
• Fx.Styles - klasa pozwalająca zmieniać kilka właściwości elementu naraz,
• Fx.Transitions - klasa zawierająca podstawowe sposoby zmiany właściwości obiektów.

Fx.Base

To jak sama nazwa wskazuje, klasa bazowa biblioteki. Opcje, które są w niej dostępne, mamy do dyspozycji także we wszystkich innych klasach biblioteki moo.fx. A oto lista tych opcji:

• duration Ta opcja przechowuje czas trwania danego efektu podany w milisekundach. Domyślnie jest ustawione pół sekundy (500ms).
• transition Dzięki tej opcji możemy wybrać rodzaj sposobu zmiany właściwości obiektu z dostępnych w klasie Fx.Transitions. Domyślną transformacją jest Fx.Transitions.sineInOut .
• onStart Opcja ta definiuje funkcję uruchamianą wraz z rozpoczęciem wykonywania danego efektu. Domyślnie nie ma ustawionej funkcji.
• onComplete Tą opcję wykorzystujemy wtedy gdy chcemy wykonać jakąś funkcję po zakończeniu wykonywania danego efektu. Podobnie jak w wypadku onStart, domyślnie nie ma ustawionej funkcji.
• unit Jednostka używana przy efektach. Do dyspozycji mamy domyślnie ustawioną jednostkę "px", dostępne są także "em" i "%".
• fps Opcja ta definiuje ilość klatek na sekundę przy wyświetlaniu danego efektu. Domyślną wartością jest 50 klatek na sekundę.

Dzięki Fx.Base mamy też do dyspozycji kilka operacji:

• set(wartość_parametru) - służy do ustawiania wartości danego parametru bez wykonywania efektu,
• custom (wartość_początkowa, wartość_końcowa) - ma działanie podobne do funkcji _start() - występuje zamiast niej w kilku klasach,
• hide() - ukrywa dany element,
• _start(wartość_początkowa, wartość_końcowa) - rozpoczyna wykonywanie danego efektu, zmieniając wartość danej właściwości od wartości początkowej do wartości końcowej.

Fx.Style

Poznaliśmy funkcjonalność klasy bazowej, pora przejść do klas, które umożliwią nam operacje na elementach strony. W pliku moo.fx.js znajdują się dwie takie klasy – Fx.Style i Fx.Styles. Klasa Fx.Style pozwala na zmianę danej właściwości elementu. Ponieważ bazuje ona na klasie Fx.Base, dlatego mamy dostęp do jej funkcjonalności przy tworzeniu obiektów bazujących na Fx.Style. Klasa Fx.Style pozwala nam na zmianę wartości właściwości CSS danego elementu. Warto tutaj zwrócić uwagę na fakt, że zmiana wartości dotyczy tylko tych właściwości CSS, które możemy wyrazić za pomocą liczb. Jeśli chcemy zmienić np. właściwość float elementu to skorzystajmy lepiej z zapisu:

$(‘id_elementu’).style.float = ‘wartość’;

Aby stworzyć możliwość dokonania modyfikacji danej właściwości tworzymy nowy obiekt Fx.Style:

efekt = new Fx.Style(‘identyfikator_elementu’, ’właściwość_do_edytowania’, {opcje_dodatkowe});

Zatem jeśli chcielibyśmy móc edytować szerokość naszego elementu posiadającego identyfikator "test", zapiszemy:

efekt = new Fx.Style(‘test’,’height’);

Warto tutaj zwrócić uwagę, że poza właściwościami CSS możemy też edytować przezroczystość danego elementu wpisując w miejsce właściwości do edytowania wartość "opacity" (dzięki temu nie trzeba tworzyć dwóch skryptów – dla IE i nowoczesnych przeglądarek).

Podstawowe modyfikacje

Zacznijmy więc od modyfikacji elementu najprostszego typu – czyli po prostu bezpośredniej zmiany wartości danej właściwości elementu – wykorzystamy do tego celu operację set() znaną nam już z klasy Fx.Base : PRZYKŁAD 1

efekt.set(300);

powyższy kod sprawi, że po jego wywołaniu wysokość elementu posiadającego identyfikator "test", zmieni się do 300 pikseli. A co jeśli byśmy chcieli zmienić wysokość na 50% ? Ponieważ domyślną jednostką są piksele, musimy zmienić jednostki na procenty wprowadzając do naszego obiektu opcję "unit":

efekt = new Fx.Style(‘test’,’height’,{unit: ‘%’});

wtedy wywołanie:

efekt.set(50);

da następujący efekt: PRZYKŁAD 2 Zanim przejdziemy do płynnej modyfikacji właściwości elementów, zapoznajmy się jeszcze z operacją hide(). Jej wywołanie jest oczywiście analogiczne do wywołania operacji set() z tym, że funkcja hide()nie pobiera żadnych argumentów. Zatem wywołanie kodu:

efekt.hide();

spowoduje ukrycie naszego elementu. PRZYKŁAD 3

Płynne modyfikacje

Przejdźmy teraz do tego co nas najbardziej interesuje w możliwościach moo.fx – do eleganckich płynnych modyfikacji właściwości elementu. Będziemy tutaj dalej bazowali na modyfikowaniu wysokości elementu: stwórzmy odpowiedni obiekt:

efekt = new Fx.Style(‘test’,’height’);

aby sprawić, że wysokość naszego elementu zwiększy się płynnie od 100 pikseli do 300 pikseli wykorzystamy funkcję _start():

efekt._start(100,300);

PRZYKŁAD 4 No dobrze, a teraz sprawmy, aby wysokość naszego elementu zwiększała się wolniej niż wynika to z wartości domyślnej – dodajmy naszemu obiektowi opcję "duration" z odpowiednią wartością (ja ustawiłem 2 sekundy czyli 2000 milisekund):

efekt = new Fx.Style(‘test’,’height’,{duration: 2000});

PRZYKŁAD 5 Czasami będziemy chcieli by przy rozpoczęciu lub zakończeniu wykonywania animacji, coś się wydarzyło – w tym celu możemy skorzystać z opcji "onStart" i "onComplete". Przykładowo aby wywołać alert przy zakończeniu animacji musimy nasz obiekt zmodyfikować do poniższej postaci:

efekt = new Fx.Style(‘test’,’width’,{duration: 2000, onComplete: function(){alert(‘No i animacja się skończyła :(’)}});

PRZYKŁAD 6 Jak widać kod do wykonania przy rozpoczęciu/zakończeniu animacji zapisujemy pomiędzy function(){ ,a }. Pozostały nam jeszcze dwie ważne opcje do omówienia – "fps" i "transition". Opcja fps pozwala nam na zmniejszenie, lub też zwiększenie płynności animacji:

efekt_plynny = new Fx.Style(‘test_1’,’opacity’,{duration: 5000, fps: 80 });

efekt_nie_plynny = new Fx.Style(‘test_2’,’opacity’,{duration: 5000, fps: 1}); PRZYKŁAD 7

Fx.Transitions

Opcja "transition" pozwala nam na wybór metody modyfikacji naszego elementu. W pliku moo.fx.js mamy zawartą uproszczoną wersję tej klasy, oferującą dwa sposoby modyfikacji – liniowy i „sinusowy”. Klasę Fx.Transitions dokładniej opisałem w oddzielnym dziale. Zajmijmy się natomiast dwoma dostępnymi w pliku moo.fx.js sposobami modyfikacji elementu. Najlepiej chyba zilustruje to prosty przykład, tak więc stwórzmy dwa efekty wykorzystujące obie metody modyfikacji elementu: Efekt wykorzystujący modyfikację liniową:

efekt_liniowy = new Fx.Style(‘test’,’height’,{duration: 5000, transition: Fx.Transitions.linear });

Efekt wykorzystujący modyfikację „sinusową”:

efekt_sinusowy = new Fx.Style(‘test’,’height’,{duration: 5000, transition: Fx.Transitions.sineInOut });

Aby je porównać w działaniu, wywołajmy je naraz i tak by efekt końcowy był taki sam:

efekt_liniowy._start(24,300); efekt_sinusowy._start(24,300);

PRZYKŁAD 8 Jak widać różnica polega na tym, że efekt liniowy powoduje zwiększanie wysokości elementu ze stałą szybkością, natomiast w wypadku efektu „sinusowego” prędkość zwiększania wysokości rośnie do połowy animacji, a następnie już do końca animacji maleje.

Fx.Styles

Do tej pory z użyciem klasy Fx.Style, mogliśmy zmieniać wartość jednej właściwości elementu przy wykorzystaniu jednego obiektu. Oczywiście moglibyśmy zmienić dwie wartości naraz, wywołując dwa efekty:

efekt_1 = new Fx.Style(‘test’,’height’,{duration: 2000}); efekt_2 = new Fx.Style(‘test’,’opacity’,{duration: 2000}); efekt_1._start(100,300); efekt_2._start(1,0);

PRZYKŁAD 9 Ale ładniej w kodzie będzie wyglądać gdy modyfikacji elementu dokonamy za pomocą jednego obiektu – do tego właśnie posłuży nam klasa Fx.Styles. Ponieważ już wszystko co znajdzie się w kodzie powinno być jasne, omówię tylko różnice tworzeniu obiektu i wywoływaniu animacji. Różnica w tworzeniu obiektu klasy Fx.Styles w stosunku do obiektu klasy Fx.Style, polega na tym, że nie podajemy przy tworzeniu obiektu właściwości jakie będziemy modyfikować. Zatem ogólny zapis przedstawia się następująco:

efekt = new Fx.Styles(‘identyfikator_elementu’,{opcje_dodatkowe}});

na przykład:

efekt = new Fx.Styles(‘test’,{duration: 5000});

Nasza informacja o właściwościach, które zamierzamy edytować znajduje się w argumentach pobieranych przez operację custom(), której używamy do operacji na wielu właściwościach naraz. Robimy to według schematu:

efekt.custom({ ‘właściwość_1’:[‘wartość_początkowa’,’wartość_końcowa’], ‘właściwość_2’:[‘wartość_początkowa’,’wartość_końcowa’], … ‘właściwość_n-ta’:[‘wartość_początkowa’,’wartość_końcowa’] });

Na przykład:

efekt.custom({ ‘height’:[100, 300], ‘opacity’:[1, 0] });

PRZYKŁAD 10 Myślę, że większych problemów ze zrozumieniem działania podstaw biblioteki moo.fx być nie powinno ;) Zapraszam do kolejnej części kursu - opisu pliku moo.fx.transitions.js