A Scalable Vector Graphics (SVG) egy képformátum, amelyet XML-ben írnak. Az SVG segítségével kétdimenziós méretezhető grafikát kódolhat. Ezután végrehajthatja és módosíthatja azokat a CSS-ben és a JavaScript-ben.
Az SVG háromféle grafikát tesz lehetővé: vektor alakzatok (egyenes és ívelt vonalak minden irányban és alakban), képek és szöveg. Különböző lehetőségei miatt a web-tervezők az SVG-hez fordulnak, hogy összetett animációkat készítsenek. Könnyen telepíthetők, átméretezéskor nem veszítik el a minőségüket, és nem igényelnek harmadik féltől származó alkalmazásokat.
Mivel az animációk népszerűsége továbbra is növekszik, a legtöbb nem ismeri őket. Ez a cikk 20 fantasztikus SVG-animációt mutat be, amelyek megmutatják ennek a formátumnak a lehetőségeit.
1. Orvosi SVG ikonok kittonokkal
Gyors linkek
- 1. Orvosi SVG ikonok kittonokkal
- 2. Vigye az egérmutatót a SeanMcCaffery segítségével
- 3. Húzza le a frissítéshez (papír sík), készítette Nikolay Talanov
- 4. Csak folytassa Diaco M. Lotfollahi
- 5. SVG-szűrők hozzáadva a HTML5 videóhoz
- 6. Kirakós játék
- 7. Liner Gradient Patrick Young
- 8. Utazzunk jjperezaguinaga útján
- 9. Óra: Mohamad Mohebifar
- 10. Animált ikonok Luigi De Rosa-tól
- 11. Minden eszköz SVG-ben: Chris Gannon
- 12. Chris Gannon vízesés
- 13. Blake Bowen növénygenerátor
- 14. Hamish Williams kattintható ikonja
- 15. Marco Barría új torta
- 16. Chris Gannon papír-aprító
- 17. Alacsony PolyLion a GRAYGHOST által
- 18. Leela homokóra rakodó
- 19. Sarah Drasner érzékeny tehén
- 20. Domany diákja
- Te jössz
Ez a meleg és sima animáció kiválóan alkalmas bármilyen egészséggel kapcsolatos webhelyre. Amíg felsorolja a különböző szálakat, a képek finoman megjelennek. A mentõautó vagy az atom épít, a szem kinyílik, és az orvos kiugrik. Ez az animáció az SVG minden szórakozását és dinamizmusát mutatja.
Link
2. Vigye az egérmutatót a SeanMcCaffery segítségével
Univerzális animáció, amelyet bármilyen interaktív weboldalon elhelyezhet. A szegélyek finom megjelenése, ha lebeg, megnyugtató érzést nyújt Önnek, és meghívja Önt, hogy kattintson a linkre.
Link
3. Húzza le a frissítéshez (papír sík), készítette Nikolay Talanov
Általában az oldalak frissülnek, ha „lehúzza” őket. Ez az animáció új szintre hozza. Amikor lehúzza, hogy elengedje, egy papír síkot dob az égbe. Ha azt akarja, hogy a látogatók gyakran frissítsék alkalmazásodat, érdemes megfontolnia egy ilyen animáció hozzáadását.
4. Csak folytassa Diaco M. Lotfollahi
SVG animáció, amely megmutatja a méretezési vektor lehetőségeit. Az emberi test simán pontos mozgása hipnotizáló.
Link
5. SVG-szűrők hozzáadva a HTML5 videóhoz
Paul Irish, a Google Chrome csapatából megvizsgálta, hogy az SVG hogyan módosíthatja a tartalmat a vektorgrafikán kívül. Egyesítette a CSS-t és az SVG-t, hogy csodálatos vizuális szűrőket készítsen annak igazolására, hogy az SVG-animáció kiválóan kiegészítheti a kész videót.
Link
6. Kirakós játék
Készíthet csodálatos interaktív puzzle-kat SVG-animációval. Ebben a példában a sok kép közül egyet választhatunk, és megnézhetjük, hogy ez hogyan fejti ki a puzzle sok apró darabját. Azt is rekonstruálni lehet!
Link
7. Liner Gradient Patrick Young
Ha neonfényekbe és gyönyörű betűkészletekbe kerül, élvezni fogja ezt az animációt. Ez a munka megmutatja, hogy nincs szüksége mozgó sorokra ragyogó animációhoz, csak nagyszerű betűtípus és megfelelő színkód gradienshatással.
Link
8. Utazzunk jjperezaguinaga útján
Két repülőgép és egy hőlégballon a világ népszerű tereptárgyainak körül forog. Ez az animáció színes, optimista és elgondolkodtató. Mindent megmutat, amit tehet, ha ügyes vagy az SVG-ben.
Link
9. Óra: Mohamad Mohebifar
Egy mozgó óra SVG-animációja, amely megmutatja az aktuális időt. A mutatók nyugtató mozgása és a minimalista formatervezés csodákat tesz erre az animációra.
Link
10. Animált ikonok Luigi De Rosa-tól
Ha az egérmutatót ezen az ikon felett mozgatja, akkor elindul az egyszerű, de hatékony animációk. Láthatja, hogy nem kell csodákat tennie, hogy lenyűgöző animált ikont készítsen.
11. Minden eszköz SVG-ben: Chris Gannon
Egyszerû animáció, amely átviszi az összes intelligens eszközt, amelyeket a legkreatívabban használunk. Az asztalról laptop lesz, a laptopról pedig táblagép, majd okostelefon.
Link
12. Chris Gannon vízesés
Egy másik Chris Gannon, ez egy habos vízesés fenekének ügyes bemutatása. A víz mozgása rendben van, és láthatja a fröccsenő víz kis cseppjeit, amelyek elhagyják az animáció határait, hogy mindent realisztikusabban látszanak.
Link
13. Blake Bowen növénygenerátor
Most ez valami más. Amikor rákattint a 'Létrehozás' gombra, látni fogja, hogy a növények növekednek és növekednek. De minden egyes kattintással más minták alakulnak ki.
Link
14. Hamish Williams kattintható ikonja
Egy másik interaktív SVG, amely animációt indít, ha rákattint. Ez kattintással elindítja a „Küldés” animációt.
Link
15. Marco Barría új torta
Érdekes animáció, amely azt mutatja, hogy egy torta rétegenként készül. Ez egy lenyűgöző SVG animáció, amely alkalmas születésnapi kártyára.
16. Chris Gannon papír-aprító
Ha szereti nézni a papír aprítását, akkor élvezni fogja ezt az animációt, amely a gépet apró papírra aprító gépet ábrázolja zökkenőmentes sorrendben.
Link
17. Alacsony PolyLion a GRAYGHOST által
Ez egy gondolkodásmódot ábrázoló illusztráció és animáció, amely egy oroszlánfejet ábrázol, amely animált sokszögek formájában jelenik meg és eltűnik.
Link
18. Leela homokóra rakodó
Egy másik hatékony animáció, amely csak SVG-t használ. Öt másodpercenként a homokóra fejjel lefelé fordul, és új ciklust indít.
Link
19. Sarah Drasner érzékeny tehén
Ez egy vicces interaktív animáció, amely lehetővé teszi, hogy rákattintson egy tehénre, és húzza a hold körül, miközben egy zavart űrhajós nézi.
20. Domany diákja
Úgy tűnik, hogy egy lelkes hallgató készen áll a tanulásra! Remek animáció, ahol a könyvoldalak szépen forognak. Nem villog a hallgató, de ez még mindig tökéletesen rendezett animáció a lista lezárásához.
Link
Te jössz
Melyik kedvenc SVG-animáció nem szerepel ebben a listában? Ossza meg választásait az alábbi megjegyzésekben!
