Dziudek's jogger

O klasie Fx.Transitions już wspominałem przy okazji omawiania klasy Fx.Style . Jednak w pliku moo.fx.js mieliśmy do dyspozycji tylko dwie metody modyfikacji – liniową i „sinusową”, natomiast gdy dołączymy do naszej strony plik moo.fx.transitions.js, dostaniemy do dyspozycji 31 metod.

Metody te pozwoliłem sobie podzielić na dwie grupy – mniej i bardziej efektowne. Metody mniej efektowne to metoda liniowa i 7 metod dodatkowych, z których każda może być wykonywana na 3 sposoby. Metod bardziej efektownych są 3 i każdą można także wykonywać na 3 sposoby. Myślę, że w wypadku tego pliku nie muszę już się rozpisywać zbytnio o składni tych efektów, ponieważ jest ona taka sama jak w wypadku dwóch poprzednich efektów, zmieniają się tylko nazwy metod przetwarzania:

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

Uważam, że najlepiej po prostu zobaczyć jak każda metoda dokonuje zmian właściwości elementu. Najpierw zajmę się metodami według mnie mniej efektownymi. Poniżej porównania po 8 metod każde:

linear, quadIn. cubicIn, quartIn, quintIn, sineIn, expoIn, circIn,

PRZYKŁAD 1

linear, quadOut, cubicOut, quartOut, quintOut, sineOut, expoOut, circOut,

PRZYKŁAD 2

linear, quadInOut, cubicInOut, quartInOut, quintInOut, sineInOut, expoInOut, circInOut,

PRZYKŁAD 3

Jeśli chodzi natomiast o bardziej efektowne metody zmiany wartości właściwości elementów to przygotowałem 3 porównania po 3 metody każde:

elasticIn, backIn, bounceIn,

PRZYKŁAD 4

elasticOut, backOut, bounceOut,

PRZYKŁAD 5

elasticInOut, backInOut, bounceInOut,

PRZYKŁAD 6

Żeby nie ograniczać się tylko do modyfikacji wysokości elementu, przygotowałem dodatkowo przykład efektu odbijającego się bloku tekstu:

PRZYKŁAD 7

Osobiście uważam, że najlepiej wybrać kilka metod, z których będzie się korzystać, a resztę po prostu wyrzucić z pliku moo.fx.transitions.js – i tak jak widzimy większość efektów jest bardzo podobna – po co zatem generować sobie dodatkowe kilobajty ? Przejdź do opisu pliku moo.fx.pack.js