Pořád nás zaráží, jak málo se SVG animace stále používá. My jsme se do ní trochu zamilovali. Obvykle se totiž s její pomocí dá z jednoduchého webu vyrobit opravdu přitažlivý a efektní kousek. Obzvláště ve chvíli, kdy máte za úkol přiblížit nezainteresovanému publiku něco odborného.
SVG animace jsme využili, když jsme pro našeho klienta - České Radiokominukace vymýšleli, jak uchopit srozumitelně problematiku IoT a přiblížit ji běžnému nezkušenému uživateli. Rozhodli jsme se všechno, co nám na SVG připadá skvělé sepsat do krátkého článku.
Výhody:
Grafika:
Grafické podklady byly vytvořené vektorovou grafikou v Adobe Illustrator. Celkovou grafiku jsme rozdělili na jednotlivé elementy dle požadavků animace (zbytečné rozdělování a vysoké množství elementů neprospívá rychlosti SVG animací). Elementy jsme potom pojmenovali pro jejich rychlejší identifikaci. Výsledek jsme exportovali do .svg.
Výhody SVG:
Jde o vektorovou grafiku, která lze libovolně zvětšovat se zachováním kvality, takže nezáleží na tom, zda ji prohlížíte na mobilu, tisknete na billboard, nebo se na ni za pár let kouknete na 16k televizi - vždy bude perfektní (= možnost multimediálního použití, nadčasovost). Oproti GIF animacím je zde i velká datová úspora a oproti HTML canvasu obsahuje reálné DOM elementy, což značně urychlí práci a potřebný kód je ve výsledku kratší.
Implementace:
SVG lze na web vložit různými způsoby, my jej do Latte šablony vypisujeme inline pomocí příkazu v PHP echo file_get_contents, díky čemuž není problém aktualizovat .svg zdroj bez porušení šablony a přitom máme všechny elementy dostupné a plně manipulovatelné.
Animace:
Na jednotlivé javascriptové animace jsme použili animační platformu od GreenSock (GSAP), se kterou lze animovat naprosto cokoliv snadno a rychle (přes barvy, pozice, rotace, opacitu po jakékoliv číselné hodnoty). Hlavní výhoda je jednoduchost v tvoření timeline, jejich navazování a časování, takže když klient řekne, že by chtěl něco o pár milisekund jinak, nebo v jiném pořadí, zůstanou vám všechny vlasy na hlavě. Animace jednotlivých sekcí spouštíme postupně jak přes ně uživatel scrolluje (pomocí Waypoints od I make web things = Caleb Troughton). Díky tomu vypadá stránka živě, moderně a všem animacím se při prohlížení stránek dostane náležité pozornosti. Navíc všechny animace vyobrazující způsoby využití IoT, je po jejich přehrání možné spustit znovu - to kdyby vám něco uniklo.
Učarovaly vám SVG animace stejně, jako nám? Cítíte, že by Vaší webové prezentaci pomohla názorná vysvětlení za pomoci animací ? Ozvěte se nám, rádi si s vámi o SVG a webech promluvíme.
Copyright PIXMAN 2024
