jQuery (14) – animace a jejich nastavení

Animujte (skoro) cokoliv

Kromě specializovaných animačních metod, které už znáte z minulého dílu, je v jQuery k dispozici také obecná metoda animate(). Ta umožňuje animovat téměř libovolné vlastnosti nastavitelné pomocí CSS, a to i více vlastností najednou. Vždy se ve volání metody předá cílový stav, kterého má být dosaženo na konci animace. Tady je příklad:

var props = {
  left: 500,
  top: 200
};

$('#box').animate(props, 2000);

Do objektu v proměnné props se nastaví cílová poloha, do které má být daný box posouván (z aktuální polohy). Metodě animate() lze předat další parametry, v tomto případě je to doba trvání animace (2000 ms), může to být styl animace (easing), případně funkce volaná po skončení. Další možností je předat metodě druhý objekt, kde toho lze nastavit ještě mnohem víc – viz minulý díl.

Ne každou vlastnost popsaná pomocí CSS lze animovat. Základní jQuery umí jen jednoduché (skalární) číselné hodnoty, například pozice nebo rozměry. Naopak barvy animovat nelze, protože pro jejich popis je potřeba více hodnot (jsou to vektorové parametry). Pro animaci barev však existuje plugin jQuery.Color, který v případě potřeby podporu zajistí.

Animační fronta

Všechny dosavadní příklady měly jedno společného – jakmile animace začala, už se do ní nesahalo a doběhla přesně tak, jak bylo předem nadefinováno. Jenže to mnohdy není úplně to, co bychom si přáli. Zvlášť u složitějších, déle trvajících animací bývá žádoucí mít možnost do procesu zasáhnout a buď animaci zastavit nebo změnit její podobu.

Animace se obvykle spouštějí pomocí front, ve kterých čekají ty efekty, na které přijde řada později. Běžně se u objektu používá jen jediná fronta (nazvaná fx), ale obecně jich může být víc. Fronty lze použít i k jiným činnostem než k animacím, byť se právě pro animace používají asi nejčastěji.

Zastavení animace

Vezměme nyní příklad z minulého dílu, kde se po kliknutí na záhlaví zaroluje nebo vyroluje box. Pokud někdo klikne ještě před doběhnutím animace, má smůlu a musí počkat, než animace doběhne. To lze ale snadno změnit:

$('.boxhdr').click(function() {
  $(this).parent().child('.boxcont').stop().slideToggle();
});

Všimněte si drobné změny – přidání metody stop(). Ta zastaví probíhající animaci, což umožní okamžité rozběhnutí animace opačným směrem. V tomto případě probíhá jen jediná animační operace, takže není potřeba nijak manipulovat s frontou. Pokud bychom měli operací více, bylo by žádoucí frontu vyprázdnit (hodnotou true v parametru metody stop()):

$(this).parent().child('.boxcont').stop(true).slideToggle().delay(100);

Celé to lze ještě upravit tak, že se animace dokončí skokem – přímo se nastaví hodnota, jako kdyby animace doběhla do konce. Tady je opět příklad:

$('#image').show(5000);

$('#image').click(function() {
  $(this).stop(false, true);
});

Animovat se bude objevování obrázku. Jakmile na něj uživatel klikne, animace se zastaví a obrázek se naplno zviditelní. Výše uvedené příklady pracují všechny s výchozí frontou fx;název případné jiné fronty by se uvedl jako první parametr volání.

Přidávání a odebírání efektů, vymazání fronty

Efekty (animační operace) nebo i jiné funkce lze za běhu animace přidávat a odebírat. Přidáváme-li na konec fronty běžnou animační funkci, lze to udělat tak, jako kdybychom začínali animovat od začátku. Jiné je to ale u funkcí, které nejsou přímo animační, tam to za běhu tak jednoduše nejde.

$('#image').queue(function() {
  alert('Upozornění');
  $(this).dequeue();
});

Kód přidá na konec fronty k vykonání funkci, která zobrazí upozornění. Po provedení kódu je nutné zavolat metodu dequeue(), která zajistí odebrání z fronty a spuštění další funkce v řadě.

Metodou queue() lze provádět i složitější manipulace s frontou. Lze získat pole všech funkcí ve frontě, upravit ho podle potřeby a zase vrátit do fronty (nebo nahradit úplně jiným polem):

var q = $('body').queue();
q.shift();
$('body').queue(q);

Tento kód odebere z fronty první funkci v pořadí (která čeká na provedení; nemá vliv na právě probíhající animaci). Chceme-li frontu úplně vymazat, lze to udělat buď metodou stop() s parametrem true (viz výše); to ale zastaví i probíhající animaci. Nebo můžeme frontu vyprázdnit samostatně:

$('body').clearQueue();

Použití vlastní fronty

Běžně není důvod používat na témže objektu DOM více front než jednu. Proto si většinou vystačíme s výchozí frontou fx. Někdy ale můžeme potřebovat, aby se animace nebo jiná posloupnost operací spustila nezávisle na tom, co už běží. Pak se další fronta hodí.

Při použití vlastní fronty je potřeba používat u animačních metod vždy tu verzi, která přijímá objekt s vlastnostmi animace. Může to tedy vypadat třeba takto:

var opts = {
 duration: 5000,
 queue: 'myqueue'
};

$('#image').show(opts);

Tím se zajistí vložení animace (postupného zobrazení obrázku) do fronty myqueue. Ovšem pozor – na rozdíl od výchozí fronty se animace nespustí automaticky, je potřeba explicitně odebrat první prvek a spustit jeho funkci (viz výše):

$('#image').dequeue('myqueue');

Při operacích s frontou se pak musí samozřejmě používat její název, například vymazání fronty by vypadalo takto:

$('#image').clearQueue('myqueue');

Nastavování animací

Upřímně řečeno, moc se toho nastavovat nedá. Jsou jen dva nastavitelné parametry – vypnutí animací a frekvence animačních kroků. Vypnutí se hodí třeba v případě, že se stránka otevře na nějakém hodně pomalém zařízení a to je „nestíhá“ zobrazovat. Někoho mohou animace také rušit. Stačí pak například vytvořit malé tlačítko:

<span id="no-anim">Vypnout animace</span>

Na tlačítko se pak „pověsí“ vypínací kód:

$('#no-anim').click(function() {
  $.fx.off = true;
});

Vrácením hodnoty na false se animace opět zapnou. Hodnotu lze samozřejmě i číst a tedy využít k zobrazení stavu, resp. volbě vhodného popisku tlačítka i příští hodnoty. Vypnutí animací neznamená, že by neproběhly vůbec – jen se prostě přímo nastaví cílový stav.

Druhým nastavitelným parametrem je frekvence kroků, resp. jejich perioda. Výchozí hodnota je 13 ms, což odpovídá kmitočtu 77 Hz. Zkracovat tuto periodu příliš nemá smysl, protože snímková frekvence běžných LCD monitorů bývá 60 Hz. Naopak může mít smysl ji přiměřeně prodloužit, sníží se tím zátěž procesoru a na přenosných zařízeních to tedy i poněkud prodlouží výdrž na baterii (to se ale projeví jen tam, kde animace trvá relativně dlouho; pro animace rozbalování se pro prakticky neprojeví). Následující kód nastaví periodu 40 ms:

$.fx.interval = 40;

S delší periodou může animace působit méně hladce, je to ale lepší řešení, než když procesor výchozí periodu nestíhá a animace se zasekává.

Co zbývá v jQuery

Příští díl bude poslední o „holém“ jQuery (pak už bude následovat jQuery UI). Proto do něj spadlo to ostatní užitečné, co v jQuery ještě je – například připojování dat k objektům nebo odložené zpracování.