Dziudek's jogger

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:

• hide
• set
• start

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.

Tworzenie efektu

Stworzenie efektu jest bardzo proste - polega oczywiście na stworzeniu obiektu klasy Fx.Style:

var efekt = new Fx.Style(element,właściwość,{opcje});

Gdzie zmienna element to oczywiście element drzewa dokumentu do którego odnosi się dany efekt - uwaga musi to być pojedynczy element ! Zmienna właściwość to zmieniana właściwość CSS w czasie trwania efektu, a obiekt {opcje} zawiera pozostałe parametry znane nam już z klasy Fx.Base - nas najbardziej niedługo będą interesowały opcje transition i duration, ale o tym niedługo... Najpierw stworzymy najprostszy efekt - bez podawania żadnych dodatkowych parametrów.

Powiedzmy, że chcielibyśmy zmienić grubość obramowania danego elementu z 2 na 10 pikseli. Stworzymy dwa przyciski - jeden do zwiększania grubości obramowania, a drugi do jej zmniejszania.

Tworzymy nasz efekt:

var efekt = new Fx.Style('div_testowy','border-width');

Do naszych przycisków przypisujemy zdarzenia onclick wraz z odpowiednim wywołaniem metody start naszego efektu:

$('powiekszanie').addEvent('click',function(){
   efekt.start(2,10);
});

$('pomniejszanie').addEvent('click',function(){
   efekt.start(10,2);
});

Całość umieszczamy w zdarzeniu onload obiektu window (lub DOMContentLoaded jak kto woli) i już mamy gotowy nasz pierwszy przykład z prostym efektem:

PRZYKŁAD 1

Do naszego poprzedniego przykładu dodajmy teraz jeszcze dwa przyciski wykorzystujące metody hide i set - pierwszy z nich ukryje całkowicie obramowanie elementu, a drugi przywróci je do stanu początkowego (2 piksele grubości).

Kod zdarzeń onclick tych przycisków:

$('ukrywanie').addEvent('click',function(){
   efekt.hide();
});

$('przywracanie').addEvent('click',function(){
   efekt.set(2);
});

Jak widzimy użycie tych metod (hide i set) jest bardzo proste.

I gotowy przykład:

PRZYKŁAD 2

W kolejnym przykładzie zajmiemy się opcjami duration i transition. Stworzymy animację diva, który będzie można przemieszczać z lewej na prawą stronę dokumentu i odwrotnie z efektem bounce i różną prędkością.

Animacja będzie polegała na zmianie wartości właściwości margin-left. Stwórzmy nasz efekt zmiany położenia diva:

var efekt = new Fx.Style('div_testowy','margin-left',{duration: 1000,transition: Fx.Transitions.Bounce.easeOut});

Powyższy kod spowoduje stworzenie efektu, który będzie trwał jedną sekundę i będzie to animacja rodzaju Bounce...

Dodajemy teraz zdarzenia onclick do przycisków przesuwających diva:

$('wprawo').addEvent('click',function(){
   efekt.start(0,500);
});

$('wlewo').addEvent('click',function(){
   efekt.start(500,0);
});

Do tego dołóżmy trzy przyciski - do trzykrotnego przyśpieszenia i spowolnienia animacji oraz do ustawienia standardowej prędkości animacji. Dostęp do opcji duration uzyskujemy poprzez zapis:

efekt.options.duration;

$('szybko').addEvent('click',function(){
   efekt.options.duration = 333;
});

$('normalnie').addEvent('click',function(){
   efekt.options.duration = 1000;
});

$('wolno').addEvent('click',function(){
   efekt.options.duration = 3000;
});

Oczywiście całość umieszczamy w zdarzeniu onload obiektu window i już możemy testować kolejny przykład:

PRZYKŁAD 3

Pora skorzystać ze zdarzeń jakie daje nam do dyspozycji klasa Fx.Base (a zatem i klasa Fx.Style) - do naszego poprzedniego przykładu dodamy jeszcze jeden przycisk - stop - będzie on zatrzymywał animację, a po 2 sekundach przywracał ją do początkowego stanu. Poza tym na czas trwania animacji zablokujemy przyciski do uruchamiania i zmiany parametrów animacji.

Zacznijmy od blokowania i odblokowywania przycisków do uruchamiania animacji i zmiany jej prędkości - musimy je zablokować przy wystąpieniu zdarzenia onStart i odblokować przy wystąpieniu zdarzenia onComplete - później przyda się też odblokowywanie przy zdarzeniu onCancel, ale to opiszę dokładniej przy opisie przycisku zatrzymywania animacji - będzie on wykorzystywał metodę stop:

$('stop').addEvent('click',function(){
   efekt.stop();
});

Dodajemy zatem dwa nowe parametry do naszego efektu:

var efekt = new Fx.Style('div_testowy','margin-left',{
   duration: 1000,
   transition: Fx.Transitions.Bounce.easeOut,
   onStart: function(){
      $$('#content button').each(function(element,index){
         if(index != 2){
            element.setProperty('disabled','disabled');
         }
         else{
            element.removeProperty('disabled');
         }
      });
   },
   onComplete: function(){
      $$('#content button').each(function(element,index){
         if(index == 2){
            element.setProperty('disabled','disabled');
         }
         else{
            element.removeProperty('disabled');
         }
      });
   }
});

Jak widać selekcjonujemy wszystkie przyciski z diva content i nadajemy im atrybut disabled - nie dotyczy to trzeciego przycisku, który od początku jest zablokowany i odblokowywany w tym momencie. Zdarzenie onComplete daje odwrotny rezultat - usuwa atrybut disabled z wszystkich przycisków poza trzecim, któremu ten atrybut dodaje...

Teraz pora dodać zdarzenie onCancel - ma ono po 2 sekundach przywracać div na pierwotne miejsce i odblokowywać przyciski - najprościej zrobić to za pomocą metod set i fireEvent:

onCancel: function(){
   (function(){
      efekt.set(0);
      efekt.fireEvent('onComplete');
   }).delay(2000);
}

I to już właściwie wszystko co musieliśmy zrobić - pora przetestować stworzony kod:

PRZYKŁAD 4

Na koniec tej części kursu rozpoczniemy tworzenie menu, które udoskonalimy w dwóch kolejnych częściach kursu - będzie to menu w którym po najechaniu na daną opcję będzie się zmieniał kolor jej tła, a po odjechaniu kursora tło będzie powracało do pierwotnego stanu - poza zmianą koloru tła, zmianie będzie ulegał też kolor czcionki tak by była ona czytelna na nowym tle.

Musimy zatem stworzyć dwa efekty - jeden od zmiany koloru tła, a drugi od zmiany koloru czcionki - dla ułatwienia sprawy kolory będą się zmieniały od białego do czarnego i na odwrót tak by na czarnym tle była biała czcionka (i na odwrót).

Menu oparte będzie o listę nieuporządkowaną posiadającą id "menu". Dla każdego elementu listy musimy stworzyć po dwa efekty i dodać po dwa zdarzenia - mouseenter i mouseleave. Ponieważ elementów listy jest kilka, najlepiej cała tą operację wykonać w pętli. Selekcjonujemy wszystkie elementy naszej listy:

$$("#menu li");

Wykorzystujemy funkcję each z podanym argumentem element:

$$("#menu li").each(function(element){});

W ciele funkcji umieszczamy kody naszych dwóch efektów:

var efekt1 = new Fx.Style(element,'background-color', {duration:600, wait:false});
var efekt2 = new Fx.Style($E('a',element),'color', {duration:600, wait:false});

Warto zwrócić uwagę na dwie rzeczy - animacja nie może czekać na zakończenie jej poprzedniej instancji, stąd:

wait:false;

Dodatkowo przy ustalaniu koloru tekstu nie możemy odwoływać się do elementu listy, ale do linka w nim umieszczonego - dlatego zamiast identyfikatora elementu umieszczamy funkcję selekcjonującą - tak samo w pierwszym efekcie umieszczamy uchwyt do elementu, a nie jego id - możemy tak zrobić bo funkcja $ , która selekcjonuje element do animacji przyjmuje za argument nie tylko ciągi znaków, ale i uchwyty do elementów czy inne funkcje.

No i na koniec tworzymy kody zdarzeń dla elementów listy:

element.addEvent('mouseenter', function(){
   efekt1.start('#FFF','#000');
   efekt2.start('#000','#FFF');
});

element.addEvent('mouseleave', function(){
   efekt1.start('#000','#FFF');
   efekt2.start('#FFF','#000');
});

Całość w akcji można obejrzeć w poniższym przykładzie:

PRZYKŁAD 5

Alternatywny sposób tworzenia efektów

Już kończąc wspomnę jeszcze krótko o alternatywnym sposobie tworzenia efektów. Do tej pory poznaliśmy sposób w którym jednym z argumentów jest element do którego odnosi się dany efekt, ale nie zapomniano też o klasie Element i wzbogacono ją o metodę effect. Tworzenie efektów z jej użyciem przebiega podobnie z tą różnicą, że metoda effect pobiera dwa argumenty - zmienianą w trakcie animacji właściwość i opcje animacji, a sama jest przypisana do elementu jakiego dotyczyć ma animacja:

$('element').effect('właściwość',{opcje});

Z powyższym sposobem zapisu spotkamy się ponownie przy omawianiu następnej części kursu, dotyczącej pliku fx.styles.js .