Scalable Vector Graphics (SVG) er et bildeformat skrevet i XML. Med SVG kan du kode en todimensjonal skalerbar grafikk. Deretter kan du implementere og endre dem i CSS og JavaScript.
SVG tillater tre typer grafikk: vektorformer (rette og buede linjer i alle retninger og fasonger), bilder og tekst. På grunn av sine forskjellige funksjoner henvender webdesignere seg til SVG for å lage komplekse animasjoner. De er enkle å installere, mister ikke kvaliteten når de endres, og krever ikke at tredjepartsapper fungerer.
Siden animasjoner fremdeles vokser i popularitet, er de fleste ikke kjent med dem. Denne artikkelen vil løfte frem 20 fantastiske SVG-animasjoner som viser potensialet i dette formatet.
1. Medisinsk SVG-ikoner av kattunger
Hurtigkoblinger
- 1. Medisinsk SVG-ikoner av kattunger
- 2. Hold markøren av SeanMcCaffery
- 3. Trekk ned til forfriskning (Paper Plane) av Nikolay Talanov
- 4. Just Keep Going av Diaco M. Lotfollahi
- 5. SVG-filtre lagt til HTML5-videoen
- 6. Puslespill
- 7. Liner Gradient av Patrick Young
- 8. La oss reise av jjperezaguinaga
- 9. Clock av Mohamad Mohebifar
- 10. Animerte ikoner av Luigi De Rosa
- 11. Alle enheter i SVG av Chris Gannon
- 12. Foss av Chris Gannon
- 13. Plantegenerator av Blake Bowen
- 14. Klikkbart ikon av Hamish Williams
- 15. Ny kake av Marco Barría
- 16. Paper Shredder av Chris Gannon
- 17. Lav PolyLion av GRAYGHOST
- 18. Hourglass Loader av Leela
- 19. Responsive Cow av Sarah Drasner
- 20. Student av Domany
- Din tur
Denne varme og jevne animasjonen er flott for alle helserelaterte nettsteder. Når du lister gjennom de forskjellige trådene, vises bildene subtilt. Ambulansebilen eller atomet vil konstruere, øyet åpnes, og legen hopper ut. Denne animasjonen viser all moroa og dynamikken til SVG.
link
2. Hold markøren av SeanMcCaffery
Universell animasjon som du kan legge til et hvilket som helst interaktivt nettsted. Det subtile utseendet på grensene når du svever, gir deg en tilfredsstillende følelse og inviterer deg til å klikke på lenken.
link
3. Trekk ned til forfriskning (Paper Plane) av Nikolay Talanov
Vanligvis blir sider oppdatert når du “trekker ned” på dem. Denne animasjonen bringer dette til et nytt nivå. Når du trekker ned for å frigjøre det, vil du skyte et papirfly mot himmelen. Hvis du vil at de besøkende skal oppdatere appen din ofte, bør du vurdere å legge til en animasjon som denne.
4. Just Keep Going av Diaco M. Lotfollahi
En SVG-animasjon som viser potensialet til skaleringsvektoren. Den jevne nøyaktige bevegelsen av menneskekroppen er hypnotiserende.
link
5. SVG-filtre lagt til HTML5-videoen
Paul Irish fra Google Chrome-teamet så på hvordan SVG kan endre innhold utenom vektorgrafikk. Han kombinerte CSS og SVG for å lage fantastiske visuelle filtre for å vise at SVG-animasjon kan være et fint tillegg til en ferdig video.
link
6. Puslespill
Du kan lage fantastiske interaktive puslespill med SVG-animasjon. I dette eksemplet kan vi velge et av mange bilder og se hvordan det dekonstruerer til mange små stykker av puslespillet. Du kan også rekonstruere det!
link
7. Liner Gradient av Patrick Young
Hvis du bruker neonlys og vakre skrifter, vil du glede deg over denne animasjonen. Dette arbeidet viser hvordan du ikke trenger noen bevegelige linjer for en strålende animasjon, bare en flott font og riktig fargekode med gradienteffekt.
link
8. La oss reise av jjperezaguinaga
To fly og en varmluftsballong som dreier seg om populære landemerker i verden. Denne animasjonen er fargerik, optimistisk og blid. Det viser alt du kan gjøre hvis du er dyktig i SVG.
link
9. Clock av Mohamad Mohebifar
En enkel SVG-animasjon av en bevegelig klokke som viser gjeldende tid. Den beroligende bevegelsen til pekerne og minimalistisk design gjør underverker for denne animasjonen.
link
10. Animerte ikoner av Luigi De Rosa
Hvis du holder musepekeren over disse ikonene, vil du utløse animasjonene, som er enkle, men effektive. Du kan se at du ikke trenger å gjøre underverker for å lage et imponerende animert ikon.
11. Alle enheter i SVG av Chris Gannon
En animasjon med én gang som går over alle smarte enheter som vi bruker på den mest kreative måten. Skrivebordet blir til en bærbar datamaskin, en bærbar PC til et nettbrett og deretter til en smarttelefon.
link
12. Foss av Chris Gannon
En annen av Chris Gannon, dette er en fin demonstrasjon av en skummende fossebunn. Bevegelsen av vannet er ryddig, og du kan se små dråper av det sprutende vannet forlate animasjonens grenser for å gjøre alt mer realistisk.
link
13. Plantegenerator av Blake Bowen
Nå er denne noe annet. Når du klikker på "Opprett" -knappen, vil du se planter stige og vokse. Men hver gang du klikker, vil det dannes forskjellige mønstre.
link
14. Klikkbart ikon av Hamish Williams
En annen interaktiv SVG som utløser en animasjon når du klikker på den. Denne vil sette i gang "Send" -animasjonen når du klikker på den.
link
15. Ny kake av Marco Barría
Interessant animasjon som viser lagingen av en kake lag for lag. Det er en imponerende SVG-animasjon som passer til bursdagskort.
16. Paper Shredder av Chris Gannon
Hvis du liker å se på papirstrimling, vil du glede deg over denne animasjonen som viser en maskin som makulerer papir etter papir ubegrensede ganger i en sømløs rekkefølge.
link
17. Lav PolyLion av GRAYGHOST
Dette er en forbløffende illustrasjon og animasjon som skildrer et løvehode som vises og forsvinner i form av animerte polygoner.
link
18. Hourglass Loader av Leela
En annen effektiv animasjon som bare bruker SVG. Hvert 5. sekund vil timeglasset snu opp ned og starte en ny syklus.
link
19. Responsive Cow av Sarah Drasner
Dette er en morsom interaktiv animasjon som lar deg klikke på en ku og dra den rundt månen mens en forvirret astronaut ser på den.
20. Student av Domany
En entusiastisk student fremstår som klar til å lære! Det er en flott animasjon der boksidene snur seg pent. Ingen blink fra studenten, men dette er fremdeles en perfekt ryddig animasjon for å avslutte denne listen.
link
Din tur
Hva er dine SVG-animasjoner som ikke er inkludert i denne listen? Del valgene dine i kommentarene nedenfor!
