DirectAnimation, 5.část: Path - Builder.cz - Informacni server o programovani

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

DirectAnimation, 5.část: Path

html_obecne

1. října 2001, 00.00 | V dnešním díle seriálu o DirectAnimation si představíme prvek Path, který umožňuje pohybovat libovolným objektem po WWW stránce.

V dnešním díle seriálu o DirectAnimation si představíme prvek Path, který umožňuje pohybovat libovolným objektem po WWW stránce.

Co všechno umí prvek Path?

Pomocí prvku Path můžeme velmi jednoduše nadefinovat trajektorii libovolného prvku WWW stránky a pak s ním po této trajektorii pohybovat. Tento pohyb se dá zrychlovat, zpomalovat, zastavovat atd.

Jak se prvek Path vkládá na stránku

Prvek Path vkládáme na stránku stejně jako všechny prvky DirectAnimation, tj. pomocí tagu OBJECT:

<OBJECT CLASSID="CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6" ID="název">
  <PARAM NAME="jméno vlastnosti" VALUE="hodnota vlastnosti">
</OBJECT>

Pro použití ve skriptech je prvek nutné pojmenovat pomocí atribtutu ID. Prvku přiřazujeme vlastnosti pomocí tagů PARAM, které uvádíme uvnitř tagu OBJECT - nyní si tyto vlastnosti ukážeme:

Jméno vlastnosti Význam vlastnosti
AutoStart Nastaví, zda má pohyb automaticky začít v momentu, kdy je prvek načten. Hodnoty true (pro ano) a false (pro ne).
Bounce Pokud má hodnotu true, bude se prvek po dosažení konce trajektorie pohybovat zpět. Pokud má hodnotu false, prvek se vracet nebude.
Direction Pokud má hodntu 0, bude se prvek pohybovat ve smyslu zadané trasy, při hodntě 1 se prvek bude pohybovat zpět.
Duration Nastaví, jak dlouho má celý pohyb trvat. Hodnoty se zadávají ve tvaru sekundy.milisekundy.
Repeat Nastaví počet kolikrát se má pohyb opakovat. Hodnota -1 nastaví nekonečné opakování, 0 opakování zruší.
Shape Definuje tvar trajektorie. Hodnoty jsou stejné jako u prvku Structured Graphics (tedy např. <PARAM NAME="Shape" VALUE="Oval (95,40,200,210)">) - viz 3. díl našeho seriálu.
Target Definuje přesouvaný objekt. Jako hodnota se používá název daného prvku nastavený pomocí atributu ID (Pokud tedy máme prvek <SPAN ID="text">Zde je obsah prvku</SPAN>, pak bychom se na něj odkázali pomocí zápisu <PARAM NAME="Target" VALUE="text">).
TimerInterval Nastaví dobu mezi jednotlivými fázemi pohybu v milisekundách.

Všechny tyto vlastnosti je možné číst i nastavovat v JavaScriptu, a to pomocí zápisu název prvku.vlastnost. V JavaScriptu navíc můžeme používat tyto dvě vlastnosti, které jsou pouze ke čtení: PlayState (vrací jednu z těchto hodnot: 0 (pokud je pohyb zastaven), 1 (pokud pohyb probíhá) nebo 2 (pokud je pohyb pozastaven) a Time (udává celkový čas pohybu).

Metody prvku Path

Kromě výše uvedených vlastností podporuje prvek Path i několik JavaScriptových metod. Ty se aplikují pomocí zápisu název prvku.metoda a jsou to Pause() (pozastaví pohyb), Play() (spustí pohyb), Stop() (zastaví pohyb a vrátí jej na začátek) a Seek(n) (nastaví přehrávání na n-tou sekundu pohybu).

Závěrem bych vás ještě rád seznámil s metodou KeyFrame. Pomocí té je možné nadefinovat na trajektorii pohybu libovolné množství bodů a nastavit, kdy má být těchto bodů dosaženo. Použití této metody vám osvětlí následující příklad:

<OBJECT CLASSID="CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6" ID="Path1">
</OBJECT>

<SCRIPT TYPE="text/JavaScript">
var PoleBodu = new Array (x-ová souřadnice bodu 1, y-ová souřadnice bodu 1, x-ová souřadnice bodu 2, y-ová souřadnice bodu 2, x-ová souřadnice bodu n, y-ová souřadnice bodu n);
var PoleCasu = new Array (čas na prvním bodu, čas na druhém bodu, čas na n-tém bodu);
Path1.KeyFrame (počet bodů, PoleBodu, PoleCasu);
</SCRIPT>

A to je o prvku Path vše. Dnešním dílem jsme zakončili "výuku" DirectAnimation a příště se již podíváme na praktické využití této technologie.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

 » Rubriky  » HTML  

 

 

 

Nejčtenější články
Nejlépe hodnocené články

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: