Dziudek's jogger

Od omówienia pliku fx.base.js zaczynam opis sekcji Effects. Sekcja ta zawiera 8 plików - wszystkie z prefiksem "Fx" - zawierają one metody do animowania elementów - zarówno pojedynczych jak i kilku naraz.

Na czym w ogóle polegają animacje z użyciem mootools ? Na płynnej zmianie określonych właściwości CSS danego elementu. Ważne jest tutaj słowo "płynnej", ponieważ same właściwości CSS potrafimy już zmieniać, ale tylko skokowo - teraz będziemy mogli trochę bardziej "ożywić" te zmiany wyglądu...

Klasa Fx.Base to podstawa animacji w mootools - opierają się na niej pozostałe pliki z sekcji Effects. Sama klasa posiada 3 metody, 5 opcji i własne zdarzenia. Oczywiście dla nas najważniejsze są metody i 2 opcje, które mają kluczowy wpływ na wygląd animacji. Opis klasy Fx.Base będzie się składał tylko z części teoretycznej, ponieważ jest ona tylko rdzeniem silnika animacji w mootools - same animacje można tworzyć dopiero z użyciem klas Fx.Style, Fx.Styles itd. Niemniej jednak teoretyczne podstawy są niezbędne do używania wspomnianych klas.

Zatem w tej części kursu zapoznamy się pokrótce z opcjami, zdarzeniami i metodami klasy Fx.Base. Znajdą one zastosowanie w kolejnych częściach kursu...

Opcje klasy Fx.Base:

• transition - opcja ta decyduje o wyglądzie animacji. Mootools posiada kilkadziesiąt wzorów według, których przebiegają animacje - wszystkie znajdują się w pliku Fx.Transitions.
• duration - w tej opcji podajemy czas trwania animacji w ms. Domyślny czas trwania animacji to 500ms.
• unit - jednostka używana w animacji - domyślnie jest to 'px', ale możemy także używać jednostek 'em' i '%'.
• wait - wartość logiczna określająca czy dana animacja może być uruchomiona przed zakończeniem poprzedniej opartej o ten sam obiekt.
• fps - ilość klatek na sekundę w animacji - im mniejsza wartość tym animacja jest mniej płynna. Domyślna wartość to 50.

Zdarzenia klasy Fx.Base:

• onStart - zdarzenie występujące przy rozpoczęciu animacji (metoda start).
• onComplete - zdarzenie występujące po zakończeniu animacji.
• onCancel - zdarzenie, które ma miejsce przy zatrzymaniu animacji w trakcie jej trwania - metodą stop.

Metody klasy Fx.Base:

• set - metoda ta pobiera jeden argument - wartość jaka ma być ustawiona dla danej właściwości stylu elementu, bez animacji.
• start - ta metoda służy do uruchomienia animacji i zmiany wartości danej właściwości stylu w podanym jako atrybuty tej metody przedziale. Pierwszy argument to oczywiście wartość początkowa, a drugi argument to końcowa wartość danej właściwości stylu. Wraz z użyciem tej metody występuje zdarzenie onStart, a po zakończeniu działania zdarzenie onComplete (o ile wcześniej nie zostanie użyta metoda stop).
• stop - ostania metoda klasy Fx.Base służąca do zatrzymywania animacji. Wraz z jej użyciem pojawia się zdarzenie onCancel.

Powyższe wiadomości tak jak już pisałem, znajdą zastosowanie przy omawianiu plików Fx.Style, Fx.Styles itd.