Cara Membuat Animasi SVG Menggunakan CSS
Animasi SVG boleh dilakukan melalui elemen asli seperti
Animasi CSS juga boleh menjadi cara alternatif untuk menggunakan perpustakaan JavaScript seperti SnapSVG. Dalam siaran ini kita akan melihat apa yang kita mungkin dapat menyampaikan dengan CSS Animasi di SVG.
1. Mewujudkan Bentuk
Pertama sekali, kita perlu menarik bentuk dan objek yang kita mahu bernyawa. Anda boleh menggunakan aplikasi seperti Lakaran, Adobe Illustrator, atau Inkscape untuk membuat satu.
Untuk contoh ini, saya telah menarik langit mendung sebagai latar belakang, dan sebuah kapal roket menembak ke atas, nyala api termasuk:
Setelah selesai dengan lukisan, kami perlu mengeksport setiap objek yang telah kami buat ke SVG.
Saya akan menggunakan Sketch sebagai contoh untuk langkah ini. Pilih objek yang anda ingin bertukar menjadi format SVG. Di sebelah kanan bawah tetingkap anda, klik Buat Eksport. Pilih format SVG, kemudian klik Eksport object-name. Anda perlu melakukan satu perkara ini pada satu masa.
2. Masukkan SVG ke dalam HTML
Apabila anda membuka fail SVG dalam editor kod, anda akan mendapati bahawa kod SVG agak kemas. Oleh itu, sebelum kita menggunakan fail SVG, mari kita bersihkan kod dan mengoptimumkannya dengan alat baris arahan yang dipanggil SVGO.
Pelancaran Terminal atau Arahan prompt, dan pasang SVGO dengan baris arahan ini:
[sudo] npm pasang -g svgo
Tun arahan itu, svgo, pada fail SVG yang menggunakan --cantik untuk menghasilkan kod SVG yang boleh dibaca:
svgo rocket.svg - cantik
Jika anda mempunyai berbilang SVG dalam direktori, anda boleh mengoptimumkannya bersama-sama, sekali gus. Dengan mengandaikan direktori dinamakan / imej, maka dari direktori induk gunakan perintah ini:
svgo -f images --pretty
Mari lihat perbezaan sebelum dan selepas menggunakan SVGO.
Salin kod dalam fail SVG dan tampal ke fail HTML. Kami akan bekerja di ruang kerja 800px dengan 600px lebar, jadi jangan lupa untuk mentakrifkan lebar pada elemen SVG.
SVG ditetapkan dalam fail HTML. Kita perlu menentukan ID untuk setiap objek, jadi kita boleh memilihnya dalam CSS kemudian.
Untuk tutorial ini, kita perlu menentukan ID untuk roket dan api, dan beberapa awan. Untuk objek untuk mengendalikan tahap animasi di kemudian hari, kita perlu menambah ID - anda juga boleh menggunakannya kelas - kepada setiap objek. Pada peringkat ini, kod tersebut akan kelihatan seperti ini:
3. Animasi Menggunakan CSS
Sekarang mari kita bersenang-senang. Pelan ini adalah untuk meningkatkan roket ke angkasa lepas. Roket terbahagi kepada dua kumpulan; roket itu sendiri dan api.
Pertama sekali, kami meletakkan roket di tengah-tengah ruang kerja, seperti berikut:
#rocket transform: menterjemah (260px, 200px);
Apa yang anda lihat ialah:
Sekarang untuk membuat roket kelihatan seperti ia akan naik, kita perlu membuat ilusi awan jatuh. CSS yang kami gunakan untuk ini adalah:
# cloud1 animasi: jatuh 1s linear tak terhingga; @keyframes fall from transform: translateY (-100px); untuk transform: translateY (1000px)
Untuk menjadikannya kelihatan lebih realistik, mari kita animasi empat awan, dan buatnya “jatuh” pada kelajuan yang berbeza. Kami juga akan meletakkannya secara berbeza dari paksi X.
Awan kedua akan mempunyai kod seperti ini:
# cloud2 animation: fall-2 2s linear infinite; @keyframes fall-2 dari transform: menterjemah (200px, -100px); untuk transform: menterjemah (200px, 1000px)
Perhatikan bahawa kami telah memindahkan awan # 2 sedikit ke kanan, oleh 200px dengan menterjemah. Pada peringkat ini, hasilnya sepatutnya kelihatan seperti ini.
Seterusnya, mari buatkan roket itu hidup. Kami akan memberikan kerangka utama animasi, seperti berikut:
#rocket animasi: popup 1s memudahkan tak terhingga; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: menterjemah (260px, 240px); 100% transform: menterjemah (260px, 200px);
Dan tambah animasi pada api roket juga:
#flame animation: shake .2s linear infinite; @keyframes shake 0% transform: translate (55px, 135px) putar (7deg); 20% transform: menterjemah (55px, 135px) putar (0deg); 40% transform: menterjemahkan (55px, 135px) putar (-7deg); 60% transform: menterjemah (55px, 135px) putar (0deg); 100% transform: menterjemahkan (55px, 135px) putar (0deg);
Betul! Sekarang bahawa semua kod kami telah ditetapkan, animasi harus berfungsi pada SVG kami.
Lihatlah letupan roket kami ke ruang angkasa.
Pemikiran Akhir
Animasi bukanlah ciri paling mudah dalam CSS untuk dipahami. Tetapi diharapkan anda akan mendapati tutorial ini sebagai titik permulaan yang baik untuk meneroka Animasi CSS pada SVG selanjutnya; anda akan terkejut mengetahui apa yang boleh dicapai dengan Animasi CSS di tangan.
Jika anda ingin memulakan dengan asas-asas yang sangat, anda boleh mulakan di sini dengan catatan ini: A Look Into: Animated Graphics Vector Scalable (SVG) atau mengikuti siri siri SVG.
- Lihat Demo
- Muat turun Sumber
