Skaalautuva vektorigrafiikka (SVG) on XML-muotoinen kuvamuoto. SVG: n avulla voit koodata kaksiulotteisen skaalautuvan grafiikan. Sitten voit ottaa ne käyttöön ja muokata CSS: ssä ja JavaScriptiä.
SVG sallii kolmen tyyppisiä grafiikoita: vektorimuodot (suorat ja kaarevat viivat kaikkiin suuntiin ja muotoihin), kuvat ja teksti. Erilaisten ominaisuuksiensa takia web-suunnittelijat kääntyvät SVG: n puoleen tehdä monimutkaisia animaatioita. Niitä on helppo asentaa, ne eivät menetä laatuaan koon muuttamisen vuoksi eivätkä vaadi muiden valmistajien sovelluksia toimimaan.
Koska animaatioiden suosio kasvaa edelleen, useimmat eivät tunne niitä. Tämä artikkeli tuo esiin 20 fantastista SVG-animaatiota, jotka osoittavat tämän muodon mahdollisuudet.
1. Lääketieteelliset SVG-kuvakkeet kittoneilla
Pikalinkit
- 1. Lääketieteelliset SVG-kuvakkeet kittoneilla
- 2. Vie hiiri SeanMcCafferyn avulla
- 3. Vedä alas päivittääksesi (paperitaso), kirjoittanut Nikolay Talanov
- 4. Jatka vain menemistä Diaco M. Lotfollahi
- 5. SVG-suodattimet lisätty HTML5-videoon
- 6. Palapeli
- 7. Liner Gradient, kirjoittanut Patrick Young
- 8. Let's matkustaa jjperezaguinaga
- 9. Kellon kirjoittanut Mohamad Mohebifar
- 10. Luigi De Rosan animoidut kuvakkeet
- 11. Kaikki SVG-laitteet Chris Gannon
- 12. Chris Gannonin vesiputous
- 13. Blake Bowenin kasvigeneraattori
- 14. Napsautettava kuvake, kirjoittanut Hamish Williams
- 15. Marco Barrían uusi kakku
- 16. Chris Gannonin paperisilppuri
- 17. Matala PolyLion, GRAYGHOST
- 18. Leelan tiimalasikuormaaja
- 19. Sarah Drasnerin herkkä lehmä
- 20. Opiskelija Domany
- Sinun vuorosi
Tämä lämmin ja sujuva animaatio on hieno kaikille terveyteen liittyville verkkosivustoille. Kun listaat eri säikeitä, kuvat näkyvät hienovaraisesti. Ambulanssiauto tai atomi rakentuu, silmä aukeaa ja lääkäri hyppää ulos. Tämä animaatio näyttää kaiken SVG: n hauskan ja dynaamisuuden.
Linkki
2. Vie hiiri SeanMcCafferyn avulla
Universal animaatio, jonka voit laittaa mihin tahansa interaktiiviseen verkkosivustoon. Rajojen hienovarainen ulkonäkö, kun viet hiirellä, antaa sinulle tyydyttävän tunteen ja kutsuu napsauttamaan linkkiä.
Linkki
3. Vedä alas päivittääksesi (paperitaso), kirjoittanut Nikolay Talanov
Yleensä sivut päivittyvät, kun “vedät alas” niitä. Tämä animaatio tuo tämän uudelle tasolle. Kun vedät alas vapauttaaksesi sen, laukaista paperitaso taivaalle. Jos haluat, että kävijät päivittävät sovelluksesi usein, sinun kannattaa harkita tällaisen animaation lisäämistä.
4. Jatka vain menemistä Diaco M. Lotfollahi
SVG-animaatio, joka näyttää skaalausvektorin potentiaalin. Ihmisen kehon sujuva ja tarkka liike on hypnoottinen.
Linkki
5. SVG-suodattimet lisätty HTML5-videoon
Paul Irish Google Chrome -tiimistä tarkasteli, kuinka SVG voi muokata sisältöä vektorigrafiikan ulkopuolella. Hän yhdisti CSS: n ja SVG: n tehdäkseen uskomattomia visuaalisia suodattimia osoittaakseen, että SVG-animaatio voi olla hieno lisä valmiiseen videoon.
Linkki
6. Palapeli
Voit tehdä uskomattomia interaktiivisia palapelejä SVG-animaatiolla. Tässä esimerkissä voimme valita yhden monista kuvista ja nähdä kuinka se hajottaa monia pieniä palapelin palasia. Voit myös rekonstruoida sen!
Linkki
7. Liner Gradient, kirjoittanut Patrick Young
Jos olet neonvaloissa ja kauniissa kirjasimissa, nautit tästä animaatiosta. Tämä työ osoittaa, kuinka sinun ei tarvitse liikkuvia viivoja loistavaan animaatioon, vain hieno kirjasin ja oikea värikoodi, jossa on gradienttitehoste.
Linkki
8. Let's matkustaa jjperezaguinaga
Kaksi lentokoneta ja kuumailmapallo pyörivät maailman suosittujen maamerkkien ympärillä. Tämä animaatio on värikäs, optimistinen ja mielenkiintoinen. Se näyttää kaiken, mitä voit tehdä, jos olet taitava SVG: ssä.
Linkki
9. Kellon kirjoittanut Mohamad Mohebifar
Yksinkertainen SVG-animaatio liikkuvasta kellasta, joka näyttää nykyisen ajan. Osoittimien rauhoittava liike ja minimalistinen muotoilu tekevät ihmeitä tälle animaatiolle.
Linkki
10. Luigi De Rosan animoidut kuvakkeet
Jos siirrät hiiren näiden kuvakkeiden päälle, laukaistat animaatiot, jotka ovat yksinkertaisia mutta tehokkaita. Voit nähdä, että sinun ei tarvitse tehdä ihmeitä tehdäksesi vaikuttavan animoidun kuvakkeen.
11. Kaikki SVG-laitteet Chris Gannon
Yhden otteen animaatio, joka menee yli kaikkien älykkäiden laitteiden kanssa, joita käytämme luovimmalla tavalla. Pöytätietokone muuttuu kannettavaksi, kannettava tietokone tabletiksi ja sitten älypuhelimeksi.
Linkki
12. Chris Gannonin vesiputous
Chris Gannonin toinen, tämä on siisti esitys vaahtoavasta vesiputouksen pohjasta. Veden liikkeet ovat siistit, ja näet pieniä roiskeveden tippoja, jotka lähtevät animaation rajoilta, jotta kaikki näyttäisi realistisemmalta.
Linkki
13. Blake Bowenin kasvigeneraattori
Nyt tämä on jotain muuta. Kun napsautat Luo-painiketta, näet kasveja nousevia ja kasvavia. Mutta joka kerta, kun napsautat, muodostuu erilaisia kuvioita.
Linkki
14. Napsautettava kuvake, kirjoittanut Hamish Williams
Toinen interaktiivinen SVG, joka laukaisee animaation napsauttamalla sitä. Tämä käynnistää “Lähetä” -animaation, kun napsautat sitä.
Linkki
15. Marco Barrían uusi kakku
Mielenkiintoinen animaatio, joka näyttää kakun kerros kerroksittain. Se on vaikuttava SVG-animaatio, joka sopii syntymäpäiväkortille.
16. Chris Gannonin paperisilppuri
Jos nautit paperimurskauksen katselusta, nautit tästä animaatiosta, joka kuvaa koneen murskaamalla paperia paperilla rajoittamattoman määrän kertoja saumattomassa järjestyksessä.
Linkki
17. Matala PolyLion, GRAYGHOST
Tämä on mielenkiintoinen kuva ja animaatio, joka kuvaa leijonan pään ilmestymistä ja häviämistä animoitujen monikulmioiden muodossa.
Linkki
18. Leelan tiimalasikuormaaja
Toinen tehokas animaatio, joka käyttää vain SVG: tä. Joka viides sekunti, tiimalasi kääntyy ylösalaisin ja aloittaa uuden jakson.
Linkki
19. Sarah Drasnerin herkkä lehmä
Tämä on hauska interaktiivinen animaatio, jonka avulla voit napsauttaa lehmää ja vetää sitä kuuhun ympäri, kun hämmentynyt astronautti katselee sitä.
20. Opiskelija Domany
Innostunut opiskelija näyttää olevan valmis oppimaan! Se on loistava animaatio, jossa teosivut kääntyvät siististi. Ei välähtävää opiskelijasta, mutta tämä on silti täysin siistinen animaatio tämän listan päättämiseksi.
Linkki
Sinun vuorosi
Mitkä ovat suosikki SVG-animaatioitasi, joita ei sisälly tähän luetteloon? Jaa valintasi alla olevissa kommenteissa!
