30 Awesome SVG animacija Jūsų įkvėpimui
Dizaineriai, naudodami CSS, sukūrė animacijas HTML elementuose. Tačiau dėl HTML elementų apribojimų kuriant modelius, formas ir kitus, jie natūraliai kreipiasi į SVG, kuris siūlo daugiau įdomių galimybių.
Dirbdami su SVG, mes mėgautis geru naršyklės suprot SVG animacija, ir mes turime daugiau būdų sukurti naują animaciją. Galite naudoti tiek integruotą SVG animacijos funkciją, tiek CSS3 animaciją (atkreipkite dėmesį, kad ne viskas gali būti padaryta CSS, todėl vis dar reikia „JavaScript“). Kitas būdas yra naudojant „JavaScript“ variklius, pvz., GSAP arba „Snap“. JS yra geroji animacijos kūrimo praktika.
Čia aš sukaupiau nuostabų animuotą SVG. Kai kurie naudoja SVG animaciją, kiti naudoja CSS transformaciją pagrindinei animacijai, o kiti naudoja „JavaScript“ pagalbą.
Seanas McCaffery pasienio animacija
Sukurtas tik su CSS, aplink tekstą sklandžiai formuojasi siena, kai slenkate virš “HOVER” instrukcija.
Elastinis SVG šoninė juosta Nikolajus Talanovas
Šoninė juosta tampa elastinga, kai bandote jį ištraukti iš šono. Graži koncepcija, pritaikyta „Material Design“ įkvėptoje šoninėje juostoje.
Nikolajus Talanovas atleisk žemyn
Dauguma puslapių leidžia “nuleiskite” atnaujinti puslapyje. Su šia animacija, kai jūs “spaudai” puslapyje, siuntimo piktograma pasikeičia į plokštumos piktogramą ir išleidžiama į orą.
Animuotas „Patrick Young“ teksto gradientas
Štai subtilus, bet ne lengva praleisti judančio teksto gradientą, kurį mylės tipografijos mėgėjai.
Nikolajaus Talanovo širdies animacija
Ši animacija parodo, kaip širdies piktograma yra sudaryta iš dviejų apskritimų ir aikštės. Pertvarkymas atliekamas su CSS animacija.
Keliaukime jjperezaguinaga
Animacija, iliustruojanti miestus ir populiariausias turizmo vietas pasaulyje. Perkelimai ir transformacijos sukuriamos naudojant CSS animaciją.
Meniu perjungia Tamino Martinius animaciją
Hamburgerio piktogramos, kuri virsta kryžminiu simboliu, morpingas animacija. Pažiūrėkite, kaip sklandus perėjimas tarp dviejų objektų.
„Sdras“ animuoti „Infographic“
Nuostabus Sarah Drasner animacija, sukurta pagal GSAP laiko juostą. Tai yra infografija, sukurta su animacija. Naudokite slankiklį, kad prieiti prie kadrų iš bet kurio taško.
„Rain-Bros“ nepatinka JS
Unikali ir juokinga ciklo animacija, vaizduojanti simbolių pėsčiomis. Objektų judėjimas šioje demonstracijoje yra SVG ir CSS3 animacijos derinys. Kojos naudoja SVG animaciją, o kitos dalys naudoja CSS3 animaciją.
Mohamad Mohebifar laikrodis
Stebėkite, kaip šis laikrodis sklandžiai judėjo, rodydamas dabartinį laiką. Animacija yra visiškai sukurta naudojant SVG animacijos funkciją.
Vaivorykštės raketinis žmogus Chris Gannon
Astronautas, fotografuojantis į kosmosą su vaivorykštiniu varikliu (?). Gražus animacija sukurta naudojant „GSAP Tweenmax“ papildinį.
Luigi De Rosa animacinis piktograma
Tačiau per šias animuotas SVG piktogramas patikrinkite, ką jie gali padaryti. Kūrėjas tai padarė naudodamasis GSAP.
Plataus darbo erdvė, kurią sukūrė Hoàng Nhật
Animacija iliustruoja plokščio stiliaus darbo erdvę. Kūrėjas naudojo GSAP, kad padarytų šią nuostabią darbo vietos formavimo animaciją.
Paspaudžiamas animacinis „Hamish Williams“ piktograma
Tai vėsioje animacijoje naudojama snap.svg biblioteka. Spustelėkite norėdami pamatyti el. Pašto adresą “išsiųstas”.
Chris Gannon nardymas
Ar jūs kada nors praleidote akmenis ant ežero paviršiaus? Štai paprastas SVG kelio animacija, iliustruojanti tai, bet be akmenų ir ežero.
„LegoMushroom“ judėjimas internete
Ji turi animaciją, gražų melodiją, super vėsią įėjimo į tekstą, kas nepatinka? Tai sukurta su mo.js, judesio grafikos „JavaScript“ biblioteka.
Animuotas rašymo šriftas Lee Porter
Naudodamiesi SVG, kad padarytumėte kelio animaciją, piešiančią formą, galite ją naudoti tipografijoje, kaip tai padarė šis kūrėjas. Neryškus efektas tampa nuostabesnis.
„Luce Bebber“ meniu „Gooey“
Pasilinksminkite su „gooey“ efektu, kuris atliekamas naudojant SVG filtrą ir pridedant CSS animaciją. Rezultatas yra realus ir tikrai kietas, o jūs galite žaisti su keturiomis skirtingomis versijomis.
Naujasis „Marco Barría“ pyragas
Kaip padaryti sluoksniuotą gimtadienio tortą, padarytą su SVG ir CSS animacija.
Ačiū Rachel Smith
Tiesiog žiūrėkite šį nuostabų paprastos padėkos animaciją. Jis sukurtas naudojant SVG ir GSAP TweenMax biblioteką.
CSS vs SVG pateikė Mario Sanchez Maselli
Dabar pažiūrėkime į CSS ir SVG animaciją, ar matote skirtumą?
Mark Nelsono vaikščiojimo šuo
Kitas būdas suaktyvinti SVG yra naudojant sprites vaizdus, pavyzdžiui, kaip šis kūrėjas padarė.
Leela smėlio laikrodžio krautuvas
Kūrybinis darbas, atliktas naudojant gryną SVG animaciją (SMIL); čia nėra CSS ar JS.
Logotipas „Adem ilter“
Štai gražus animacinis logotipas, kuriame pateikiamos inline SVG animacijos. Nėra CSS ar JS, kad viskas veiktų.
Jono Badalico statistikos animacija
Gražus statistika su SVG animacija, sukurta Snap.SVG bibliotekoje.
Ouroboros pateikė Noel Delgado
Nuostabi SVG animacijos kelias. Pirmiausia kūrėjas nukreipė kelio maršrutą SVG, prieš naudodamasis „tween.js“, kad pridėtų animaciją.
„Lucas Bebber“ kūrybos efektai
Čia pateikiami septyni SVG filtro panaudojimo būdai, skirti „gooey“ efektui. Muzikos vizualizatorius yra mano mėgstamiausia, animacija atrodo labai graži.
Išmeskite karvę Sarah Drasner
Tai yra SVG animacija, sukurta „TweenMax“, bet sukurta tik pramogai. Laikykite ir vilkite karvę aplink planetą. Jis sukasi „orbitoje“.
Animuotas logotipas iš Ali
Animacija gali būti puiki papildoma burbuliukų alaus logotipas. Gražūs mažai plaukiojantieji burbuliukai yra sukurti tik su SVG gimtoji animacijos sintaksė.
