dziudek@jabber.org
W kolejnej części kursu mootools zapoznamy się z plikiem fx.styles.js - ma on podobne zadanie jak plik fx.style.js - służy do animowania elementów. Różnica polega na tym, że za pomocą klasy Fx.Styles tworzymy efekty oparte o zmianę kilku właściwości CSS naraz. W tej części kursu zajmiemy się realizacją dwóch zadań - dodania jeszcze jednego efektu do menu z poprzedniej części kursu oraz stworzymy menu a'la fisheye znane z MacOS :)
W tej części kursu wreszcie spożytkujemy zdobyte wcześniej wiadomości z zakresu tworzenia animacji z użyciem mootools :) Zaczniemy od rzeczy prostych, a skończymy na stworzeniu menu, które dopieścimy w dwóch kolejnych częściach kursu.
Podstawę pliku fx.style.js stanowi klasa Fx.Style - służy ona do płynnej zmiany wartości jednej z właściwości CSS danego elementu. Posiada ona trzy metody:
Po zapoznaniu się z klasą Fx.Base myślę, że działania dwóch ostatnich metod nie muszę tłumaczyć, natomiast metoda hide oznacza to samo co użycie metody set z podanym argumentem o wartości 0.
To ostatni wpis o treści teoretycznej przy omawianiu grupy Effects - celowo piszę go przed wpisami o plikach fx.style.js i fx.styles.js gdyż chcę abyśmy mieli całą teorię za sobą :)
Ten wpis to właściwie tylko krótka informacja, którą piszę tylko i wyłącznie z powodu zachowania spójności z dokumentacją mootools ;) Otóż pliku fx.css.js nie wykorzystamy osobiście - jest on jedynie wykorzystywany przez pliki fx.style.js , fx.styles.js i fx.elements.js - sam w sobie nie wymaga dokumentacji :)
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...