Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Mozgó cipó – Animált SVG-k a Loaffal

2021. június 29. | Bognár Péter

# # # #

Nem nagy titok, hogy szeretjük az SVG formátumot, aminek már többször is hangot adtam itt a blogon (mutattam már be több ingyenes ikonkészletet, pl. itt és itt, no meg remek online svg eszközöket is). A vektoros formátumok szépsége, hogy minden kijelzőn a lehető legélesebb körvonalakkal jelennek meg, könnyen szerkeszthetőek, átszínezhetőek, és a képernyőn elfoglalt méretüktől függetlenül minimális helyet foglalnak.   

Ezek mellett van még egy remek képessége a Scalable Vector Graphic formátumba csomagolt rajzoknak: nagyon egyszerűen animálhatóak, a mozgó SVG-k pedig a vektoros animációkra jellemző elegáns folyamatossággal mozognak, hiszen a mozgás nem fázisok cserélgetésével történik, hanem a beadott útvonalak mentén a képet alkotó vektorok mozdulnak odébb, pixelről pixelre. 

A mozgó SVG-k bűvöletében gondolhatta úgy Philip Ardeljan ausztrál UI designer barátunk, hogy súlyosan elhanyagolt ez a terület a web- és UX design világában, így piaci rést orrontva, gyorsan meg is jelentette az ismeretlen okokból Loaf (cipó) névre keresztelt megoldását.

A Loaf a mai trendekhez képest kicsit anakronisztikus módon egy önálló, letöltendő alkalmazás, nem a megszokott online webappok népes táborát gyarapítja. A cipó névleg egy SVG szerkesztő alkalmazás, aminek mellesleg beépített animált könyvtára is van, de kicsit közelebbről megnézve azonnal rájöhetünk, hogy ez valójában fordítva igaz, hiszen az editor nagyon kevés (bár hasznos) funkcióval rendelkezik, és a jelenlegi formájában nem tud külső fájlokat sem megnyitni (az Open menüpontra nekem konkrétan semmi nem történt, de ez lehet egyéni bug is).

Na de mit tud? 

A Loaf könyvtára pillanatnyilag 555 animált ikont/piktopgramot tartalmaz, ezek közül 75 ingyenesen használható, a többi eléréséhez elő kell fizetni a szolgáltatásra, vagy egy egyszeri összegért cserében örökös tagságot szerezni (ez mondjuk a jelenlegi állapotban elég nagy bizalmat feltételez a fejlesztő irányában, hiszen egy egyszemélyes projektről beszélünk).

Az editorban megváltoztathatjuk a vonalak és kitöltött felületek színét és a vonalak vastagságát, valamint az animáció sebességét és az egész piktogram nagyságát. Ez ugyan nem sok, mégis ad a kezünkbe némi kontrollt a végeredmény felett. 

Ha megtaláltuk a számunkra leginkább megfelelő külsőt és tempót, a végeredményünket lementhetjük SVG fájlként, de akár a hozzá tartozó kódrészletet is egyszerűen a vágólapra másolhatjuk, hogy aztán kódként helyezzük el az oldalunkban. 

Nagyon drukkolok Ardeljannak, a vállakozás számomra nagyon szimpatikus, és ha sikerrel jár, a jövőben még sok ikonnal bővülhet a kis cipó, mindenki legnagyobb örömére.

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange