A Look Into Scalable Vector Graphics (SVG) Animation

Hari ini kita akan melanjutkan diskusi kita pada Scalable Vector Graphics (SVG), dan kali ini kita akan bekerja sama Animasi SVG. Jangan takut, Animasi SVG relatif mudah dan sebenarnya dalam posting ini kita akan mulai dari dasar.

Implementasi Dasar

Animasi dalam SVG dapat dilakukan melalui elemen;

Seperti yang Anda lihat dari cuplikan kode di atas, kami menambahkan dalam elemen yang akan terpengaruh. Ini mengandung beberapa atribut berikut;

atributName: Atribut ini menentukan atribut elemen mana yang akan terpengaruh dalam animasi.

dari: Atribut ini bersifat opsional, kita dapat menentukan nilai yang tepat atau membiarkannya agar dimulai dari tempat sebelumnya.

untuk: Atribut ini menentukan arah animasi. Tergantung pada nilai yang ditentukan dalam atributName, hasilnya dapat bervariasi. Tetapi dalam contoh ini akan memperpanjang tinggi.

dur: Atribut ini menentukan durasi animasi. Nilai dari atribut ini dinyatakan dalam Sintaks Nilai Jam. Sebagai contoh, 02:33 mewakili 2 menit dan 33 detik, sementara 3j sama dengan 3 jam, tapi kita tidak perlu selama itu jadi kita tentukan durasinya saja 3s atau 3 detik;

Hal yang sama berlaku juga elemen, tapi kali ini kami menargetkan atribut jari-jari lingkaran (r).

Demo Implementasi Dasar

Elemen bergerak

Dalam memindahkan elemen SVG, kita hanya perlu menargetkan koordinat elemen x dan y;

Pada contoh di atas, kita memindahkan persegi panjang dari 0 untuk 200 dalam 3 detik, persegi panjang akan tampak bergerak horizontal dari kiri ke kanan. Juga, jika Anda perhatikan dengan teliti, kami juga menambahkan atribut lain ke elemen, yaitu mengisi.

mengisi atribut di sini tidak ada hubungannya dengan warna latar belakang seperti pada elemen SVG lainnya. Atribut ini menentukan bagaimana animasi akan bertindak setelah durasinya berakhir. Dalam contoh ini kita membekukan elemen yang terpengaruh sehingga tetap berada di tempat animasi berakhir.

Ini juga berfungsi mirip dengan elemen, bisa kita gunakan cx atau cy, seperti itu:

Demo Elemen Pindah

Menghidupkan Banyak Atribut

Sejauh ini, kami hanya menargetkan satu atribut untuk dianimasikan, tetapi juga memungkinkan untuk menghidupkan lebih dari satu atribut sekaligus. Contoh di bawah ini menunjukkan bagaimana kami melakukannya:

Seperti yang Anda lihat, ini bekerja dengan cara yang sama, hanya sekarang kita punya dua elemen di dalam untuk menargetkan radius dan lebar goresan terpengaruh.

Demo Berbagai Atribut

Mengikuti Jalan

Di posting kami sebelumnya pada Bekerja dengan Teks dalam SVG, kami telah menunjukkan cara mengalir Teks ke Path. Dimungkinkan juga untuk melakukan hal yang sama di Animasi SVG, kita bisa menghidupkan elemen untuk mengikuti Path. Berikut ini sebuah contoh.

Path didefinisikan dengan lebih baik dalam a elemen, seperti yang ditunjukkan di atas. Agar elemen mengikuti Path, kita perlu mendefinisikan animasi dan tautkan jalurnya id dengan elemen, sebagai berikut;

Itu saja, sekarang mari kita lihat dalam aksi;

Mengikuti Demo Jalan

Transformasi

Kami juga dapat menggunakan transformasi seperti skala, menterjemahkan dan memutar untuk Animasi, dan untuk itu kami akan menggunakan ;

Transformasi dalam SVG berbagi prinsip yang sama dengan CSS3, dan kami telah membahasnya secara cukup komprehensif dalam posting kami sebelumnya tentang CSS3 2D Transformasi.

Demo Transformasi

Pikiran terakhir

Tergantung pada kemahiran Anda pada Animasi SVG Anda dapat membuat sesuatu seperti ini.

Salah satu keuntungan menggunakan Animasi SVG daripada Animasi Flash adalah bahwa ia tidak bergantung pada plugin pihak ketiga untuk bekerja dan juga jauh lebih cepat daripada Flash. Setelah Adobe menghentikan dukungan Flash mereka di Android, Anda mungkin ingin mulai mencoba pendekatan ini untuk menyajikan animasi di situs web Anda berikutnya.

Referensi Lebih Lanjut

Dokumentasi Animasi SVG
Teknik Animasi SVG Lanjut

Lihat Demo
Sumber Unduhan