20 contoh animasi SV hebat

Graphics Vector Scalable (SVG) adalah format imej yang ditulis dalam XML. Dengan SVG, anda boleh kod grafik berskala dua dimensi. Kemudian, anda boleh melaksanakan dan mengubahnya dalam CSS dan JavaScript.

SVG membolehkan tiga jenis grafik: bentuk vektor (garis lurus dan melengkung dalam semua arah dan bentuk), imej, dan teks. Oleh kerana pelbagai keupayaannya, pereka web beralih kepada SVG untuk membuat animasi kompleks. Mereka mudah dipasang, jangan kehilangan kualiti apabila saiznya diubah, dan tidak memerlukan aplikasi pihak ketiga untuk berfungsi.

Oleh kerana animasi masih berkembang dalam populariti, kebanyakan tidak biasa dengan mereka. Artikel ini akan menyerlahkan 20 animasi SVG yang hebat yang menunjukkan potensi format ini.

1. Ikon SVG Perubatan oleh kittons

Pautan Pantas

1. Ikon SVG Perubatan oleh kittons
2. Tuding oleh SeanMcCaffery
3. Tarik Balik ke Semula (Paper Plane) oleh Nikolay Talanov
4. Terus Pergi oleh Diaco M. Lotfollahi
5. Penapis SVG Ditambah ke Video HTML5
6. Jigsaw Puzzle
7. Liner Gradient oleh Patrick Young
8. Mari Perjalanan dengan jjperezaguinaga
9. Jam oleh Mohamad Mohebifar
10. Ikon animasi oleh Luigi De Rosa
11. Semua Peranti di SVG oleh Chris Gannon
12. Air terjun oleh Chris Gannon
13. Penjana Loji oleh Blake Bowen
14. Ikon diklik oleh Hamish Williams
15. Kue Baru oleh Marco Barría
16. Paper Shredder oleh Chris Gannon
17. PolyLion yang rendah oleh GRAYGHOST
18. Jam Lolass Loader oleh Leela
19. Lembu Responsif oleh Sarah Drasner
20. Pelajar oleh Domany
Giliran awak

Animasi hangat dan lancar ini bagus untuk mana-mana laman web yang berkaitan dengan kesihatan. Semasa anda menyenaraikan benang yang berlainan, imej akan muncul secara halus. Kereta ambulans atau atom akan dibina, mata akan terbuka, dan doktor akan melompat keluar. Animasi ini menunjukkan keseronokan dan dinamisme SVG.

Pautan

2. Tuding oleh SeanMcCaffery

Animasi Universal yang boleh anda letakkan di mana-mana laman web interaktif. Penampilan halus sempadan apabila anda berlegar meninggalkan anda dengan rasa yang memuaskan dan menjemput anda untuk mengklik pautan.

Pautan

3. Tarik Balik ke Semula (Paper Plane) oleh Nikolay Talanov

Biasanya, halaman akan dimuat semula apabila anda "menarik diri" pada mereka. Animasi ini membawa ini ke tahap yang baru. Apabila anda menarik diri untuk melepaskannya, anda akan melancarkan pesawat kertas ke langit. Sekiranya anda ingin pengunjung anda menyegarkan aplikasinya secara kerap, anda harus mempertimbangkan untuk menambah animasi seperti ini.

4. Terus Pergi oleh Diaco M. Lotfollahi

Animasi animasi SVG yang menunjukkan potensi Vector Scaling. Pergerakan tepat yang licin badan manusia menghipnotis.

Pautan

5. Penapis SVG Ditambah ke Video HTML5

Paul Irish dari pasukan Google Chrome memandang bagaimana SVG dapat mengubah suai kandungan di luar grafik vektor. Dia menggabungkan CSS dan SVG untuk membuat penapis visual yang menakjubkan untuk menunjukkan bahawa animasi SVG boleh menjadi tambahan denda kepada video yang sudah siap.

Pautan

6. Jigsaw Puzzle

Anda boleh membuat teka-teki jigsaw interaktif yang menakjubkan dengan animasi SVG. Dalam contoh ini, kita boleh memilih salah satu daripada banyak gambar dan melihat bagaimana ia menyusun semula kepada banyak teka-teki kecil. Anda boleh membina semula juga!

Pautan

7. Liner Gradient oleh Patrick Young

Jika anda menjadi lampu neon dan fon yang indah, anda akan menikmati animasi ini. Kerja ini menunjukkan bagaimana anda tidak memerlukan sebarang garisan bergerak untuk animasi yang cemerlang, hanya satu font yang bagus dan kod warna yang betul dengan kesan kecerunan.

Pautan

8. Mari Perjalanan dengan jjperezaguinaga

Dua kapal terbang dan belon udara panas berputar di sekitar mercu tanda popular di dunia. Animasi ini berwarna-warni, optimis, dan bertiup. Ia menunjukkan semua yang anda boleh lakukan jika anda mahir dalam SVG.

Pautan

9. Jam oleh Mohamad Mohebifar

Satu animasi SVG mudah pada jam bergerak yang menunjukkan masa semasa. Pergerakan menunjuk dan reka bentuk minimalis yang menenangkan membuat keajaiban untuk animasi ini.

Pautan

10. Ikon animasi oleh Luigi De Rosa

Sekiranya anda menghidupkan ikon ini, anda akan mencetuskan animasi, yang mudah tetapi berkesan. Anda dapat melihat bahawa anda tidak perlu melakukan keajaiban untuk membuat ikon animasi yang mengagumkan.

11. Semua Peranti di SVG oleh Chris Gannon

Satu animasi yang mengambil alih semua peranti pintar yang kami gunakan dengan cara yang paling kreatif. Desktop akan menjadi laptop, komputer riba ke tablet, kemudian ke telefon pintar.

Pautan

12. Air terjun oleh Chris Gannon

Satu lagi oleh Chris Gannon, ini adalah demonstrasi yang rapi atas air terjun yang berbuih. Pergerakan air itu kemas, dan anda dapat melihat titisan air percikan kecil yang meninggalkan sempadan animasi untuk menjadikan semuanya kelihatan lebih realistik.

Pautan

13. Penjana Loji oleh Blake Bowen

Sekarang ini yang lain. Apabila anda mengklik pada butang 'Buat', anda akan melihat tumbuhan meningkat dan berkembang. Tetapi setiap kali anda mengklik, corak yang berbeza akan terbentuk.

Pautan

14. Ikon diklik oleh Hamish Williams

Satu lagi SVG interaktif yang mencetuskan animasi sebaik sahaja anda klik padanya. Yang ini akan memulakan animasi "Menghantar" sebaik sahaja anda klik.

Pautan

15. Kue Baru oleh Marco Barría

Animasi menarik yang menunjukkan pembuatan lapisan kek dengan lapisan. Ini animasi SVG yang menarik yang sesuai untuk kad hari jadi.

16. Paper Shredder oleh Chris Gannon

Sekiranya anda menikmati menonton mencarik kertas, anda akan menikmati animasi ini yang menggambarkan kertas mencarik mesin dengan kertas tanpa had dalam urutan lancar.

Pautan

17. PolyLion yang rendah oleh GRAYGHOST

Ini adalah ilustrasi dan animasi yang menggambarkan kepala singa muncul dan menghilang dalam bentuk poligon animasi.

Pautan

18. Jam Lolass Loader oleh Leela

Satu lagi animasi yang berkesan hanya menggunakan SVG. Setiap 5 saat, jam pasir akan berubah terbalik dan memulakan kitaran baru.

Pautan

19. Lembu Responsif oleh Sarah Drasner

Ini adalah animasi interaktif lucu yang membolehkan anda mengklik pada seekor lembu dan menyeretnya mengelilingi bulan ketika seorang astronot bingung melihatnya.

20. Pelajar oleh Domany

Seorang pelajar yang bersemangat kelihatan bersedia untuk belajar! Ia adalah animasi yang hebat di mana halaman buku sedang bertukar dengan kemas. Tidak berkedip dari pelajar, tetapi ini masih merupakan animasi yang sempurna untuk menyimpulkan senarai ini.

Pautan