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.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 02001