| Hlavní nabídka: |
Základy
Reference
Příklady
|
|
|
Animace obrázků
Pro automatické obměny obrázků můžeme použít animace. Co to je se dozvíte v tomto článku.
Animací se rozumí záměna obrázků v určitých časových intervalech. Pro názornost si vše ukážeme na scriptu, který má i mnoho navíc:
<HTML>
<HEAD>
<TITLE>Animace obrázků</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
obr=new Array();
pocet_obrazku=4; pauza=1000;
for (a=0;a<pocet_obrazku;a++)
{
obr[a]=new Image();
obr[a].src=a+".gif";
}
function zamen(nazev_obr,novy_obr) {
document.images[nazev_obr].src=novy_obr; }
function animuj()
{
if (a==pocet_obrazku) a=0;
zamen("obrazek",a+".gif");
a++;
document.panel.cifernik.value=1000/pauza+" obr/s";
window.setTimeout('animuj()',pauza);
}
function zrychli() {
pauza/=2; if (1000/pauza>64) pauza*=2; }
function zpomal() {
pauza*=2; if (1000/pauza<1) pauza/=2; }
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="animuj();">
<FORM NAME="panel">
<TABLE CELLPADDING="5" CELLSPACING="0" BORDER="1">
<TR>
<TD>Rychlost: <INPUT TYPE="text" NAME="cifernik" SIZE="6"></TD>
<TD><IMG SRC="0.gif" ALIGN="absmiddle" NAME="obrazek"></TD>
</TR>
<TR>
<TD COLSPAN="2" ALIGN="CENTER">
<INPUT TYPE="button" VALUE="Zrychli" onClick="zrychli();">
<INPUT TYPE="button" VALUE="Zpomal" onClick="zpomal();">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Pro výsledek klikněte ZDE.
Vysvětlení činnosti:
Jelikož je tento příklad rozsáhlý, budeme pracovat s mnoha proměnnými. Vytvořili jsme si proměnnou obr, které jsme přiřadili vytvoření pole, dále pocet_obrazku, té jsme přiřadili 4 a pauza, ta má hodnotu 1000 (bude nám sloužit jako čas mezi intervaly, viz dále). Dále jsme použili podmínkový výraz for. Ten nám bude sloužit k vytvoření dalšího pokračování cyklu. Činnost spočívá v tom, že bude přičítat po jedné hodnotu pro proměnnou a, tato proměnná bude součástí parametru src. Tedy adresy odkazující na obrázek. Tudíž musíme mít pojmenovanné obrázky 0.gif až 3.gif. Poté použijeme funkci zamen(), viz minulý příklad. Nejdůležitější je pro nás funkce animuj. V kostce si shrneme její kostru. Využili jsme podmínky if. V ní jsme jako podmínku zadali proměnné a přiřazení proměnné pocet_obrazku. V tom případě se vyvolá funkce zamen(), která zobrazí obrázek s parametrem src a.gif, kde a je proměnná, které je přiřazeno číslo (viz výše). Dalším krokem funkce animuj je zobrazení hodnoty rychlosti animace, ta je implicitně dána 1 (vzniklo z 1000/pauza, kde pauza je proměnná, které jsme přiřadili hodnotu 1000). Dalším krokem této funkce je obnovení sebe sama pomocí ovladače událostí setTimeout. Vyvolá se po intervalu pauza, což je námi určených 1000 milisekund (viz výše). Poslední dvě funkce jsou zrychli() a zpomal(). Princip si vysvětlíme jenom na jedné (druhá je obdobou, jen s jinými parametry). U funkce zrychli() jsme použili podmínku if. V ní jsme podmínili další postup, že 1000/pouza musí být větší než 64. V takovém případě se při vyvolání této funkce zdvojnásobí původní hodnota intervalu a zapíše se do okna (viz výše). To bychom měli scriptovou část, nyní se podíváme na HTML. V ní jsme v tagu body ihned přiřadili ovladači událostí onLoad funkci animuj(). To proto, aby se animace spustila ihned po načtení stránky. Vytvořili jsme si formulář a dali mu název panel (pojmenování jsme použili u funkce animuj()). Vložili jsme tagy pro prvky formuláře, s kterými budeme pracovat. Čili textové pole, v němž se vypisuje aktuální interval obnovy funkce animuj(), obrázek (implicitně 0.gif, aby se mohla správně vykonat podmínka for, viz výše) a dva buttony pro zrychlení a zpomalení intervalu. Jim jsme přiřadili ovladač událostí onClick, který vyvolá požadovanou funkci.
Poznámka: Obrázky pro tento článek jsme si zapůjčili.
27.03.2002 | Obrázky | David Havlíček
|
|
Dnes je 15. 11. 2024
Svátek má Leopold | |
| Bleskové aktuality: |
10.12.2002 Dlouho jsme tu neměli příklady, tak co kdybychom si dneska jeden dali?
07.12.2002 Poslední operáty, které si představíme, jsou speciální.
02.12.2002 Po delší pauze si představíme další operátory - řetězcové.
17.11.2002 Next operátory jsou přiřazovací.
10.11.2002 Jedněmi z posledních operátorů jsou porovnávací.
02.11.2002 Už jste slyšeli o logických operátorech? Pár jich taky je.
29.10.2002 Dalšími operátory jsou bitové.
26.10.2002 Dnes si představíme první z řady operátorů - aritmetické operátory.
24.10.2002 Další částí referencí jsou příkazy.
18.10.2002 Dnes se mrkneme na referenční přehled funkcí.
12.10.2002 Window je objekt, který má snad nejvíce metod a vlastností, tak se mu dnes podíváme na zoubek.
06.10.2002 Netradičně v neděli další objekt - string.
28.09.2002 Další sobota. Další objekt - screen.
21.09.2002 Hodně používáný je objekt navigator. Proto se na něj dneska zaměříme.
14.09.2002 Po týdenní pauze další referenční článek o objektu - tentokrát Math.
07.09.2002 Objekt location bude náš dnešní cíl.
04.09.2002 Na paškál si tentokrát vezmeme objekt history.
|
|
|
