A Look Into Animated Graphics Vector Scalable (SVG) Animation

Hari ini kami akan meneruskan perbincangan kami Grafik Vektor Berkala (SVG), dan kali ini kita akan bekerjasama Animasi SVG. Jangan takut, Animasi SVG agak mudah dan sebenarnya dalam jawatan ini kita akan bermula dari asas-asas.

Pelaksanaan Asas

Animasi di SVG boleh dilakukan melalui elemen;

Seperti yang anda dapat lihat dari coretan kod di atas, kami menambah dalam elemen yang akan terjejas. Ini mengandungi beberapa sifat berikut;

attributeName: Atribut ini menentukan sifat atribut mana yang akan dipengaruhi dalam animasi.

dari: Atribut ini adalah pilihan, kita boleh menentukan nilai yang tepat atau membiarkannya bermula dari mana ia berada.

kepada: Atribut ini menentukan arah animasi. Bergantung pada nilai yang ditentukan dalam attributeName, keputusan mungkin berbeza-beza. Tetapi dalam contoh ini ia akan memanjangkan ketinggian.

dur: Atribut ini menentukan tempoh animasi. Nilai atribut ini dinyatakan dalam Sintaks Nilai Jam. Sebagai contoh, 02:33 mewakili 2 minit dan 33 saat, sementara 3h adalah sama dengan 3 jam, tetapi kita tidak memerlukan masa yang panjang supaya kita menentukan tempoh untuk adil 3s atau 3 saat;

Perkara yang sama berlaku elemen, tetapi kali ini kita menargetkan atribut jejari bulatan (r).

• Demo Pelaksanaan Asas

Memindahkan Unsur

Dalam menggerakkan elemen SVG, kita hanya perlu menyasarkan koordinat elemen x dan y;

Dalam contoh di atas, kita bergerak persegi panjang dari 0 kepada 200 dalam masa 3 saat, segi empat tepat akan kelihatan bergerak mendatar dari kiri ke kanan. Juga, jika anda melihat dengan teliti kami juga menambah atribut lain kepada elemen, iaitu mengisi.

mengisi atribut di sini tidak ada kaitan dengan warna latar belakang seperti dalam elemen SVG yang lain. Atribut ini menentukan bagaimana animasi akan bertindak selepas tempoh berakhir. Dalam contoh ini kita membekukan elemen yang terjejas sehingga ia kekal di mana animasi berakhir.

Ia juga berfungsi sama dengan elemen, kita boleh gunakan cx atau cy, seperti itu:

• Memindahkan Demo Elemen

Hatikan Sifat Atribut

Setakat ini, kami hanya menargetkan satu atribut yang akan dinyanyikan, tetapi juga mungkin menghidupkan lebih daripada satu atribut sekaligus. Contoh di bawah menunjukkan bagaimana kita melakukannya:

Seperti yang anda lihat, ia berfungsi dengan cara yang sama, hanya sekarang kita mempunyai dua unsur di dalam untuk menyasarkan radius dan juga lebar strok akan terjejas.

• Demo Pelbagai Objek

Mengikuti jalan

Dalam jawatan kami sebelumnya Bekerja dengan Teks dalam SVG, kami telah menunjukkan kepada anda cara mengalir Teks ke Jalan. Ia juga mungkin untuk melakukan perkara yang sama dalam Animasi SVG, kita boleh menghidupkan elemen untuk mengikuti jalan. Inilah contohnya.

Laluan lebih jelas dalam a elemen, seperti yang ditunjukkan di atas. Agar elemen untuk mengikuti Laluan, kita perlu menentukan animasi dengan dan hubungkan laluan ID dengan elemen, seperti berikut;

Itu sahaja, sekarang mari kita lihat dalam tindakan;

• Mengikuti Demo Laluan

Transformasi

Kita juga boleh menggunakan transformasi seperti skala, menterjemah dan berputar untuk Animasi, dan untuk berbuat demikian, kami akan menggunakannya ;

Transformasi dalam saham SVG mempunyai prinsip yang sama dengan CSS3, dan kami telah membincangkannya secara menyeluruh dalam jawatan terdahulu kami tentang Transformasi CSS3 2D.

• Demo Transformasi

Pemikiran Akhir

Bergantung pada penguasaan anda pada Animasi SVG, anda boleh membuat sesuatu seperti ini.

Satu kelebihan menggunakan Animasi SVG ke atas Animasi Flash adalah bahawa ia tidak bergantung kepada pemalam pihak ketiga untuk berfungsi dan ia juga jauh lebih cepat daripada Flash. Selepas Adobe menghentikan sokongan Flash mereka di Android, anda mungkin mahu mencuba pendekatan ini untuk memberi animasi di laman web seterusnya.

Rujukan lanjut

• Dokumentasi Animasi SVG
• Teknik Animasi SVG Lanjutan

• Lihat Demo
• Muat turun Sumber