Vývoj WWW aplikací


Produkty

Připravujeme
AnimH

AnimH


 
Co je AnimH?
Stručný popis
Demonstrace
Příklad
   Úvod
   Naše nabídka
   Vaše požadavky
   Ceník
   Zpracování zakázky
   Kontakt
   Pracovní poptávka
   Produkty
   Mapa serveru

Stručný popis

Knihovna AnimH podporuje mnoho základních i rozšířených animačních funkcí a poskytuje bohatou a flexibilní API základnu.

  • Základní princip
    AnimH animuje DOM (Document Object Model) podle jednoduché definice vlastního standardu (konstrukce objektů s konfiguračními parametry). Čím složitější mají být děje v prohlížeči, tím je pochopitelně složitější i definice těchto dějů, ovšem při dodržení základních pravidel vytváření takových definic mohou být i poměrně složité efekty nadefinovány velice rychle (viz. Příklad ).
  • Plynulost pohybů
    Knihovna počítá optimální intervaly pro animaci s tím, že vychází ze základní frekvence 25 fází/sec (frekvence filmu). Pohyby jsou časově synchronizovány. To znamená, že rychlost pohybu je závislá na čase a nikoli na výkonu klientského počítače. Nemůže se tedy stát, že při nižším výkonu prohlížeče se pohyb zpomalí nebo dokonce stránka zkolabuje. Zároveň je knihovna optimalizována pro maximalní výkon, a pokud se má nějaká vlastnost objektu animovat pomaleji než je zobrazitelné, frekvence se automaticky sníží na viditelnou mez tak, aby animace zbytečně nezatěžovala prohlížeč. V případě starších a méně výkoných klientských počítačů, kdy prohlížeč nestihne během jedné fáze upravit všechny požadované vlastnosti, dojde ke snížení frekvence také, ale požadované časování akcí bude zachováno, i když efekt ztratí na viditelných proporcích. Animace bude tak pro oko pozorovatele možná méně plynulá, ale objekty se dostanou za definovaný čas tam, kde mají být.
  • Rychlostní křivky
    AnimH podporuje lineárně i kvadraticky závislou rychlost pohybu, tedy změnu rovnoměrnou, zrychlenou i zpomalenou s definovatelným koeficientem zrychlení nebo zpomalení (simulace reálných fyzikálních pohybů viz. Příklad ). Kromě toho AnimH podporuje i další rychlostní křivky, kupříkladu křivku "goniometrickou", tedy změnu vlastností závislou na sinu nebo cosinu uběhlého časového intervalu (aplikace pohybů po kruhu). Pro případ rychlostní křivky jiné než v současnosti knihovnou podporované, je možné snadno nadefinovat potomka obecného objektu "rychlostní křivky", a tím docílit jakékoli časové závislosti změny vlastností.
  • Sekvence pohybů
    AnimH podporuje také sekvence pohybů, a to se zachovaním všech metod ovládání (včetně reverzní funkce). To znamená, že si můžete zadefinovat libovolné množství pohybů, seřadit je do fronty a celou tuto frontu spouštět vpřed nebo vzad, pozastavovat a opět spouštět. Vždy po doběhnutí sekvencí se vlastnosti zaručeně dostanou do definovaného počátečního nebo koncového stavu akce.
  • Pseudo-vlastnosti
    Knihovna podporuje i tzv. pseudo-vlastnosti v podobě složitějších tříd objektů, které slučují animace více vlastností objektů dohromady v duchu vzájemné závislosti jejich hodnot. Pseudo-vlastnosti jsou tedy takové vlastnosti objektů, které nejsou součástí standardního DOM, nýbrž s nimi v určité závislosti souvisí. Sem patří například úhlový pohyb (po kružnici, po orbitu), který se projevuje hned čtyřmi vlastnostmi standardního DOM (pozice a velikosti).
  • Objektový model dokumentu a AnimH
    AnimH implementuje vlastní animační OM (Object Model), který se váže na DOM (Document Object Model) snadno definovatelným rozhraním, které je možné lehce rozšiřovat. Takto podporuje všechny modifikovatelné DOM vlastnosti (plná podpora DHTML)
  • Šablony akcí
    Knihovna podporuje vytváření šablon sekvencí pohybů, které jsou lehce aplikovatelné na jakékoli objekty přístupné z DOM. Není pak nutné definovat pro každý DOM objekt stejné sekvence znova a znova. Stačí pouze přiřadit k DOM objektu objekt předdefinované šablony. To se hodí například při vytváření dynamického menu, textových efektů a podobně. Tedy i veškeré pohyby na Vašich stránkách mohou pomocí AnimH dostat určitou stylovou jednotu.
  • Akční objekty a jejich slučování a časování
    Přiřazení objektu šablony k DOM objektu probíhá pomocí spojovacího objektu "action", který lze libovolně slučovat s dalšími objekty v kontejneru "actions", čímž je možné snadným ovládáním pouze jednoho kontejnerového objektu ovládat libovolné množství akcí najednou. Knihovna definuje i další třídu objektů "timingActions", mající za úkol náhodné nebo přesné časování a opakování sekvencí akcí, nebo dokonce sekvencí takto vytvořených sekvencí. To je umožněno tím, že objekty tříd "actions" (slučuje více akcí dohromady) a "timingActions" (plánuje spouštění akcí) mohou ovládat objekty vytvořené pomocí všech "akčních" tříd, včetně třídy své vlastní (action,actions,timingAction).
  • Ovládání akcí
    Každá "akční" třída (action, actions, částečně i timingActions) implementuje několik metod ovládání. Je to metoda přehrávání animace od začátku, metoda pauzy, metoda okamžité reverzace (ať už je průběh akce kdekoli) a metody okamžitého spuštění akce vpřed nebo vzad z aktuální pozice. AnimH tedy podporuje i reverzní akci (pohyb zpáteční k výchozímu stavu) s tím, že je kdykoli možné snadno obracet směr akce, pozastavovat ji a opět spouštět (např. z popudu nějaké události myši, klávesnice nebo časovače).
  • Různé animace různých vlastností objektů je možné kombinovat, a docílit tak nezměrného množství efektů.
    Knihovní třídy objektů jsou navrženy tak, aby bylo možné docílit maximální flexibility jejich použití. Jedná se o rozložení veškeré funkcionality do přesně vyhraněných, jednoduchých a plně konfigurovatelných tříd, jejichž mnoha možnými kombinacemi s mnoha možnými parametrickými hodnotami je možné dosáhnout téměř jakéhokoli efektu. Objekty těchto tříd je možné vytvářet s minimem nutných parametrů (optimálními přednastavené hodnoty). Stačí jen hotový objekt vložit do kontejneru jiného objektu, který s ním umí zacházet, a efekt je na světě. Na knihovnu animací navazují naše další knihovny, které umí pracovat například s dynamickými menu nebo různými složitějšími efekty.
Základní postup používání knihovny:
  1. Vyrobíme akční šablonu, které přiřadíme sekvenci pohybů. Každému pohybu přiřadíme časový interval a seznam časových křivek (druh každé křivky je dán matematickou funkcí implementovanou do příslušné třídy objektu). Každé časové křivce přiřadíme seznam vlastností DOM objektů, které se mají podle časové křivky měnit. Ke každé vlastnosti přiřadíme relativní hodnotu, určující její změnu. Mezi vlastnosti můžeme zařadit i pseudovlastnosti. Pseudovlastnosti mají svá vlastní konstrukční pravidla. Všechny realizované definice můžeme realizovat jediným výrazem v JavaScriptu (viz. Příklad ).
  2. Definujeme DOM objekt (<img>, <span>, <div> apod.) a přiřadíme výchozí hodnoty DOM vlastností (všech, které se na animaci podílejí) pomocí "style" atributu HTML značky.
  3. Vyrobíme objekt "action", kterému přiřadíme připravenou akční šablonu a připravený DOM objekt. Jednu konkrétní akční šablonu můžeme takto sloučit i s dalšími DOM objekty, které se mají animovat stejným způsobem.
  4. Volání ovládacích funkcí objektu "action" umístíme do příslušného kódu Javascriptu (reakce na události apod.). Objekty "action" je možné slučovat do skupin pomocí tříd objektů "actions". Způsob dalšího používání těchto objektů je podobný jako v případě objektů třídy "action". Vnořování tříd objektů "actions" je neomezené.
  5. Pokud se mají akce (nebo skupiny akcí) postupně spouštět po určitém nebo náhodném časovém intervalu, vyrobíme objekt třídy "timingActions", kterému přiřadíme: seznam právě těchto akcí, požadovaný časový interval (nebo rozsah intervalů pro náhodné časování) a počet opakování všech akcí v seznamu. Způsob dalšího používání objektů třídy "timingActions" je podobný, jako v případě třídy "action".
  6. Chceme-li si zadefinovat složitější efekty v podobě tříd objektů, vyrobíme potomky zmiňovaných objektů a přiřadíme jim specifické metody a vlastnosti. Tímto způsobem je možné udržet otevřenost API vrstev, které jsou pak flexibilní pro budoucí možné použití.
Valid HTML 4.0!Valid CSS!
Čas poslední modifikace: Wed Dec 3 10:31:19 2008
© Pavel Hrubec, 2005