Vánoční animace v JavaScriptu

14. prosince 2002

•

V době, kdy píši tento článek, jsou Vánoce už za dveřmi a příslušná výzdoba, reklamy a koledy útočí na běžného obyvatele západní polokoule doslova na každém kroku. Některým čtenářům však ani to nestačí a žádají po Intervalu články se žánrovými animacemi – sněžení, hvězdičky, komety, atd. Jak se říká, kdo chce kam, pomozme mu tam, takže zde je několik příkladů.

Pro animaci obrázků je využito posouvání některých HTML elementů ve stránce (konkrétně obrázků) nastavováním jejich vlastností style.left, případně style.top. Tuto syntaxi podporuje prohlížeč Internet Explorer od verze 5 výše a Netscape Navigator ve verzi 6 (příklady byly testovány na MSIE 5.5 a NN 6.0). Posunovat obrázky lze pochopitelně i v jiných prohlížečích, uvedené typy však používá většina návštěvníků, přičemž potřebná složitost kódu je minimální.

Ukážeme si celkem čtyři animace, přičemž všechny využijí shodný skript. Odlišné jsou pouze obrázky a nastavení parametrů skriptu. Protože „předdefinovaný“ vzhled nebude jistě vyhovovat každému, lze změnou parametrů, případně drobnými programovými úpravami, docílit i dosti odlišného výsledného efektu.

Než začneme s rozborem skriptu, zde jsou ony slibované animace, všechny s patřičnou vánoční tematikou:

Popis skriptu

Skript se skládá ze tří částí, totiž definice parametrů, animační funkce (jež je volána periodicky časovačem) a vykreslovací funkce, která připraví potřebné obrázky pro animaci. Než se do nich pustíme, odbudeme si smetí v podobě pomocných funkcí. Tentokrát je jen jedna jediná, která má za úkol vracet náhodné číslo zformátované pro naše potřeby:

// Vraci nahodne cislo x, kde 0<=x<num
function randNum (num) {
var rnd1 = Math.round( (num-1) * Math.random() )
return rnd1;
}

Nejvíce času zřejmě zabere nastavení parametrů skriptu. Zde je jejich seznam, jak jsou definovány ve skriptu pro „sněžení“, význam si popíšeme vzápětí. Ještě jednou připomínám, že všechny typy animací byly vytvořeny pouze modifikací těchto několika parametrů, bez zásahu do samotného kódu:

var items = [ „snow1.gif“, „snow2.gif“, „snow3.gif“ ];
var itemsCount=30;
var screenLeft = 50;
var screenTop = 50;
var screenWidth = screen.availWidth – 150;
var screenHeight = screen.availHeight – 180;
var moveamountY = 10;
var moveamountX = 0;
var randomizeX = 2;
var randomizeY = 3;
var fCycleX = false;
var fCycleY = true;
var fRandomXwhenYCycles = true;
var fRandomYwhenXCycles = false;
var fCycleImages = false;
var speed = 100;

Význam parametrů:

items – seznam odkazů na všechny obrázky, použité v animaci
itemsCount – kolik animovaných objektů se má na obrazovce vytvořit
screenLeft, screenTop, screenWidth, screenHeight – tyto parametry definují obdélník, v němž se celá animace odehrává; výchozí nastavení lze odvodit z velikosti obrazovky, jak je tomu zde, případně lze použít vlastní fixní hodnoty
moveamountX, moveamountY – definuje rychlost pohybu objektů horizontálně a vertikálně
randomizeX, randomizeY – pohyb objektu bude v každém kroku náhodně ovlivněn v rozmezí zde zadaných hodnot (takto lze tedy definovat mírné „chvění“, například u padajících vloček)
fCycleX, fCycleY – zda objekt dospěvší k pravému, resp. dolnímu okraji zůstane stát, nebo se opět vynoří na opačné straně obrazovky
fRandomXwhenYCycles, fRandomYwhenXCycles – dvě proměnné s fascinujícími názvy definují, zda je při události cyklování, popsané předešlými proměnnými, náhodně nastavena druhá souřadnice, nebo zda tato zůstává nezměněna
fCycleImages – je-li false, obrázek pohybujícího se objektu zůstává celou dobu stejný, jinak cykluje po hodnotách nastavených v poli „items“ (využito například pro animaci hvězdiček ve třetím příkladu)
speed – interval (v milisekundách) mezi jednotlivými kroky animace

Podle těchto parametrů nyní v dalším kroku vytvoříme požadovaný počet animačních objektů. Objekty jsou po ploše rozmístěny náhodně, a rovněž náhodně je jim přiřazen vždy jeden z obrázků definovaných v poli items. Po ukončení kreslení je spuštěn časovač pro periodické volání animační funkce. Celý kód se uvádí v těle stránky a je zapouzdřen do podmínky, která povolí jeho spuštění jen pro „cílovou skupinu“ prohlížečů (využíváme testu na implementaci funkce getElementByID, kterou použijeme při samotné animaci a která je podporována, aspoň dle dokumentace, u stejných prohlížečů, jež podporují nastavení vlastnosti style.left a style.top):

if(document.getElementById) {
    for(i=0; i<itemsCount; i++ ) {
        Xs[i] = screenLeft + randNum(screenWidth);
        Ys[i] = screenTop + randNum(screenHeight);
        Is[i] = randNum(items.length);
        document.write(‚<img ID=“animitem’+i+'“ STYLE=“position:absolute; left:’+Xs[i]+‘; top:’+Ys[i]+'“ src=“‚+ items[Is[i]] +'“>‘);
    }
    setInterval(„Animate()“,speed);
}

V předchozím kódu používaná pole Xs, Ys a Is slouží k uchování hodnot o aktuální pozici a stavu animovaných objektů, před prvním použitím je musíme pochopitelně deklarovat, což učiníme v hlavičce stránky…

var i;
var Xs = new Array();
var Ys = new Array();
var Is = new Array();

…kam také vepíšeme funkci Animate, tvořící hlavní a poslední část kódu. I když je tato funkce trochu delší, nedělá v podstatě nic jiného, než výpočet nové polohy objektů, případně fáze obrázku, a jejich přenesení do příslušných elementů stránky s využitím již dříve zmíněné funkce getElementByID a vlastností style.left, případně style.top:

Ve funkci Animate lze ovšem provádět mnohá další vylepšení, ať již v rozšiřování počtů různých druhů animací, či rozšiřování funkčnosti na starších nebo exotických prohlížečích. Zdrojové kódy všech uvedených animací a použité obrázky najdete v archivu. Obrázky jsou volně šiřitelné, pokud z nějakého důvodu nechcete nebo nemáte čas kreslit vlastní. Přeji vám veselé Vánoce.