Skaalautuva vektorgraafika (SVG) on XML-vormingus pildivorming. SVG abil saate kodeerida kahemõõtmelise skaleeritava graafika. Seejärel saate neid CSS-is ja JavaScriptis rakendada ja muuta.

SVG lubab kolme tüüpi graafikat: vektorkujud (sirged ja kumerad jooned igas suunas ja kujuga), pildid ja tekst. Erinevate võimaluste tõttu pöörduvad veebidisainerid SVG poole keerukate animatsioonide tegemiseks. Neid on lihtne paigaldada, need ei kaota suuruse muutmise korral kvaliteeti ega vaja töötamiseks ühtegi kolmanda osapoole rakendust.

Kuna animatsioonide populaarsus kasvab endiselt, pole enamik neist tuttavad. Selles artiklis tuuakse esile 20 fantastilist SVG-animatsiooni, mis näitavad selle vormingu potentsiaali.

1. Meditsiinilised SVG-ikoonid ketoonide järgi

See soe ja sujuv animatsioon sobib suurepäraselt iga tervisega seotud veebisaidile. Erinevate lõimede loendi kuvamise ajal ilmuvad pildid peenelt. Kiirabi või aatom konstrueeruvad, silm avaneb ja arst hüppab välja. Animatsioon näitab kogu SVG lõbusust ja dünaamilisust.

Link

2. Hõljutage kursorit SeanMcCaffery abil

Universaalne animatsioon, mille saate panna igale interaktiivsele veebisaidile. Piirete peen välimus, kui kursor kohale tõsta, jätab teid rahuldava tunde ja kutsub linki klõpsama.

Link

3. Tõmmake alla, et värskendada (paberileht), autor: Nikolay Talanov

Tavaliselt värskendatakse lehti siis, kui te neile alla tõmbate. Animatsioon viib selle uuele tasemele. Kui tõmbate alla, et seda vabastada, käivitate taeva poole paberitasandi. Kui soovite, et külastajad värskendaksid teie rakendust sageli, peaksite kaaluma sellise animatsiooni lisamist.

4. Lihtsalt jätka minemist Diaco M. Lotfollahi järgi

SVG animatsioon, mis näitab skaleerimisvektori potentsiaali. Inimkeha sujuv ja täpne liikumine on hüpnotiseeriv.

Link

5. HTML5-videole on lisatud SVG-filtrid

Paul Irish Google Chrome'i tiimist uuris, kuidas SVG saab sisu muuta peale vektorgraafika. Ta ühendas CSS-i ja SVG-d, et teha hämmastavaid visuaalseid filtreid, et näidata, et SVG-animatsioon võib olla valmis video suurepäraseks täienduseks.

Link

6. Pusle

SVG-animatsiooni abil saate teha hämmastavaid interaktiivseid mosaiikmõistatusi. Selles näites saame valida ühe paljudest piltidest ja vaadata, kuidas see dekonstrueerib palju pisipilte. Võite selle ka rekonstrueerida!

Link

7. Liner Gradient, autor Patrick Young

Kui olete neoonvalgustite ja ilusate fondidega, naudite seda animatsiooni. See töö näitab, kuidas te ei vaja hiilgava animatsiooni jaoks liikuvaid jooni, vaid suurepärast fonti ja korralikku gradiendiefektiga värvikoodi.

Link

8. Let’s Travel autor: jjperezaguinaga

Kaks lennukit ja kuumaõhupalli keerlevad ümber maailma populaarsete vaatamisväärsuste. See animatsioon on värvikas, optimistlik ja pilkupüüdev. See näitab kõike, mida saate teha, kui olete osav SVG-s.

Link

9. Kell Mohamad Mohebifar

Lihtne liikuva kella animatsioon SVG-st, mis näitab praegust aega. Osutite rahustav liikumine ja minimalistlik disain teevad selle animatsiooni jaoks imet.

Link

10. Luigi De Rosa animeeritud ikoonid

Kui hõljutate kursorit nende ikoonide kohal, käivitavad lihtsad, kuid tõhusad animatsioonid. Näete, et muljetavaldava animeeritud ikooni tegemiseks ei pea te imesid tegema.

11. Kõik SVG seadmed Chris Gannon

Ühe pildi animatsioon, mis hõlmab kõiki nutiseadmeid, mida me kõige loomingulisemalt kasutame. Lauaarvuti muutub sülearvutiks, sülearvuti tahvelarvutiks ja seejärel nutitelefoniks.

Link

12. Chris Gannon juga

Veel üks Chris Gannon, see on vahva jugapõhja kena demonstratsioon. Vee liikumine on puhas ja animatsiooni piiridest väljuvaid pritsimisvee tilkasid võib näha nii, et kõik näeks realistlikum.

Link

13. Blake Boweni taimegeneraator

Nüüd on see midagi muud. Kui klõpsate nupul „Loo”, näete taimi tõusmas ja kasvamas. Kuid iga kord, kui klõpsate, moodustuvad erinevad mustrid.

Link

14. Klõpsatav ikoon, autor Hamish Williams

Veel üks interaktiivne SVG, mis käivitab animatsiooni, kui sellele klõpsate. See käivitab animatsiooni „Saada”, kui sellel klõpsate.

Link

15. Marco Barría uus kook

Huvitav animatsioon, mis näitab koogi valmistamist kihtide kaupa. See on muljetavaldav SVG animatsioon, mis sobib sünnipäevakaardiks.

16. Chris Gannon paberitükeldaja

Kui teile meeldib vaadata paberitükeldamist, siis naudite seda animatsiooni, mis kujutab masinat, mida hakitakse paberi abil paberit piiramatult sujuvalt järjest purustama.

Link

17. GRAYGHOSTi madal polülioon

See on mõtlemapanev illustratsioon ja animatsioon, mis kujutab lõvi pea ilmumist ja kadumist animeeritud polügoonide kujul.

Link

18. Leela liivalaadur

Veel üks tõhus animatsioon, mis kasutab ainult SVG-d. Iga 5 sekundi tagant pöördub liivakell tagurpidi ja alustab uut tsüklit.

Link

19. Sarah Drasneri tundlik lehm

See on naljakas interaktiivne animatsioon, mis võimaldab teil klõpsata lehmal ja lohistada seda ümber kuu, samal ajal kui hämmingus astronaut seda vaatab.

20. Õpilane Domany poolt

Huvitav õpilane näib olevat valmis õppima! See on suurepärane animatsioon, kus raamatu lehed pöörduvad kenasti. Õpilasest ei pilguta, kuid see on selle nimekirja lõpule viimiseks täiesti korrektne animatsioon.

Link

Sinu kord

Millised on teie lemmik-SVG-animatsioonid, mida selles loendis pole? Jagage oma valikuid allolevates kommentaarides!