Weblabor

Egyik kedves ismerősömnek segédkezem egy egyszerű honlap elkészítésénél. Adott volt egy logó, melyet maga tervezett. Megálmondtott egy egyszerű animációt a logóval kapcsolatban. Mondta, hogy miért ne legyen Flash-ben megoldva, én meg mondtam, hogy miért ne legyen megoldva Flash nélkül?

Így hát nekifogtam a dolognak. Megkaptam az animáció egyes fázisairól a forrásképeket. Ezeket összeillesztettem Photoshopban, mivel az eredeti grafika Corelben készült. Kigondoltam, hogy miként valósítanám meg az animációt HTML, CSS és JavaScript segítségével, majd ez alapján létrehoztam egyetlen GIF fájlt (CSS sprite).

A gondok ezután kezdődtek. Az egyes grafikai objektumokat reprezentáló HTML elemek létrehozása, majd alap „konfigurációs” CSS kódok megírása után pofáncsapott megint az a jelenség, hogy a JavaScriptben nincsen megoldás az egymást követő műveletek „lineáris” végrehajtására.

Hiába vannak egymás után kiadva a parancsok, azok azonos időpillanatban kezdenek futni. A jQuery-nek bár van animation queue megoldása, de ez csak akkor működik, ha az egymás után végrehajtandó animációkat ugyanazon HTML elemen akarjuk futtatni.

Van egy kiegészítés a jQuery-hez, ami kiterjeszti az alap animation queue-t oly módon, hogy meg lehet adni az animate() parancsnak paraméterben, hogy a kérdéses animáció melyik (nevesített) queue-hoz tartozzon.

Szépen működik is, de a csomagban 1.4-es jQuery van, a legújabb 1.7.1-es verzióval nem működik. Mivel nem értek a jQuery-hez, és egyébként sem szívem csücske a JavaScript, egy egyszerű megoldást kerestem a problémára.

Fórumokban keresgélve vagy a callback alapú megoldást ajánlották, vagy pedig a klasszikus setTimeout()-ot. A callbackes történet (amikor egyik animáció callbackje a következő animáció, és így tovább) addig jó, amíg az animation() metódussal operálunk. Nekem viszont kellett a css() is, így ezt a megoldást elvetettem.

Marad nekünk a setTimeout(), ami alap esetben eléggé megnehezíti a dolgunkat. Teszi ezt azért, mert nekünk kellene kézileg kiszámolgatni, hogy az egyes animáció lépések a kezdeti időpillanattól milyen távolságra vannak. Éppen ezen probléma kiküszöbölésére készítettem egy nagyon egyszerű, ám annál hasznosabb animation queue megoldást.

Lássuk a kódot:

var queue = {
    delay: 0,
    callbacks: [],
    
    add: function (callback, duration) {
        this.callbacks.push({
            duration: duration,
            callback: callback
        });
    },
    
    start: function () {
        var length = this.callbacks.length;
        
        for (var i = 0; i < length; i++) {
            setTimeout("eval(" + this.callbacks[i].callback + ");", this.delay);
            this.delay += this.callbacks[i].duration;
        }
    }
}

Semmi különöset nem csinál, csupán annyit, hogy helyettünk végzi a setTimeout()-nak megadandó ezredmásodperc értékek kiszámítását. Ezt úgy tudja megtenni, hogy minden egyes animáció lépéshez megadjuk, hogy mennyi ideig fog tartani.

Valószínűleg nem a legszebb JavaScript kód, de amire szükség volt a feladat során, arra éppen megfelelőnek bizonyult.