Vytváříme animované mapy: HTML/JavaScript

Autor Rosta Netek Aktualizováno 27. 3. 2011

Tento seriál si klade za cíl představit vybrané možnosti tvorby animovaných map. V prvním díle je věnována pozornost animaci pomocí JavaScriptu. V příštích dílech to bude technologie Flash, animace v Google Earth pomocí KML a další.

Jednoduché JavaScriptové animace mohou nalézt využití u vizualizací změn objektů a jevů v čase. Například u map rozvoje urbanizace území v čase, map srážek či teploty. Jedním z nejčastějších a nejznámějších využití JavaScriptu pro animaci je vizualizace periodických družicových snímků. Vždy je zapotřebí shromáždit kolekci map daného území v několika časových obdobích. U map, kde to téma dovoluje (srážky, teplota apod.), je možné použít pro všechny obrázky jednotný podklad (topografická mapa, letecký snímek) a téma na něj klást.

Animace se odehrává v těle HTML stránky a je založená na opakovaném střídání zobrazení několika obrázků (map) o stejné velikosti. Pomocí elementů <img /> je do stránky vloženo libovolné množství obrázků, ke kterým přistupuje JavaScript, jenž se stará o pravidelné střídání jejich zobrazení a je tedy dosaženo efektu animace (pokud je promítáno minimálně 10-12 obrázku za vteřinu, lidské oko tento pohyb vnímá jako plynulý).

Velmi jednoduchým a příjemným řešením je využití frameworku JQuery a pluginu Cycle, díky čemuž je autor oproštěn od programování samotné animace. Postačuje jen vložit pár řádků hotového kódu do hlavičky webu a nastavit parametry animací, především rychlost změny snímků. Pomocí kaskádových stylů (CSS) je možno animaci vložit na jakékoli místo na stránce, popřípadě přidat rámeček či stínování.

Obecný příklad zápisu HTML stránky s JavaScriptovou animací.

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“

„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs“ lang=“cs“>

<head>

<meta http-equiv=“content-type“ content=“text/html; charset=utf-8″ />

<title>Animace – JavaScript </title>
<!– externí knihovna stažitelná z http://jquery.com –>

<script type=’text/javascript‘ src=‘./jquery.js‘></script>
<!– externí knihovna stažitelná z http://jquery.malsup.com/cycle –>

<script type=’text/javascript‘ src=‘./jquery.cycle.js‘></script>
<!– skript zajišťující chod animace – nastavení parametru rychlosti změny snímku  –>

<script type=’text/javascript‘>

$(document).ready(function() {

$(‚.slideshow‘).cycle({

speed: 1

});

$(‚.slideshow‘).cycle(‚pause‘);
<!– skript umožňující animaci kdykoli zastavit a opět spustit  –>

$(‚#play‘).click(function() {

$(‚.slideshow‘).cycle(‚toggle‘);

return false;

});

});

</script>

</head>
<!– tělo stránky se všemi obrázky animace  –>

<body>

<div class=’slideshow‘>

<img src=‘cesta k 1. obrázku animace‚ alt=’…‘ title=’…‘ height=’…‘ width=’…‘ />

<img src=‘cesta k 2. obrázku animace‚ alt=’…‘ title=’…‘ height=’…‘ width=’…‘ />

.

.

.

<img src=‘cesta k n-tému obrázku animace‚ alt=’…‘ title=’…‘ height=’…‘ width=’…‘ />

</div>
<!– tlačítko pro spuštění a zastavení animace  –>

<a id=“play“ title=“Zastavit / Spustit animaci“ href=“#“>Zastavit / spustit</a>
</body>

</html>