Dziudek's jogger

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ą :)

Mootools udostępnia nam kilkadziesiąt rodzajów animacji - pisałem już przy pliku fx.base.js, że rodzaj animacji ustalamy za pomocą parametru transition.

Jako rodzaj animacji w mootools 1.1(1) podajemy następujący ciąg znaków:

Fx.Transitions.rodzaj.typ

Gdzie rodzaj to jedna z poniższych wartości:

• linear
• Quad
• Cubic
• Quart
• Quint
• Pow
• Expo
• Circ
• Sine
• Back
• Bounce
• Elastic

A typ przyjmuję jedną z trzech poniższych wartości:

• easeIn
• easeOut
• easeInOut

Przy czym rodzaj linear nie ma żadnej z trzech powyższych opcji (gdyż nie mają one w jego przypadku zastosowania). Tak więc w wypadku tego rodzaju animacji zapis wygląda następująco:

Fx.Transitions.linear

Dodatkową nowością w mootools 1.1(1) jest fakt iż możemy tworzyć wspomniane rodzaje animacji z własnymi parametrami - zmieniając przy tym trochę ich wygląd. Tą funkcjonalność obsługują trzy rodzaje animacji - Pow, Back i Elastic. W ich wypadku możemy tworzyć własny styl animacji w następujący sposób:

var moja_animacja = new Fx.Transitions(Fx.Transitions.rodzaj, liczba);

Gdzie zmienna rodzaj to oczywiście Pow, Back lub Elastic, a zmienna liczba to jakaś liczba - w wypadku animacji Pow będzie to potęga do jakiej zostanie podniesiona liczba przetwarzana przez funkcję (przy czym liczby 1,2,3,4,5,6 odpadają bo uzyskamy jedną z dostępnych animacji). W wypadku animacji Elastic i Back podana liczba będzie wpływała na "wyrazistość" animacji. Moim zdaniem najlepiej potestować tą funkcjonalność samemu :)

Tym razem przykładu mojego nie będzie zamiast tego polecam po pierwsze analizę wykresów na tej stronie oraz zabawę z przykładem pochodzącym z sekcji demos - dla niezorientowanych dodam, że duration to czas trwania animacji, a samą animację można zobaczyć przenosząc i puszczając czerwony kwadracik lub klikając na szarym obszarze.

W następnej części kursu skorzystamy wreszcie z opisanych w ostatnich częściach kursu informacji i stworzymy własne animacje omawiając przy tym plik fx.style.js :)