Split Tech City je zajednica sastavljena od tvrtki, udruga, institucija, meetupa i pojedinaca koji su posvećeni razvoju tehnološkog sektora u Splitu i regiji.
Postani član
Otkrijte kako sitne, ali moćne SVG+CSS animacije mogu podići vaše sučelje na novu razinu – bez vanjskih biblioteka, s vrhunskom izvedbom i potpunom kontrolom nad dizajnom.
Jeste li se ikada pitali zašto neke web stranice djeluju nevjerojatno polirano, svaka animacija je besprijekorna, a svaki klik ili hover daje osjećaj “smooth” responzivnosti? Taj fini dojam često potječe od mikro-interakcija – sitnih, ali moćnih animacija koje korisniku daju neprimjetan, ali važan vizualni feedback.
Otkrit ćemo kako, koristeći SVG i CSS, možete uvesti te male, ali ključne detalje u svoje projekte, podići kvalitetu korisničkog iskustva na novu razinu i istovremeno zadržati vrhunsku izvedbu i čitljivost koda. Krenimo s time da vidimo čime sve možemo “dotjerati” naše sučelje i zašto su baš ove mikro-animacije tajna poliranih webova.
SVG (Scalable Vector Graphics) je vektorski format za prikaz dvodimenzionalne grafike, s podrškom za interaktivnost i animacije.
To znači da se svaki oblik u SVG slici opisuje matematički (pomoću točaka, linija i krivulja), umjesto skupom obojenih piksela. Primjerice, krug se definira svojim središtem i polumjerom, a pravokutnik pozicijom i dimenzijama unutar koordinatnog sustava.
Zbog ovakvog pristupa SVG ima nekoliko prednosti:
S obzirom na to da se svaki oblik u SVG grafici opisuje matematički, SVG koristi vlastiti koordinatni sustav za pozicioniranje elemenata. Taj koordinatni sustav malo je drugačiji od onog na koji smo navikli u matematici.
Kod matematičkog kartezijskog sustava uzimamo gornji desni kvadrant kao pozitivni smjer osi (x desno, y gore). No, u SVG-u (kao i u drugim računalnim grafičkim sustavima) pozitivni smjer x-osi ide udesno, a pozitivni smjer y-osi ide prema dole.
SVG omogućuje beskonačno “platno” u svim smjerovima – teoretski, sadržaj možete nacrtati bilo gdje u koordinatnom sustavu. Naravno, ne želite prikazivati beskonačan prostor, zato SVG uvodi pojam viewBox. ViewBox određuje koji pravokutni izrez tog beskonačnog koordinatnog sustava će biti vidljiv unutar SVG elementa (slično kao što prikazujemo samo dio beskonačnog matematičkog koordinatnog sustava kada crtamo na ploči).
Drugim riječima, viewBox definira koji dio SVG “platna” (koordinatnog sustava) je vidljiv u zadanom prozoru/pogledu. Primjerice, ako postavimo atribut viewBox=”0 0 100 100″, to znači da naš prikaz obuhvaća koordinatni prostor od točke (0,0) do točke (100,100) – sve unutar tog područja bit će vidljivo, a sve izvan njega bit će odrezano.
Viewport SVG elementa (kao i zadana širina/visina u HTML-u ili CSS-u) definirat će kolikom će se veličinom taj viewBox prikazati na ekranu, odnosno može doći do skaliranja sadržaja. Tako, recimo, SVG tag <svg width="200" height="200" viewBox="0 0 100 100"> postavlja vidljivo područje od 100×100 koordinatnih jedinica, koje će zauzeti 200×200 piksela na ekranu – sadržaj će se uvećati 2 puta jer 100 unit-a koordinatnog sustava prikazujemo u 200px prostora.
Kad smo definirali naše “platno” (viewBox), možemo početi crtati elemente.
Napomena: Kada SVG pišemo kao zasebnu .svg datoteku (ili inline u HTML), na početak <svg> elementa trebamo dodati atribut xmlns="http://www.w3.org/2000/svg" (kako bi preglednik ispravno protumačio elemente kao SVG, a ne kao običan HTML/XML).
Primjerice, ako unutar SVG-a s viewBox-om od 0 0 100 100 nacrtamo:
dobit ćemo pravokutnik dimenzija 50×50 koji je smješten u gornjem lijevom kutu (jer nismo naveli drugačije x i y atribute, pa su default 0). Po zadanim postavkama pravokutnik će biti ispunjen crnom bojom, budući da nismo specificirali atribut fill.
Naravno, SVG podržava i druge osnovne oblike – možemo crtati kružnice, elipse, linije, poligone i dr. koristeći pripadajuće elemente (<circle>, <ellipse>, <line>, <polygon>, <polyline>, itd.).
Iako se osnovni oblici čine ograničenima, uz malo mašte i vještine mogu se postići impresivni rezultati koristeći samo njih.
<path> – kralj SVG elemenataNajmoćniji i najsvestraniji element za crtanje u SVG-u je <path>. Dok gore spomenuti “osnovni” oblici imaju specifične uloge (pravokutnik, krug itd.), <path> element može iscrtati praktično bilo koji oblik – ravne linije, zaobljene krivulje, lukove, pa i čitave komplekse oblika. Zapravo, svaki drugi SVG oblik možete prikazati putem odgovarajuće putanje.
Zbog te fleksibilnosti, <path> je ključan za crtanje kompleksnijih oblika i ilustracija. Istovremeno, njegova sintaksa (niz slova i brojki unutar atributa d) na prvi pogled djeluje zastrašujuće.
Putanja se definira nizom naredbi (označenih slovima) i pripadajućih numeričkih parametara (koordinata, duljina i sl.). Svako slovo predstavlja jednu “uputu” crtaču SVG oblika, a brojevi koji slijede određuju parametre te upute. Evo najvažnijih naredbi i što one znače:
M x,y naredbe, sljedeće crtanje počet će od koordinata (x, y). Npr. M 10,20 postavlja početnu točku na (10,20). Postoji i varijanta ms malim slovom, koja radi isto to, ali relativno u odnosu na trenutnu poziciju (npr.m 5,0 pomakne trenutnu poziciju za 5 udesno). L x,y nacrtat će liniju od trenutne pozicije do apsolutne koordinate (x,y). Postoji i relativna varijanta l. Preporučam ovaj super praktičan codepen kao pomoć u razumijevanju Bézierovih krivulja. Primjer prikazuje interaktivno povlačenje kontrolnih točaka Bézierove krivulje.
Kombinirajući sve ove naredbe, <path> nam daje “slobodne ruke” za crtanje praktično bilo čega.
Još jedna zanimljivost SVG-a jest da inline SVG može biti React komponenta. Drugim riječima, unutar React JSX koda možemo direktno vratiti <svg> element kao dio renderiranja neke komponente:
Napomena: U React JSX sintaksi nije potrebno ručno navoditi atribut xmlns="http://www.w3.org/2000/svg" – React automatski kreira SVG element s ispravnim namespaceom.
Ovakav pristup otvara vrata brojnim mogućnostima. SVG se ponaša kao DOM element, što znači da ga možemo stilizirati CSS-om i manipulirati putem JavaScript logike komponenti. U usporedbi s klasičnim HTML/CSS-om, gdje izrada nepravilnih oblika (npr. neke kompleksne ilustracije ili animacije) često zahtijeva korištenje raznih hackova ili pak <canvas> elementa, ugrađivanje SVG-a kao komponente pruža elegantnije rješenje.
Zašto je to bitno? Jer moderni frontend frameworkovi (React, Vue, Angular itd.) zasnivaju se na komponentnom pristupu – aplikacija se gradi od manjih, samostalnih dijelova (komponenti) koje inkapsuliraju svoje stanje i logiku.
SVG se u taj pristup uklapa jednako prirodno kao i bilo koji <div>: možemo jedan složeniji SVG podijeliti na više manjih komponenti, gdje svaka komponenta predstavlja dio grafike (npr. jedan sloj ili oblik unutar SVG-a) sa svojim lokalnim stanjem i logikom.
Time dobijamo čišći, modularni kod i mogućnost da lakše upravljamo kompleksnošću.
Primjerice, možemo imati komponentu koja predstavlja ikonicu s animacijom, koju potom koristimo kroz aplikaciju gdje je potrebna.
Lokalno stanje te komponente može kontrolirati animaciju SVG-a (zaustaviti, pokrenuti na hover, promijeniti boju ovisno o temi itd.), a ostatak aplikacije ne mora znati detalje implementacije – slično kao i sa svakom drugom React komponentom.
Ukratko, inline SVG + React = kombinacija nepravilnih oblika i moći komponenti. Dobivamo najbolje od oba svijeta: slobodu dizajna (zahvaljujući SVG-u) i strukturu te ponovno iskoristiv kod (zahvaljujući komponentnom pristupu).
SVG elementi imaju vlastite mehanizme za animaciju (SMIL animacije unutar SVG-a, koje se definiraju <animate> elementima).
Malo povijesti oko SMIL-a – oko 2015. Google je planirao deprecirati i ukloniti SMIL iz Chrome-a, zagovarajući prelazak na CSS animacije i Web Animations API kao jedinstvena rješenja za SVG i HTML animacije.
Tada je SMIL podrška bila neujednačena, a razvoj SMIL specifikacije je stagnirao. Iako je Chrome nakratko i počeo prikazivati konzolna upozorenja za SMIL, povratna informacija zajednice odgodila je to uklanjanje – Chromium tim na kraju nije ukinuo SMIL i on je i dalje tu. Ipak, zbog te najave i činjenice da SMIL nije radio u IE-u, puno tutoriala i članaka je savjetovalo da se radije koriste CSS animacije ili JavaScript kako bi animacije radile posvuda.
Danas, uz potpunu podršku, SMIL je i dalje validna opcija za SVG animacije, posebno unutar samostalnih SVG datoteka ili ikona. Prednosti SMIL-a su što je deklarativan (animacija se definira u SVG markup-u, ne u CSS/JS), može animirati atribute koje CSS ne može, i radi čak i kada se SVG koristi kao <img> ili background-image (gdje CSS animacije ne bi mogle utjecati na sadržaj slike).
Međutim, SMIL je pomalo “zaboravljena” tehnologija – znanje i community support za SMIL nije tako rasprostranjen. Preporuka da se koristi CSS ili JS često je motivirana developer iskustvom i dugoročnom održivošću.
Razvoj SMIL-a (SVG Animations Level 2) praktički nije aktivan, dok se CSS i WAAPI (Web Animation API) aktivno razvijaju. Googleova namjera da ga zamijeni drugim tehnologijama ostala je zapamćena, pa konzervativnije gledano, neki se pitaju hoće li SMIL jednog dana ipak biti uklonjen (zasad nema najava za to, podrška ostaje).
U tom smislu, preporuka za CSS/JS alternative ostaje relevantna, no ne zbog podrške u preglednicima (koja je dobra), nego više zbog navedenih praktičnih razloga – osim kad je potrebno animirati atribute koje CSS ne podržava, za što SMIL i dalje ostaje zgodna opcija.
Što se tiče CSS animacija – slično kao i kod HTML elemenata, ne mogu se animirati baš sva svojstva, već samo ona koja to podržavaju (npr. položaj, veličina, boja ispune, opacity itd.).
Kombinacija SVG-a i CSS animacija posebno je pogodna za jednostavnije animacije. Za takve slučajeve često nam ne trebaju teški ili kompleksni alati – dovoljno je iskoristiti par linija CSS-a nad SVG elementima. Performanse ovakvih rješenja su izvrsne, jer browser direktno animira vektorske oblike (koji su često vrlo optimizirani za promjene svojstava), zaobilazeći potrebu za stalnim re-renderiranjem rastera. U pravilu, animiranje vektorskih svojstava (poput putanje, duljine crte, transformacija) uz CSS je nenadmašno po performansama za jednostavne efekte.
Za ilustraciju koliko SVG može biti moćan u animacijama, možemo se osvrnuti na neke moderne CSS mogućnosti koje su zapravo posuđene iz svijeta SVG-a. Primjer je CSS Motion Path modul – uvodi svojstvo offset-path pomoću kojeg element HTML-a možemo “postaviti na putanju” kojom će se kretati. Ova putanja definira se u obliku SVG path sintakse. Primjerice, umjesto klasične animacije translacije po X i Y osi, možemo zadati:
U gornjem primjeru .element će se kretati duž zadane krivulje, umjesto ravno po x ili y osi. Svojstvo offset-distance određuje poziciju elementa duž putanje u postotcima (0% početak, 100% kraj putanje).
Ovo je relativno nov dodatak CSS specifikaciji (tzv. CSS Motion Path Module), pa je puna podrška u preglednicima stigla tek oko 2020. godine. Danas je offset-path široko podržan i možemo ga koristiti za vrlo zanimljive animacije – primjerice, animiranje objekta koji se kreće po krivudavoj stazi, ili tekst koji slijedi zakrivljenu putanju i slično – sve to bez jedne linije JavaScript koda, uz pomoć čiste SVG putanje unutar CSS-a.
Sve ove animacijske mogućnosti dovode nas do pojma mikro-interakcija. Mikro-interakcije su sitne animacije ili promjene u sučelju koje se aktiviraju kada korisnik obavi neku radnju – klikne gumb, prebaci prekidač, unese ispravan podatak u formu ili učita stranicu. Tako male da često prolaze gotovo neprimijećeno, mikro-interakcije ipak čine ogromnu razliku u korisničkom doživljaju aplikacije.
One pružaju korisniku povratnu informaciju i osjećaj da su njegove akcije zabilježene: na primjer, gumb može poskočiti ili promijeniti nijansu kada ga pritisnemo (signalizirajući da je klik registriran), prekidač klizne glatko uz mali ease-out efekt kad se prebaci (pokazujući da je promjena stanja uspješna), ili se pojavi mali loading spinner nakon slanja forme (dajući do znanja da se nešto događa u pozadini).
Dobro osmišljene mikro-interakcije mogu također usmjeravati korisnika kroz proces – npr. ikona ili rub polja promijeni boju u zeleno i lagano pulsira kad je polje forme ispravno popunjeno, čime korisnik dobiva vizualni signal da može prijeći na sljedeće polje.
Najbolje mikro-interakcije su diskretne, jednostavne i dosljedne dizajnu/brendu aplikacije.
Dovoljno su suptilne da ne ometaju korisnika u obavljanju zadatka, a dovoljno izražajne da unesu osjećaj fluidnosti i “života” u sučelje. Te male, suptilne animacije stapaju se s funkcionalnošću aplikacije tako da povećavaju osjećaj zadovoljstva – korisnik možda neće eksplicitno primijetiti zašto mu je nešto “lijepo” ili “ugodno” u korištenju, ali upravo zbir tih detalja čini da se sučelje osjeća responzivno i pažljivo dizajnirano.
Brendirane mikro-interakcije podižu ulog – one uzimaju te male animirane trenutke i usklađuju ih s osobnošću brenda aplikacije. Umjesto generičkih efekata (poput uobičajenog sivog pulsiranja ili standardne animacije skakutave loptice), svaka boja, oblik i pokret mikro-interakcije može “govoriti jezik vašeg brenda”. To znači da se kroz te animacije dodatno prenosi identitet i vrijednosti vaše tvrtke ili proizvoda.
Na primjer, zamislimo aplikaciju čiji je brend prepoznatljiv po vedrim narančastim tonovima i zaigranoj maskoti. Gumb za potvrdu narudžbe umjesto obične animacije može nakon klika imati suptilan “bounce” efekt u akcentnoj narančastoj boji brenda, možda čak uz kratak sjaj (shine) preko teksta ili ikone koji ističe logotip.
Istovremeno, ikona za učitavanje (loading) nije generički kružić – možda koristi stilizirani oblik maskote brenda koja se animirano vrti ili korača, dajući do znanja da aplikacija radi na zahtjevu.
Takve mikro-interakcije su i dalje dovoljno male da ne odvlače pažnju ili smetaju korištenju, ali istovremeno pojačavaju emocionalnu povezanost s korisnikom.
Svaki put kad korisnik klikne ili pomakne nešto, sučelje mu suptilno poručuje: još uvijek si u našem svijetu.
Brendirane mikro-interakcije stvaraju prepoznatljiv doživljaj u svakom kliku, hoveru ili skrolu. Sučelje čine jedinstvenim i nezaboravnim, jer se korisniku urezuju u pamćenje ti mali potpisni potezi koji razlikuju vašu aplikaciju od bezličnih generičkih sustava. U konačnici, to gradi lojalnost korisnika – s vremenom, ljudi zavole upravo te detalje koji aplikaciju čine ‘živom’ i u duhu brenda.
Ukratko, mikro-interakcije prilagođene identitetu brenda fantastičan su poligon za korištenje SVG+CSS animacija! SVG omogućuje kreiranje unikatnih oblika i animacija koje prate brend (bez ograničenja na pravokutnike i standardne web elemente), a CSS omogućuje da te animacije budu glatke i performansno optimizirane.
U nastavku donosimo dva primjera u kojima smo, kako bismo istaknuli SVG-ove mogućnosti, posegnuli za pomalo ekstravagantnim efektima:
Kada korisnik pređe mišem preko gumba za kontakt na našoj stranici, starta mala SVG + CSS predstava. Na hover se naš čarobnjački štap (motiv iz logotipa CodeMage) zalijeće prema gumbu i “pali” ga. Time korisnika diskretno motiviramo da klikne i javi nam se — stvorimo malo magije.
U headeru stranice nalazi se naš logo kao SVG, a ovdje nas zanima onaj dio loga koji crta čarobnjački štap:
Koristimo prethodno spomenuti offset-path s kojim, jednom kad smo definirali putanju, vrlo jednostavno, uz pomoć offset-distance property-ja “preletimo” od početka do kraja zadane putanje.
I sam button je ustvari SVG, što nam omogućuje efekte koji nisu mogući samo s kombinacijom HTML-a i CSS-a.
stroke-dasharray je CSS property koji se često koristi za animirano iscrtavanje oblika (primjerice efekta pisanja potpisa). Njegovo ponašanje kontroliramo svojstvom stroke-dashoffset, slično kao što smo ranije koristili offset-distance za kontrolu animacije offset-path.
Dok korisnik popunjava polja u formi, naša magija se postupno intenzivira. Sa svakim ispunjenim poljem čarobnjački štap blješti sve jače — od blijedih “čarobnih čestica” do snažnog svjetlucanja u finalnom polju.
Na kraju, kad korisnik pritisne gumb za slanje, šaljemo “magiju” čime pojačavamo dojam personaliziranog, brendiranog iskustva.
Ovdje je situacija nešto kompleksnija, pa koristimo prednosti SVG-a i komponentnog pristupa kako bismo “magičnu kuglu” (engl. orb) izdvojili u zasebnu komponentu. Ta komponenta postavlja SVG i generira određeni broj “pipaka” ovisno o popunjenosti kontakt forme.
Sama magična kugla suptilno je animirana uz pomoć jednostavnih CSS animacija.
Pipci su kombinacija path elementa preko kojih “pulsiraju” okrugli oblici.
Za opisane efekte koristimo propertyje s kojima smo se već upoznali – moćne i raznolike stroke-dasharray i offset-path.
Cijeli kod je dostupan na našem GitHubu.
Napomena: primjeri su, radi konciznosti i fokusa na SVG + CSS, prilagođeni samo za desktop rezolucije.
Da zaključimo, SVG+CSS animacije pružaju izvanrednu platformu za osmišljavanje mikro-interakcija koje su male obujmom, ali velike utjecajem. One su tehnički zanimljive za implementaciju, a korisnicima donose onaj suptilni osjećaj zadovoljstva koji razlikuje vrhunski dizajniranu aplikaciju od prosječne.
Zahvala: Zahvaljujem brojnim CodePen primjerima koji su poslužili kao inspiracija za ideje prikazane ovdje. Preporučujem CodePen kao izvrstan resurs za istraživanje – možete pronaći mnogo kreativnih primjera SVG animacija i mikro-interakcija koje demonstriraju što je sve moguće ostvariti kombinacijom SVG-a i CSS-a u modernom webu.
Podijeli
