Néhány hónappal ezelőtt Józsi egyik posztja nyomán poroltuk le a témát, és kezdünk el újra behatóbban foglalkozni az svg kínálta lehetőségekkel. Bennem is az élt még, hogy az svg valami pluginen keresztül támogatott, weboldalakon iszonyatosan körülményesen és pazarlóan használható formátum. 

Közben a világ elég nagyot változott, gyakorlatilag univerzálisan alkalmazható, szóval tettünk vele még egy kísérletet. Az svg legelső és legfontosabb előnye nyilvánvalóan a vektorosságban rejlik a raszter képekhez (png, gif, jpg) képest. 

A vektorfájl persze arra is csábítja az embert, hogy animálja azt. Hiszen megteheti. És részemről itt lett világos, hogy - túl az svg-ken - a finom animációk kidolgozása szemléletformáló erővel bír. A webdizájn fontos, meghatározó részét képezhetik a részleteiben kidolgozott mozgások. Van tehát a UI elemek animálásának egy szemantikája, amire elég könnyű rákapni, ha az ember elkezdi csinálni. 

A UI elemek animálása rendszerint csak kontextusában érthető és értelmezhető a felhasználó számára. Mégis, a példa kedvéért íme egy részleteiben kidolgozott animáció, amin jól látható, hogy miről is beszélünk: 

A fenti demo érdekessége, hogy teljes mértékben CSS keyframe-ekre épül, és a Bounce.js segítségével készítette Joel Besada, aki a kapcsolódó posztjában részletesen véggiveszi azokat az aprólékos, ám egyszerű lépéseket, amikből összeáll egy ilyen UI mozgatás. 

Még egy példa, szintén SVG + CSS kombóval megoldva: 

Mi első felvonásban egy spinner ikont mozgattunk meg. Itt is lehet látni. Hogy aztán egyre komplexebb megoldásokban is merjünk gondolkodni.

Az animációkkal ugyanaz a veszély, mint bármi mással a webdizájnban: ha nem kellő érzékenységgel és visszafogottsággal használjuk, könnyen nevetségessé teszi a munkánkat. Ráadásul fölöslegesen zabálja fel erőforrásainkat. Viszont ha rászánjuk az időt, és kikísérletezzük az adott funkcióhoz és felületi jelentéshez/eseményhez illő minimális animációt, nagyon sok felületi problémától meg tudunk szabadulni, ráadásul életre is keltjük a dizájnt, pont annyira, amennyire a felhasználót segíti a weboldal, folyamat, navigáció értelmezésében. 

Azért is írok minderről, mert úgy érzem, hogy erre a témára nagyon rímel az, amit tegnap a Google "Material Design" néven bejelentett. Persze más dolog oprendszert tervezni, mint mobil alkalmazásokat vagy weboldalakat, de ezzel együtt is én mindenkinek csak tanácsolni tudom, hogy szánjon rá pár napot, hogy elmélyüljön az svg animációk, css keyframe és ui elemek megmozgatása témakörben. Már amennyiben eddig még nem tette meg. 

Ajánlom még tanulmányozásra az snapsvg.io oldalt. Illetve ezt a demót. Meg ezt, meg ezt.

Nem vadonatúj dolgokról van szó, viszont szerintem hamarosan olyan uralkodó témává fog válni, mint pár éve a flat design. (A Google tegnapi dizájn demója még egy érdekes témát dobott be szerintem, ez pedig a való világhoz kapcsolódó felületi megoldások. De erről majd egy másik posztban.)

Címkék: svg css keyframes svg animáció material design webdesign animációk