GISportal
Jedeme i díky Vám

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

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.

http://radar.bourky.cz

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>

 

Výsledek tohoto kódu s doplněnými cestami k obrázkům:
http://www.basamastudio.cz/gisportal/js_animace/example.html

Příklady JavaScriptových animací:

1 komentář
  1. LynX napsal/a

    pěknééé 🙂

Podělte se s Vaším komentářem

Emailová adresa nebude zveřejněna