V dalším článku o animacích vytvořených pomocí Javascriptu a DHTML si představíme filtr revealTrans(), který umožňuje přes 20 různých efektů, kterými můžeme obohatit jednoduché obměňování obrázků. Dále si ukážeme, jak při animaci průběžně měnit jednotlivé filtry.

Na začátek připomínám, že uvedené animace jsou funkční v MSIE 4.0 nebo vyšších verzích tohoto prohlížeče. Netscape Navigator filtry nepodporuje, takže se zde musíme spokojit s pouhým střídáním obrázků.

Filtr RevealTrans()

Tento filtr umožňuje 24 různých efektů při přechodu mezi jednotlivými obrázky. Filtr definujeme přímo v tagu <img> pomocí parametru style např. takto:

<img src=“clanek_obrazek1.gif“ border=“0″ width=“150″ height=“113″ style=“filter:revealTrans(duration=3, transition=1)“ >

U tohoto filtru lze nastavit dva parametry: jednak dobu působení daného filtru (parametr duration), který je udáván v sekundách, jednak typ filtru (parametr transition). Kompletní přehled jednotlivých možných přechodů naleznete v níže uvedené tabulce. Protože jsem nenašel výstižné české ekvivalenty k anglickým názvům, uvádím původní označení z dokumentace Microsoftu.

Typ přechodu Hodnota
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across 10
Checkerboard down 11
Random dissolve 12
Split vertical in 13
Split vertical out 14
Split horizontal in 15
Split horizontal out 16
Strips left down 17
Strips left up 18
Strips right down 19
Strips right up 20
Random bars horizontal 21
Random bars vertical 22
Random 23

Dynamické změny filtrů

Využití filtru revealTrans() si ukážeme na malé ukázce. Vyjdeme z minulého dílu, tentokráte ovšem použijeme filtr revealTrans a postupně využijeme všech typů přechodů mezi obrázky (budeme průběžně měnit parametr transition).

V první fázi musíme obrázky, které budeme animovat, načíst do cache počítače:

<script language=“javascript“>
<!–
doba=3500;
pocet = 4;
rotator=0;
transtyp=0;
obrsrc = new array(pocet);
obrsrc[0]=“obrazek1.gif“;
obrsrc[1]=“obrazek2.gif“;
obrsrc[2]=“obrazek3.gif“;
obrsrc[3]=“obrazek4.gif“;
obr = new array(pocet);
for (i=0; i < pocet; i++){
obr[i]= new image();
obr[i].src= obrsrc[i]
}
//–
</script>

Samozřejmě musíme nadefinovat i vlastní obrázek. V parametru style pak nadefinujeme i filtr. Dobu působení filtru nastavíme na 3 sec. (parametr duration).

<img src=“clanek_obrazek1.gif“ name=“obraz“ ID=“sample“ border=“0″ width=“150″ height=“113″ style=“filter:revealTrans(duration=3, transition=1)“>

Funkce, která provede vlastní animaci pak vypadá následovně:

<script language=“javascript“>
<!–
function rotate(obr) {
if (rotator==pocet) {rotator=0;}
if (window.document.sample){
//animace pro MSIE
if( transtyp>23){transtyp=0};
sample.filters.revealTrans.transition=transtyp;
sample.filters.revealTrans.Apply();
sample.src = obrsrc[rotator];
sample.filters.revealTrans.Play();
transtyp=transtyp + 1
}
else {
// náhradní řešení pro NN
document.images[„obraz“].src = obrsrc[rotator];
}
rotator = rotator + 1
window.setTimeout(‚rotate();‘,doba);
}
//–
</script>

Řadu příkazů známe již z minulého dílu, takže se o nich jen krátce zmíním: Prohlížeč nejprve zjistí, zda-li je podporován objekt sample. V případě že není, provede se pouhé střídání obrázků. V opačném případě se provede úplná animace. Tu spustíme pomocí příkazů Apply() a Play(). Oproti skriptu z minulého dílu určujeme v každém cyklu typ filtru pomocí proměnné transtyp, kterou postupně měníme. To nám umožňuje postupné obměňování typu filtru během animace. Aby byla funkce, provedena musíme ji zavolat, například hned při načtení stránky:

<body onLoad=“rotate();“>

Zobrazit ukázku (kompletní zdrojový kód skriptu).

Žádný příspěvek v diskuzi

Odpovědět