KODÉR.BLOG

GIF (vs. SPRITE) a zjednodušení webových animací nebo snad ne?

19 Jan 2015

Hej! Boží animace, uděláme jí videem a nebo ne. GIFem a aspoň bude fungovat všude a bude to skoro bez práce, použijeme jen nějaký JS plugin na ovládání a tečka... ano, víc už jsem se splést bohužel nemohl.

Ale k tomu všemu jsem se dostal, až po X hodinách práce, tak neudělej stejnou chybu. To že si dáš vyhledat jQuery přehrávače na GIFy neznamená, že ti ulehčí práci. Protože buď nefungují nebo fungují špatně a nebo když už se všechno podaří, tak zase neumí něco jiného, třeba skákat na přesný frame, měnit rychlost přehrávání...

Animace pěkná, ale na CSS / JS složitá, času málo a lenost veliká? GIF, teda vlastně SPRITE ti to dost ulehčí.

Od GIFu ke SPRITE

Potom co příjdeš na to, že GIF opravdu nefunguje, se stane i pro tebe realitou sprite a pro vytvoření lze použít např. commins.ca/gif-to-png-tilesheet nebo gif2sprite.com, bohužel nedovolují moc nastavení a co víc, třeba poloprůhledný GIF, převedený na PNG dělají lehce "okousanej".

Proto je tady další možnost a to je třeba výborný Adobe Photoshop script SpritePlane, který dokáže nastavit počet řádků, sloupců a samozřejmě zvolit kvalitu výsledného sprite díky Photoshopu.

Jasně! GIF prostě většinou bude datově menší, ale...

Kvalita animace je důležitá

Popravdě jsem z toho měl ze začátku docela strach, jak bude vypadat výsledek, ale nakonec padla volba na jQuery.animateSprite, který funguje parádně, včetně změny rychlosti, případně definice, které framy jsou pro jakou animaci, tím se ušetří třeba nejen počet requestů.

Opravdu jsem byl velice mile překvapen a nebojím se ho doporučit, však mrkni na dokumentaci, co všechno umí.

Není nic horšího než animace, která se "kouše"... třeba i lehce!

Víc dneska nemám

To je vše, co jsem chtěl v novém roce napsat a ušetřit nějaký ten čas komukoliv, kdo bude mít podobný šílený nápad, že bude něco animovat pomocí GIFu. Nebo naopak kdyby jsi měl co k tomu napsat nebo říct, popřípadě sám máš zkušenost, tak klidně do komentářů. Díky!

Sdílet:

comments powered by Disqus