Alladyn dostarcza efektywny i posiadający sporo funkcji moduł animacyjny, oparty na keyframach, z możliwością grupowania elementów ruchu oraz kilkoma rodzajami samego ruchu. Dzięki zapewnieniu synchronizacji całej animacji, w łatwy sposób można zaprogramować złożony i efektowny ruch wielu elementów.
Poniżej przedstawiony jest dokładny opis obiektów i metod odpowiedzialnych za ruch w Alladynie. Szersze wyjaśnienie ich użycia wraz z przykładami znajduje się w dalszych rozdziałach niniejszego podręcznika.
5.1. Obiekt STPE.
Jest to obiekt odpowiedzialny za synchronizację animacji, umożliwia jej podział na grupy i oddzielną synchronizację każdej z nich.
Posiada dwie metody odpowiadające za stan animacji:
- go (grupa, interwał, autostop, funkcja użytkownika).
Funkcja uruchamia animację warstw należących do jednej grupy (grupą domyślną, do której należą wszystkie warstwy bez sprecyzowanej grupy, jest "").
Interwał to odstęp w milisekundach pomiędzy kolejnymi klatkami animacji.
Autostop jest parametrem opcjonalnym. Gdy jego wartość wynosi true, wówczas po zakończeniu animacji wątek jest wygaszany i nie będzie reagował na aktywacje jakichkolwiek warstw tej grupy. Pominięcie tego parametru jest równoznaczne z podaniem wartości false.
Funkcja użytkownika jest również parametrem opcjonalnym, ma sens jedynie dla wartości true argumentu autostop. Wartością funkcji użytkownika jest łańcuch tekstowy opisujący (w języku JavaScript) akcję, jaka ma zostać podjęta po zakończeniu animacji grupy. Może to być komenda JavaScript, kilka komend oddzielonych średnikami lub wywołanie innej funkcji, np. uruchomienie kolejnej animacji.
- stop (grupa).
Natychmiastowe zatrzymanie grupy animacyjnej i likwidacja wątku. Nie zmienia stanu poszczególnych warstw wchodzących w skład grupy, co pozwala na wznowienie animacji w dowolnie wybranym momencie.
5.2. Obiekt van.
Jest to obiekt opisujący sposób ewentualnej animacji warstwy, posiada go każda warstwa w obiekcie vlay (
vlay.warstwa.van). Posiada następujące właściwości i metody:
- właściwość group.
Określa przynależność warstwy do dowolnej grupy animacyjnej. Domyślna wartość to "".
- właściwość go (true/false).
Określa czy warstwa jest animowana w trakcie animacji grupy, do której należy. Domyślna wartość to false.
- właściwość mode.
Określa sposób zachowania się animacji. loop oznacza, iż po zakończeniu ścieżki animacja warstwy zostanie wznowiona. ping spowoduje odtworzenie ("odbicie się") animacji w kierunku przeciwnym. Każda inna wartość spowoduje zakończenie animacji po wykonaniu całej ścieżki i ustawienie flagi go na false.
- właściwość UDF (user defined function).
Określa funkcję, jaka ma zostać uruchomiona po ukończeniu animacji danej warstwy. Działa podobnie jak funkcja użytkownika w obiekcie STPE.
- metoda reset().
Powoduje natychmiastowe przerwanie animacji warstwy i wyczyszczenie tablicy animacji, funkcji użytkownika, itp. Aby wstrzymać animację warstwy bez czyszczenia innych parametrów obiektu van, należy zamiast metody reset ustawić właściwość go na false.
- metoda purge().
Czyści ścieżkę animacji, ustawiając aktualną klatkę jako pierwszą klatkę kluczową nowej ścieżki. Zachowuje grupę animacyjną, funkcję użytkownika oraz aktualne właściwości warstwy. Jej użycie pozwala na łatwą i płynną zmianę zdefiniowanej ścieżki animacji warstwy w trakcie trwania animacji, pod warunkiem jednak, że w aktualnie wykonywanym ruchu (do następnej zdefiniowanej klatki kluczowej) zdefiniowane są wszystkie zmieniane elementy ruchu (zarówno pozycja left jak i top oraz ewentualnie inne, które były zmieniane w trakcie trwania animacji).
5.3. Metoda vkf ({elementy zmieniane}, ilość kroków do osiągnięcia celu) - KeyFrame.
Metoda pozwala na opis animacji przy zastosowaniu klatek kluczowych. Elementy zmieniane podawane są jako para
nazwa:wartość (oddzielone dwukropkiem), kolejne zaś elementy oddzielane są przecinkami. Wystarczy podać jedynie te właściwości, których wartość ma zostać zmieniona pomiędzy poprzednią, a definiowaną klatką kluczową.
W szczególnym przypadku
vkf({},10) będzie oznaczać wstrzymanie jakiejkolwiek akcji warstwy przez 10 kroków animacji jej grupy, zaś
vkf({left:100,vopacity:50},1) natychmiastowe (w jednym kroku) przesunięcie jej do pozycji left=100px i ustawienie przeźroczystości na 50%.
Właściwości, jakie możemy zmieniać to:
- wszelkie numeryczne właściwości należące do obiektu style warstwy (top, left, zIndex itp.),
- właściwość vopacity (z emulacją dwustanową w przypadku Netscape 4.x),
- clip opisywany jako ct, cr, cb, cl (top, right, bottom, left) - ze względu na dość swobodną interpretację kadrowania w różnych browserach wszystkie te cztery parametry muszą występować w komplecie.
Przykład użycia:
vlay.nazwawarstwy.vkf({top:100,left:200,vopacity:50},10)
vlay.nazwawarstwy.vkf({top:100,left:0,vopacity:100},5)
vlay.nazwawarstwy.vkf({top:300,left:300},7)
Przykłady ilustrujące użycie modułu animatora znajdują się w
następnym rozdziale.
[< Poprzedni rozdział] [Spis treści] [Następny rozdział >]