
W trzeciej części podsumowującej podstawowy kurs Dojo Toolkit, rzucimy okiem na tworzenie efektów wizualnych z użyciem tej biblioteki.
Dojo Toolkit – efekty i animacje
Każdy szanujący się framework JavaScript zawiera rozwiązania wspomagające programowanie efektów wizualnych. Nie inaczej jest w Dojo Toolkit. Biblioteka w wersji 1.9 udostępnia dwa moduły: dojo/_base/fx oraz dojo/fx.
Moduł dojo/_base/fx daje programiście podstawowe metody dla efektów, włączając w to animateProperty, anim, fadeIn czy fadeOut. Natomiast dojo/fx udostępnia metody bardziej zaawansowane, takie jak chain, combine, wipeIn, wipeOut czy slideTo.
Czas zatem na konkrety.
Fading
To popularny efekt, fading in / fading out czyli pojawianie się / znikanie elementów z animacją blednięcia (czy też wygaszania). Poniżej prosty przykład.
HTML
<button id="fadeOut_btn">Fade out</button> <button id="fadeIn_btn">Fade in</button> <div id="fade_block" style="background-color: #f00; width: 40%"> <h2>Some content here ...</h2> </div>
JavaScript
require( ["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) { var fadeOut_btn = dom.byId("fadeOut_btn"), fadeIn_btn = dom.byId("fadeIn_btn"), fade_block = dom.byId("fade_block"); on(fadeOut_btn, "click", function(evt) { fx.fadeOut({ node: fade_block }).play(); }); on(fadeIn_btn, "click", function(evt) { fx.fadeIn({ node: fade_block }).play(); }); });
Funkcje animacji przyjmują jeden argument: obiekt z parametrami. Najważniejszym jest node (węzeł) DOM (podajemy ID elementu, na którym chcemy wykonać animację).
Oprócz tego, kolejną właściwością, którą się definiuje przy animacjach jest czas ich trwania (duration), zwykle wyrażony w milisekundach (ms). Domyślnie Dojo ustawia duration na 350 ms.
Na końcu wywołania funkcji widzimy .play(). Jest to połączona kolejna funkcja, która daje sygnał do odtworzenia animacji. Jest to konieczne, ponieważ w Dojo Toolkit animacje nie są uruchamiane podczas ich tworzenia – muszą zostać uruchomione ręcznie (wspomniana metoda play).
Funkcje animacji zwracają obiekty dojo/_base/fx::Animation, i oprócz play zawierają także metody pause, stop, status, oraz gotoPercent.
Sliding
Czyli animacja płynnego przesuwania elementów. Fade manipuluje widocznością elementu, Sliding (fx.slideTo) natomiast to zmiana położenia z efektem animacji. Poniżej przykład użycia.
HTML
<button id="slide_btn">Slide the block</button> <button id="slideBack_btn">Return</button> <div id="test_block" style="background-color: #f00; width: 40%"> <h2>Some content here ...</h2> </div>
JavaScript
require( ["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) { var slide_btn = dom.byId("slide_btn"), slideBack_btn = dom.byId("slideBack_btn"), test_block = dom.byId("test_block"); on(slide_btn, "click", function(evt) { fx.slideTo({ node: test_block, left: "222", top: "222" }) .play(); }); on(slideBack_btn, "click", function(evt) { fx.slideTo({ node: test_block, left: "0", top: "100" }) .play(); }); });
W tym przypadku parametrami są nie tylko ID elementu (node), ale także wartości dla nowych pozycji x i y (left oraz top), wyrażone w pikselach (px).
Animation Events
Czyli zdarzenia animacji. Jak już wspomniano, metody animacji zwracają obiekty typu dojo/_base/fx::Animation. Obiekty te dostarczają nie tylko metod uruchamiania czy zatrzymywania animacji, ale także zbiór zdarzeń poprzez które możemy nasłuchiwać określonych akcji podczas lub po animacji.
Najważniejszymi są beforeBegin i onEnd, oznaczające ogólnie odpowiednio „przed rozpoczęciem animacji” oraz „na zakończenie animacji”, a ich użycie ilustruje poniższy przykład.
// elementy HTML takie same jak w poprzednim przykładzie ... require( ["dojo/fx", "dojo/on", "dojo/dom-style", "dojo/dom", "dojo/domReady!"], function(fx, on, style, dom) { var slide_btn = dom.byId("slide_btn"), slideBack_btn = dom.byId("slideBack_btn"), test_block = dom.byId("test_block"); on(slide_btn, "click", function(evt) { var anim = fx.slideTo({ node: test_block, left: "200", top: "200", beforeBegin: function() { // alert("Target: ", test_block); style.set(test_block, { left: "0px", top: "100px" }); } }); // obsługa zdarzenia zakończenia on(anim, "End", function() { style.set(test_block, { backgroundColor: "green" }); }, true); // należy uruchomić animację anim.play(); }); // kod obsługi przycisku slideBack_btn ... });
Przekazanie beforeBegin jako właściwości obiektu ma na celu zapewnienie wykonania kodu obsługi w odpowiedniej kolejności (na początku).
Chaining
Czyli łączenie animacji w ciągi (sekwencje). Jest to wygodny sposób definiowania sekwencji animacji (fx.chain). Dojo Toolkit, a konkretnie moduł dojo/fx daje nam metody definiowania animacji wykonywanych kolejno lub nawet równolegle.
Metody te ponadto także zwracają obiekty dojo/_base/fx::Animation posiadające własne zestawy metod i zdarzeń, które reprezentują całą sekwencję.
Przykład – sekwencje animacji:
// elementy HTML takie same jak w poprzednim przykładzie ... require( ["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) { var slide_btn = dom.byId("slide_btn"), slideBack_btn = dom.byId("slideBack_btn"), test_block = dom.byId("test_block"); on(slide_btn, "click", function(evt) { fx.chain([ baseFx.fadeIn({ node: test_block }), fx.slideTo({ node: test_block, left: "200", top: "200" }), baseFx.fadeOut({ node: test_block }) ]).play(); }); on(slideBack_btn, "click", function(evt) { fx.chain([ baseFx.fadeIn({ node: test_block }), fx.slideTo({ node: test_block, left: "0", top: "100" }), baseFx.fadeOut({ node: test_block }) ]).play(); }); });
Jak widać dzięki fx.chain łatwo stworzyliśmy (i uruchomiliśmy) kilka efektów wizualnych bezpośrednio w jednym wywołaniu. Nie startujemy poszczególnych efektów (animacji) indywidualnie, tylko jako całość. Obsługą zajmuje się już fx.chain.
Linki do zasobów w dokumentacji:
– dojo/fx – http://dojotoolkit.org/reference-guide/1.9/dojo/fx.html
– dojo/_base/fx – http://dojotoolkit.org/reference-guide/1.9/dojo/_base/fx.html
Podsumowanie
To zapewne nie koniec artykułów czy tutoriali o Dojo Toolkit, ale koniec podstawowego kursu tego framework’a.
Dzisiaj przekonaliśmy się jak prosto można tworzyć efekty i animacje, a to przecież dopiero wierzchołek możliwości biblioteki Dojo Toolkit.