Naučte sa, ako animovať škálovateľnú vektorovú grafiku

Ako animovať škálovateľnú vektorovú grafiku

Sam Kapila zdieľa niekoľko tipov na uvedenie SVG do života

Škálovateľná vektorová grafika (SVG) je teraz plne podporovaná vo väčšine známych prehliadačov, od niekoľkých verzií späť. Videli sme, že súbory SVG prešli od experimentálnych a čiastočne podporovaných k príjemnej časti celku užívateľská skúsenosť a ďalšiu vrstvu osobnosti pre webové aplikácie, produkty a online značky. Veľa z toho prišlo vo forme Animácia CSS3 a ľahkými knižnicami JavaScriptu.

Pomocou niektorých kľúčových funkcií v Skicári a Illustratore môžu návrhári exportovať kód podporovaný HTML a zobraziť SVG (vrátane značiek tvaru ako obdĺžnik, kruh a čiara). Ak sa chcete dozvedieť, ako animovať súbory SVG bez vŕtania v CSS, pozrite si tento článok Jakoba Jenkova: netm.ag/jenkov-278 .



huion h610 vs huion h610 pro

Samotné CSS však SVG reagujú nielen na zmeny mierky, ale aj na ďalšie atribúty animácie CSS3. Transformujú sa (v 2D aj 3D) a prechádzajú bez námahy bez toho, aby návrhár alebo vývojár musel exportovať nové prvky - každý z prvkov môže byť CSS klasifikovaný a vyvolaný individuálne. Riešenie pohybovej dráhy Sarah Drasnerovej na CSS-trikoch ( netm.ag/drasner-278 ) stojí za pozretie.

Podporu pre tieto animácie môžu poskytovať nástroje JavaScriptu, ako sú Velocity.js a Vivus, s dobre vytvorenými predvoľbami a triedami, ktoré zvládajú zjednodušenia, slabnutia a ďalšie.

13 palcový pevný obal pre macbook pro

Tieto nástroje odstraňujú dohady pri rozhodovaní, či je animácia príliš dlhá alebo krátka, čo umožňuje návrhárom a vývojárom sústrediť sa namiesto toho na to, ako animácie informujú interakciu používateľa, a potešiť ich trochou neočakávaného.

Ak chcete vidieť efektívne súbory SVG v akcii, preskúmajte tento krátky zoznam animovaných stránok.

01. bývanie

Ako animovať škálovateľnú vektorovú grafiku

vivus ( maxwellito.github.io/vivus ) je nástroj triedy JavaScript založený na triede pre rôzne štýly animácie. Jeho dokumentačný web obsahuje príklady štýlov animácie, možnosti časovania a pokročilé možnosti.

ako nakresliť ľahkú vlčiu hlavu

02. Osol

Ako animovať škálovateľnú vektorovú grafiku

Stránka pre El Burro ( www.elburro.no ) zahŕňa nádherné perokresby zobrazujúce tacos, sombreros a kaktusy. Používa Velocity.js a animácia sa spúšťa rolovaním.

03. Katie Kolvacin

Ako animovať škálovateľnú vektorovú grafiku

Návrhárka Sparkboxu Katie Kolvacinová má na svojom osobnom webe nádherné vektorové animácie ( kovalc.in ). Všetky sú postavené na SVG a je zábavné sa na ne pozerať.

Tento článok bol pôvodne publikovaný v sieťový časopis číslo 278.