Pengantar SVG 2D dari HTML5: 11-User Interaction (Animation) Pendahuluan dan Aplikasi

SVG memiliki interaktivitas pengguna yang baik, seperti:

1. SVG dapat menanggapi sebagian besar acara DOM2.

2. SVG dapat menangkap gerakan mouse pengguna dengan baik melalui kursor.

3. Pengguna dapat dengan mudah mencapai penskalaan dan efek lainnya dengan menetapkan nilai properti zoomandpan dari elemen SVG.

4. Pengguna dapat dengan mudah menggabungkan animasi dan acara untuk menyelesaikan beberapa efek kompleks.

Dengan melampirkan acara ke elemen SVG, kami dapat dengan mudah menyelesaikan beberapa tugas interaktif menggunakan bahasa skrip. SVG mendukung sebagian besar acara DOM2, seperti Onfocusin, Onfocusou, Onclick, Onmousedown, Onmouseup, OnmouseMove, Onmouseout, Onload, Onressize, Onscroll, dan acara lainnya. Selain itu, SVG juga menyediakan acara yang berkaitan dengan animasi yang unik, seperti: Onroom, Onbegin, Onend, OnRepeat, dll.

Semua orang akrab dengan insiden itu, jadi saya tidak akan membicarakannya.

SVG menggunakan teks untuk mendefinisikan grafik, dan struktur dokumen ini sangat cocok untuk membuat animasi. Untuk mengubah posisi, ukuran, dan warna gambar, Anda hanya perlu menyesuaikan sifat yang sesuai. Bahkan, SVG memiliki properti yang dirancang khusus untuk berbagai pemrosesan acara, dan banyak dari mereka bahkan dibuat khusus untuk animasi. Di SVG, ada beberapa cara untuk mengimplementasikan animasi:

1. Gunakan elemen animasi SVG. Ini akan disorot di bawah ini.

2. Gunakan skrip. Menggunakan operasi DOM untuk memulai dan mengontrol animasi sudah merupakan teknologi yang matang, dan ada contoh kecil di bawah ini.

3. Smil (bahasa integrasi multimedia yang disinkronkan). Jika Anda tertarik, silakan merujuk ke: http://www.w3.org/tr/2008/rec-smil3-20081201/.

<svgviewbox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg" versi = "1.1">

<desc> Elemen Animasi Dasar </ desc>

<rect x = "1" y = "1"

isi = "tidak ada" stroke = "biru"-stroke-lebar = "2" />

<!-Animasi posisi dan ukuran persegi panjang->

<rect id = "rectelement" x = "300" y = "100"

fill = "rgb (255.255,0)">

<animate atributeName = "x" atributeType = "xml"

Begin = "0s" DUR = "9S" Fill = "Freeze" dari = "300" hingga = "0" />

<animate atributeName = "y" atributeType = "xml"

Begin = "0s" DUR = "9S" Fill = "Freeze" dari = "100" hingga = "0" />

<animate atributeName = "width" atributeType = "xml"

Begin = "0s" DUR = "9S" Fill = "Freeze" dari = "300" hingga = "800" />

<animate atributeName = "height" atributeType = "xml"

Begin = "0s" DUR = "9S" Fill = "Freeze" dari = "100" hingga = "300" />

</sect>

<!-Buat ruang koordinat pengguna baru, jadi teks dimulai dengan yang baru (0,0), dan transformasi selanjutnya adalah untuk sistem koordinat baru->

<g transform = "translate (100.100)">

<!- ​​Penggunaan berikut diatur untuk hidup visibilitas, dan kemudian menggunakan animatemotion,

Animate dan AnimateTransform melakukan jenis animasi lainnya ->

<Text ID = "TextElement" x = "0" y = "0"

font-family = "verdana" font-size = "35.27" visibilitas = "tersembunyi">

Itu hidup!

<set attributeName = "visibilitas" atributeType = "css" ke = "visible"

Begin = "3s" Dur = "6s" Fill = "Freeze" />

<animatemotion path = "m 0 0 l 100 100"

Begin = "3s" Dur = "6s" Fill = "Freeze" />

<animate atributeName = "isi" atributeType = "css"

dari = "rgb (0,0,255)" ke = "rgb (128,0,0)"

Begin = "3s" Dur = "6s" Fill = "Freeze" />

<animatetransform attributeName = "transform" attributeType = "xml"

type = "rotate" from = "-30" to = "0"

Begin = "3s" Dur = "6s" Fill = "Freeze" />

<animatetransform attributeName = "transform" attributeType = "xml"

type = "skala" dari = "1" hingga = "3" tambahan = "jumlah"

Begin = "3s" Dur = "6s" Fill = "Freeze" />

</text>

</g>

</svg>

Masukkan kode ini ke dalam tubuh dokumen HTML dan jalankan untuk mengetahui efek animasi.

xlink: href

Ini harus sangat akrab, menunjuk ke elemen -elemen yang mengeksekusi animasi. Elemen ini harus didefinisikan dalam fragmen dokumen SVG saat ini. Jika atribut ini tidak ditentukan, animasi akan diterapkan pada elemen induknya.

attributeName = <TributeName>

Properti ini menentukan properti untuk menerapkan animasi. Jika properti ini memiliki namespace (jangan lupa, SVG pada dasarnya adalah dokumen XML), namespace ini juga harus ditambahkan. Misalnya, dalam contoh berikut, XLink diberikan alias yang berbeda. Di sini, ketika Animate menentukan atribut, namespace disertakan:

<svg versi = "1.1" xmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<title> Demonstrasi resolusi namespaces for animation </title>

<G xmlns: a = "http://www.w3.org/1999/xlink">

<animate atributeName = "a: href" xlink: href = "#foo" dur = "2s" to = "two.png" fill = "freeze"/>

</g>

<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">

<gambar xml: id = "foo" b: href = "satu.png" x = "35" y = "50"/>

</g>

</svg>

atributetype = css | Xml | Auto (nilai default)

Properti ini menentukan namespace di mana nilai properti diambil. Arti dari nilai -nilai ini adalah sebagai berikut:

CSS: Atribut yang ditentukan atas nama AttributeName adalah atribut CSS.

XML: Atribut yang ditentukan oleh AttributeName adalah atribut di bawah namespace default XML (perhatikan bahwa dokumen SVG pada dasarnya adalah dokumen XML).

Auto: Ini berarti untuk pertama -tama mencari atribut yang ditentukan oleh atributeName dalam atribut CSS. Jika tidak ditemukan, itu akan mencari atribut di bawah namespace XML default.

Properti berikut adalah atribut waktu animasi; Mereka mengontrol garis waktu eksekusi animasi, termasuk cara memulai dan mengakhiri animasi, apakah animasi dieksekusi berulang kali, apakah animasi berakhir, dll.

Begin = start-value-list

Properti ini mendefinisikan waktu mulai animasi. Ini bisa berupa serangkaian nilai waktu yang dipisahkan oleh titik koma. Ini juga bisa menjadi nilai lain yang memicu awal animasi. Misalnya, acara, kunci pintasan, dll.

DUR = Nilai jam | media | tak terbatas

Mendefinisikan durasi animasi. Dapat diatur ke nilai yang ditampilkan dalam format jam. Ini juga dapat diatur ke dua nilai berikut:

Media: Menentukan bahwa waktu animasi adalah durasi elemen multimedia internal.

Tidak terbatas: Tentukan waktu animasi untuk menjadi tak terbatas.

Format jam mengacu pada format nilai hukum berikut:

: 30: 03 = 2 jam, 30 menit dan 3 detik

: 00: 10.25 = 50 jam, 10 detik dan 250 juta detik

: 33 = 2 menit dan 33 detik

: 10,5 = 10,5 detik = 10 detik dan 500 juta detik

.2h = 3,2 jam = 3 jam dan 12 menit

min = 45 menit

s = 30 detik

MS = 5 juta detik

.467 = 12 detik dan 467 juta detik

.5s = 500 juta detik

: 00.005 = 5 juta detik

end = daftar end-value

Mendefinisikan waktu akhir animasi. Dapat berupa serangkaian nilai yang dipisahkan oleh titik koma.

min = nilai jam | media

Max = Nilai Jam | media

Menetapkan nilai maksimum dan minimum dari durasi animasi.

restart = selalu | kapan tidak ada | tidak pernah

Siapkan animasi untuk memulai dari awal kapan saja. Selalu berarti animasi dapat dimulai kapan saja. Ketika tidak ada artinya Anda hanya dapat memulai kembali ketika tidak ada pemutaran, seperti pemutaran sebelumnya berakhir. Tidak pernah berarti bahwa animasi tidak dapat dimulai lagi.

REURTCOUNT = Nilai Numerik | tak terbatas

Atur berapa kali animasi diulang. tidak terbatas adalah singkatan dari pengulangan tak terbatas.

REURNDUR = Nilai jam | tak terbatas

Menetapkan total waktu animasi yang diulang. tidak terbatas adalah singkatan dari pengulangan tak terbatas.

isi = beku | hapus (default)

Mengatur keadaan elemen setelah animasi selesai. Freeze berarti elemen tetap dalam keadaan terakhir animasi setelah animasi selesai. Hapus berarti bahwa elemen kembali ke status sebelum animasi setelah akhir animasi, yang merupakan nilai default.

Kategori 3: Tentukan atribut nilai animasi

Properti ini menentukan nilai properti yang dieksekusi. Bahkan, beberapa algoritma yang mendefinisikan kerangka kunci dan interpolasi.

calcmode = diskrit | linear (default) | mondar -mandir | Spline

Tentukan metode interpolasi animasi: diskrit: diskrit, tidak ada interpolasi; Linear: interpolasi linier; Maju: interpolasi ukuran langkah; Spline: Interpolasi Spline. Standarnya adalah linier (interpolasi linier), tetapi jika atribut tidak mendukung interpolasi linier, interpolasi diskrit akan digunakan.

nilai = <list>

Mendefinisikan daftar nilai untuk kerangka kunci animasi yang dipisahkan oleh titik koma. Mendukung nilai vektor.

KeyTimes = <list>

Mendefinisikan daftar waktu kerangka kunci animasi yang dipisahkan oleh titik koma. Ini sesuai dengan nilai satu per satu. Nilai ini dipengaruhi oleh algoritma interpolasi. Jika interpolasi linier dan spline, nilai pertama waktu harus 0 dan nilai terakhir harus 1. Untuk non-interpolasi diskrit, nilai pertama waktu kunci harus 0. Untuk interpolasi ukuran langkah, jelas bahwa waktu kunci tidak diperlukan. Dan jika durasi animasi diatur ke tidak terbatas, waktu kunci diabaikan.

keysplines = <list>

Properti ini mendefinisikan titik kontrol ketika interpolasi spline (interpolasi betzel), dan jelas hanya berfungsi jika mode interpolasi dipilih sebagai spline. Nilai dalam daftar ini berkisar dari 0 hingga 1.

dari = <value>

ke = <value>

oleh = <value>

Mendefinisikan nilai start, end, dan langkah dari atribut animasi. Catatan di sini: Jika nilai telah merumuskan nilai yang relevan, nilai dari/ke/berdasarkan nilai akan diabaikan.

Terkadang, sangat berguna untuk menetapkan nilai yang relevan alih -alih nilai absolut, tetapi nilai tambahan, menggunakan properti aditif dapat mencapai tujuan ini.

additive = ganti (nilai default) | jumlah

Properti ini mengontrol apakah animasinya bertahap. SUM berarti bahwa animasi akan memiliki nilai atribut terkait yang lebih besar atau animasi prioritas rendah lainnya. Ganti adalah nilai default, menunjukkan bahwa animasi akan menimpa nilai atribut yang relevan atau animasi prioritas rendah lainnya. Lihat contoh kecil:

<Rect ...>

<animate atributeName = "width" dari = "0px" ke = "10px" dur = "10s"

additive = "sum"/>

</sect>

Contoh ini menunjukkan efek animasi dari peningkatan lebar persegi panjang.

Kadang -kadang, ini juga sangat berguna jika hasil animasi yang diulang ditumpangkan, dan menggunakan properti akumulasi dapat mencapai tujuan ini.

menumpuk = tidak ada (default) | jumlah

Properti ini mengontrol apakah efek animasi bersifat kumulatif. Tidak ada nilai default, yang menunjukkan bahwa animasi duplikat tidak menumpuk. SUM berarti bahwa efek animasi yang diulang terakumulasi. Untuk animasi eksekusi tunggal, properti ini tidak memiliki arti. Lihat contoh kecil:

<Rect ...>

<animate atributeName = "width" dari = "0px" ke = "10px" dur = "10s"

tambahan = "sum" accumulation = "sum" RepeatCount = "5"/>

</sect>

Contoh ini menunjukkan bahwa panjang persegi panjang meningkat di setiap iterasi.

SVG menyediakan elemen animasi berikut:

Ini adalah elemen animasi paling dasar, yang secara langsung dapat memberikan nilai -nilai titik waktu yang berbeda untuk atribut terkait.

Ini adalah singkatan dari elemen animasi dan mendukung semua jenis atribut, terutama ketika atribut animate (seperti visibilitas). Elemen yang ditetapkan tidak meningkat, dan atribut yang relevan tidak valid. Jenis nilai akhir animasi yang ditentukan harus sesuai dengan jenis nilai atribut.

Elemen Animasi Lu Jin. Sebagian besar sifat elemen ini sama seperti di atas, dengan hanya perbedaan yang sedikit berbeda:

calcmode = diskrit | Linear | mondar -mandir | Spline

Nilai default properti ini berbeda, dan nilai default dalam elemen ini berjalan.

path = <path-data>

Jalur elemen animasi yang bergerak sama dengan format nilai atribut D Path Element.

keypoints = <fist-of-number>

Nilai properti ini adalah serangkaian nilai titik mengambang yang diberikan oleh titik koma, dan kisaran nilai masing -masing nilai adalah 0 ~ 1. Nilai -nilai ini mewakili jarak di mana titik waktu yang sesuai dipindahkan yang ditentukan oleh atribut KeyTimes. Jarak spesifik di sini ditentukan oleh browser itu sendiri.

Rotate = <number> | Otomatis | Auto-Reverse

Properti ini menentukan sudut di mana elemen berputar saat bergerak. Nilai default adalah 0, angka tersebut mewakili sudut rotasi, dan otomatis mewakili tubuh hewan yang berputar ke arah gaya jalan. Auto-reverse menunjukkan arah di mana kemudi berlawanan dengan arah gerakan.

Selain itu, nilai -nilai elemen animatemotion dari, oleh, ke, nilai -nilai terdiri dari pasangan koordinat; Nilai x dan nilai y dipisahkan oleh koma atau ruang, dan setiap pasangan koordinat dipisahkan oleh titik koma, seperti dari = 33, 15, yang berarti bahwa titik awal koordinat x adalah 33 dan koordinat y adalah 15.

Ada dua cara untuk menentukan jalur gerak: satu adalah dengan langsung menetapkan nilai ke atribut jalur, dan yang lainnya adalah menentukan jalur untuk menggunakan elemen mpath sebagai elemen anak animatemotionde. Jika Anda menggunakan kedua metode, elemen MPath memiliki prioritas tinggi. Kedua metode memiliki prioritas yang lebih tinggi daripada nilai, dari, oleh, ke.

Lihat contoh kecil:

<? Xml Version = "1.0" mandiri = "no"?>

<! Doctype SVG Public "-// W3C // DTD SVG 1.1 // EN"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svgviewbox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg" versi = "1.1"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<rect x = "1" y = "1"

isi = "tidak ada" stroke = "biru"-stroke-lebar = "2" />

<Path ID = "Path1" D = "M100.250 C 100,50 400,50 400.250"

isi = "tidak ada" stroke = "biru"-stroke-lebar = "7.06"/>

<lingkaran cx = "100" cy = "250" r = "17.64" fill = "blue"/>

<lingkaran cx = "250" cy = "100" r = "17.64" fill = "blue"/>

<lingkaran cx = "400" cy = "250" r = "17.64" fill = "blue"/>

<path d = "m-25, -12.5 l25, -12.5 l 0, -87.5 z"

fill = "kuning" stroke = "merah"-stroke-lebar = "7.06">

<animatemotion dur = "6s" REURTCOUNT = "tidak terbatas" Rotate = "Auto">

<mpath xlink: href = "#path1"/>

</animatemotion>

</path>

</svg>

Elemen Animasi Warna. Ini adalah elemen yang sudah ketinggalan zaman, dan pada dasarnya semua fungsi dapat diganti dengan animasi, jadi jangan gunakan itu.

Mengubah elemen animasi. Lihatlah beberapa properti khusus:

type = translate | skala | putar | skewx | miring

Properti ini menentukan jenis transformasi, dan menerjemahkan adalah nilai default.

Nilai -nilai dari, oleh dan sesuai dengan parameter transformasi, yang konsisten dengan transformasi yang disebutkan di atas. Nilai adalah seperangkat nilai yang dipisahkan titik koma.

Elemen dan properti yang mendukung efek animasi

Pada dasarnya semua elemen grafis (jalur, rect, elips, teks, gambar ...) dan elemen kontainer (SVG, G, DEFS, Use, Switch, Clippath, Mask ...) Dukungan animasi. Pada dasarnya sebagian besar properti mendukung efek animasi. Untuk instruksi terperinci, silakan merujuk ke dokumentasi resmi.

Animasi SVG juga dapat diselesaikan menggunakan skrip. Konten DOM yang terperinci akan diperkenalkan nanti. Berikut adalah contoh singkat:

<? Xml Version = "1.0" mandiri = "no"?>

<! Doctype SVG Public "-// W3C // DTD SVG 1.1 // EN"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svg viewbox = "0 0 400 200"

xmlns = "http://www.w3.org/2000/svg"

onload = "startAnimation (evt)" versi = "1.1">

<type script = "Application/ecmascript"> <! [CDATA [

var timevalue = 0;

var timer_increment = 50;

var max_time = 5000;

var text_element;

function startAnimation (evt) {

text_element = evt.target.OwnerDocument.getElementById ("TextElement");

Showandgrowelement ();

}

function showandgrowelement () {

timeValue = timevalue + timer_increment;

if (timevalue> max_time)

kembali;

// Skala string teks secara bertahap sampai 20 kali lebih besar

scaleFactor = (TimeValue * 20.) / max_time;

text_element.setAttribute ("Transform", "Scale (" + ScaleFactor + ")");

// Jadikan string lebih buram

opacityfactor = timevalue/max_time;

text_element.setAttribute ("opacity", opacityfactor);

// Hubungi showandgroweLement lagi <Timer_increment> jutaan detik nanti.

setTimeout ("showandgrowelement ()", timer_increment)

}

window.showandgrowelement = showAngrowElement

]]> </script>

<rect x = "1" y = "1"

isi = "tidak ada" stroke = "biru"-stroke-lebar = "2"/>

<g transform = "translate (50.150)" Fill = "Red" font-size = "7">

<Text ID = "TextElement"> SVG </text>

</g>

</svg>

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/

Dokumen Resmi: http://www.w3.org/tr/svg11/

SVG Animation Technology: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx