Pengenalan kepada SVG 2D dalam HTML5 11—Pengenalan interaktiviti pengguna (animasi) dan kemahiran tutorial application_html5

Interaktiviti
SVG mempunyai interaktiviti pengguna yang baik, seperti:
1 SVG boleh bertindak balas kepada kebanyakan acara DOM2.
2. SVG boleh menangkap pergerakan tetikus pengguna melalui kursor.
3. Pengguna boleh mencapai zum dan kesan lain dengan mudah dengan menetapkan nilai atribut zoomAndPan bagi elemen svg.
4 Pengguna boleh menggabungkan animasi dengan acara dengan mudah untuk melengkapkan beberapa kesan yang kompleks.
Dengan melampirkan acara pada elemen SVG, kami boleh menggunakan bahasa skrip untuk menyelesaikan beberapa tugas interaktif dengan mudah. SVG menyokong kebanyakan acara DOM2, seperti onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll dan acara lain. Selain daripada ini, SVG juga menyediakan acara berkaitan animasi unik, seperti: onroom, onbegin, onend, onrepeat, dsb.
Semua orang sudah biasa dengan kejadian itu, jadi saya tidak akan menerangkan secara terperinci.

Kaedah animasi
SVG menggunakan teks untuk mentakrifkan grafik struktur dokumen ini sangat sesuai untuk mencipta animasi. Untuk menukar kedudukan, saiz dan warna grafik, anda hanya perlu melaraskan sifat yang sepadan. Malah, SVG mempunyai ciri-ciri yang direka khas untuk pelbagai pemprosesan acara, dan kebanyakannya juga disesuaikan khas untuk animasi. Dalam SVG, terdapat beberapa cara untuk melaksanakan animasi:
1 Gunakan elemen animasi SVG. Ini akan diserlahkan di bawah.
2. Menggunakan operasi DOM untuk memulakan dan mengawal animasi sudah menjadi teknologi matang Terdapat contoh kecil di bawah.
3. SMIL (Bahasa Integrasi Multimedia Tersegerak). Jika anda berminat, sila rujuk: http://www.w3.org/TR/2008/REC-SMIL3-20081201/.
Contoh berikut mengandungi beberapa animasi paling asas dalam SVG:

Salin kod

Kodnya adalah seperti berikut:

xmlns="http://www.w3 .org /2000/svg" version="1.1">
Unsur animasi asas
fill="none" stroke="blue" stroke-width="2" />
rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)"> x " attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
begin="0s" dur="9s" fill="freeze" from="300" to="800" />
begin="0s" dur="9s" fill="freeze" from="100" to="300" />


- Set digunakan di bawah untuk menghidupkan keterlihatan, dan kemudian animateMotion,
animate dan animateTransform digunakan untuk melaksanakan jenis animasi lain-->
font-family="Verdana" font-size="35.27" visibility="hidden">
Ia hidup!
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur= "6s" fill="freeze" />
from="rgb(0,0,255)" to="rgb(128,0,0) )"
begin="3s" dur="6s" fill="freeze" />
type="rotate" from=" -30" to="0"
begin="3s" dur="6s" fill="freeze" />
type= "scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />


Letakkan kod ini ke dalam badan dokumen html dan jalankannya untuk melihat kesan animasi.

Atribut awam elemen animasi
Kategori 1: Menentukan elemen dan atribut sasaran
xlink:href
Ini sepatutnya biasa, menunjuk ke elemen di mana animasi dilakukan. Elemen ini mesti ditakrifkan dalam serpihan dokumen SVG semasa. Jika atribut ini tidak dinyatakan, animasi akan digunakan pada elemen induknya.
attributeName = ""
Atribut ini menentukan atribut yang digunakan untuk animasi. Jika atribut mempunyai ruang nama (jangan lupa, SVG pada asasnya ialah dokumen XML), ruang nama ini juga mesti ditambah. Contohnya, dalam contoh berikut, alias berbeza diberikan kepada xlink Di sini, animate menggunakan ruang nama apabila menentukan atribut:

Salin kod

Kodnya adalah seperti berikut:

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

attributeType = "CSS | XML | auto (nilai lalai)"
Atribut ini menentukan ruang nama nilai atribut. Ini Maksud beberapa nilai adalah seperti berikut:
CSS: Mewakili bahawa atribut yang ditentukan oleh attributeName ialah atribut CSS.
XML: Atribut yang ditentukan oleh attributeName ialah atribut di bawah ruang nama lalai XML (perhatikan bahawa dokumen svg pada asasnya ialah dokumen xml).
auto: bermaksud mula-mula mencari atribut yang ditentukan oleh attributeName dalam atribut CSS Jika tidak ditemui, atribut akan dicari dalam ruang nama lalai XML.

Kategori 2: Atribut yang mengawal masa animasi Atribut berikut adalah semua atribut masa animasi; ia mengawal garis masa pelaksanaan animasi, termasuk cara memulakan dan menamatkan animasi, dan sama ada untuk mengulangi animasi itu sama ada untuk menyimpan keadaan akhir animasi, dsb.
begin = "begin-value-list"
Atribut ini mentakrifkan masa mula animasi. Boleh menjadi satu siri nilai masa yang dipisahkan oleh titik bertitik. Ia juga boleh menjadi beberapa nilai lain yang mencetuskan animasi untuk bermula. Seperti acara, kekunci pintasan, dsb.
dur = Nilai jam |. "media" |. "tak tentu"
mentakrifkan tempoh animasi. Boleh ditetapkan kepada nilai yang dipaparkan dalam format jam. Ia juga boleh ditetapkan kepada dua nilai berikut:
media: Menentukan bahawa masa animasi ialah tempoh elemen multimedia dalaman.
tak tentu: Tentukan masa animasi menjadi tak terhingga.
Format jam merujuk kepada format nilai undang-undang berikut:

Salin kodKod adalah seperti berikut:

:30:03= 2 jam, 30 minit dan 3 saat
:00:10.25 = 50 jam, 10 saat dan 250 milisaat
:33 = 2 minit dan 33 saat
:10.5 = 10.5 saat = 10 saat dan 500 milisaat
.2j= 3.2 jam = 3 jam dan 12 minit
min = 45 minit
s = 30 saat
ms = 5 milisaat .5s = 500 milisaat
:00.005 = 5 milisaat


end = "end-value-list"
mentakrifkan masa tamat animasi. Boleh menjadi satu siri nilai yang dipisahkan oleh koma bertitik.
min = Nilai jam |. "media"
maks = Nilai jam | "media"
Menetapkan nilai maksimum dan minimum tempoh animasi.
mulakan semula = "selalu" |. "whenNotActive" | "tidak pernah"
Tetapkan sama ada animasi boleh dimulakan semula pada bila-bila masa. sentiasa bermakna animasi boleh bermula pada bila-bila masa. whenNotActive bermakna ia hanya boleh dimulakan semula apabila ia tidak dimainkan, contohnya, main balik sebelumnya telah tamat. tidak bermakna animasi tidak boleh dimulakan semula.
repeatCount = nilai angka |. "tak tentu"
Tetapkan bilangan kali animasi berulang. Tak tentu mewakili pengulangan tak terhingga.
repeatDur = Nilai jam |. "tak tentu"
Tetapkan jumlah masa pengulangan animasi. Tak tentu mewakili pengulangan tak terhingga.
isi = "bekukan" |. "buang(nilai lalai)"
Menetapkan keadaan elemen selepas animasi tamat. Pembekuan bermakna elemen kekal dalam keadaan akhir animasi selepas animasi tamat. alih keluar bermakna selepas animasi tamat, elemen kembali ke keadaan sebelum animasi Ini adalah nilai lalai.
Kategori 3: Atribut yang mentakrifkan nilai animasi
Atribut ini mentakrifkan nilai atribut yang dianimasikan. Malah, ia mentakrifkan beberapa algoritma untuk bingkai utama dan interpolasi.
calcMode = "discrete | linear (nilai lalai) | paced | spline"
mentakrifkan kaedah interpolasi animasi: diskret: diskret, tiada interpolasi; interpolasi linear; Lalai ialah linear (interpolasi linear), tetapi jika atribut tidak menyokong interpolasi linear, interpolasi diskret akan digunakan.
values ​​​​= ""
mentakrifkan senarai nilai yang dipisahkan koma bertitik untuk bingkai utama animasi. Sokong nilai vektor.
keyTimes = ""
Mentakrifkan senarai masa bingkai utama animasi yang dipisahkan koma bertitik. Ini sepadan dengan nilai satu dengan satu. Nilai ini dipengaruhi oleh algoritma interpolasi Jika ia adalah interpolasi linear dan spline, nilai pertama keyTimes mestilah 0 dan nilai terakhir mestilah 1. Untuk kaedah bukan interpolasi diskret, nilai pertama keyTimes mestilah 0. Untuk kaedah interpolasi langkah, adalah jelas bahawa keyTimes tidak diperlukan. Dan jika tempoh animasi ditetapkan kepada infiniti, keyTimes diabaikan.
keySlines = ""
Atribut ini mentakrifkan titik kawalan semasa interpolasi spline (interpolasi Bessel Jelas sekali, ia hanya berfungsi apabila mod interpolasi dipilih sebagai spline). Nilai dalam senarai ini berkisar antara 0 hingga 1.
dari = ""
kepada = ""
oleh = "" . Perhatikan di sini: jika nilai telah ditentukan, sebarang nilai dari/ke/oleh akan diabaikan.

Kategori 4: Sifat yang mengawal sama ada animasi adalah tambahan Kadangkala, ia sangat berguna jika nilai yang berkaitan tidak ditetapkan kepada nilai mutlak, tetapi kepada nilai tambahan, menggunakan Sifat tambahan boleh memenuhi tujuan ini.
additive = "replace(default value) | sum"
Atribut ini mengawal sama ada animasi adalah incremental. sum bermakna bahawa animasi akan menjadi lebih besar pada nilai atribut yang berkaitan atau animasi keutamaan rendah yang lain. replace ialah nilai lalai, yang bermaksud bahawa animasi akan menimpa nilai atribut berkaitan atau animasi keutamaan rendah yang lain. Lihat contoh kecil:

Salin kodKodnya adalah seperti berikut:

additive="sum"/> ;
< ;/rect>

Contoh ini menunjukkan kesan animasi peningkatan lebar segi empat tepat.
Kadang-kadang, ia juga sangat berguna jika hasil animasi berulang ditindih Ini boleh dicapai dengan menggunakan atribut terkumpul.
accumulate = "tiada (nilai lalai) | jumlah"
Atribut ini mengawal sama ada kesan animasi adalah terkumpul. Tiada nilai lalai, yang bermaksud animasi berulang tidak terkumpul. jumlah bermakna bahawa kesan animasi berulang adalah terkumpul. Untuk animasi pelaksanaan tunggal, sifat ini tidak mempunyai makna. Mari lihat contoh kecil:

Salin kodKodnya adalah seperti berikut:

additive="sum" accumulate ="sum" repeatCount= "5"/>

Contoh ini menunjukkan bahawa panjang segi empat tepat bertambah dengan setiap lelaran.
Ringkasan elemen animasi
SVG menyediakan elemen animasi berikut:
1 elemen animasi
Ini adalah elemen animasi paling asas dan boleh secara langsung digunakan untuk elemen animasi yang berkaitan memberikan nilai pada titik masa yang berbeza.
2. elemen set
Ini ialah singkatan elemen bernyawa dan menyokong semua jenis atribut, yang amat sesuai apabila menganimasikan atribut bukan angka (seperti keterlihatan). Elemen set adalah bukan incremental dan atribut yang berkaitan tidak mempunyai kesan ke atasnya. Jenis nilai akhir animasi yang ditentukan oleh kepada mesti mematuhi jenis nilai atribut.
3. Elemen animasi bergerak
Elemen animasi Lu Jin. Kebanyakan atribut elemen ini adalah sama seperti di atas, dengan hanya beberapa perbezaan berikut:
calcMode = "discrete | linear | paced | spline"
Nilai lalai atribut ini adalah berbeza elemen adalah pantas.
path = ""
Laluan di mana elemen animasi bergerak, formatnya konsisten dengan format nilai atribut d bagi elemen laluan.
keyPoints = ""
Nilai atribut ini ialah satu siri nilai titik terapung yang dipisahkan dengan koma bertitik, dan julat nilai setiap nilai ialah 0~1. Nilai ini mewakili jarak yang dipindahkan pada titik masa yang sepadan yang ditentukan oleh atribut keyTimes Jarak khusus di sini ditentukan oleh penyemak imbas itu sendiri.
putar = auto-terbalikkan"
Atribut ini menentukan sudut putaran apabila elemen bergerak. Nilai lalai ialah 0, nombor mewakili sudut putaran, dan auto bermaksud berputar dalam arah jalan. Auto-reverse bermaksud membelok ke arah yang bertentangan dengan arah yang bergerak. pasangan koordinat; nilai x dan nilai y dipisahkan dengan koma atau ruang Setiap pasangan koordinat dipisahkan dengan koma bertitik. 15.
Terdapat dua cara untuk menentukan laluan gerakan: satu ialah memberikan atribut laluan secara langsung, satu ialah menggunakan elemen mpath sebagai elemen anak animateMotionde. Jika kedua-dua kaedah digunakan, keutamaan menggunakan mpath elemen lebih tinggi daripada nilai, daripada, oleh, kepada 🎜>Lihat contoh kecil:

Salin kod Kodnya adalah seperti berikut:

< ?xml version="1.0" standalone="no"?>

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http:// www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/ 1999/xlink" >
fill="none" stroke="blue" stroke-width=" 2" />
fill="none" stroke="blue" stroke-width="7.06 "/>


M-25,-12.5 L25,-12.5 L 0,-87.5 z"
isi="kuning" stroke="red" stroke-width="7.06">

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



4. menghidupkan Elemen warna

elemen animasi warna. Ini adalah elemen lapuk Pada asasnya semua fungsi boleh digantikan dengan animasi, jadi jangan gunakannya lagi.

5. animateTransform elemen
Transform elemen animasi. Lihat beberapa atribut khas: type = "terjemah | skala | putar | skewX | skewY"
Atribut ini menentukan jenis transformasi, terjemah ialah nilai lalai.
Nilai dari, oleh dan kepada adalah parameter transformasi yang sepadan Ini konsisten dengan transformasi yang dinyatakan di atas. nilai ialah satu siri nilai yang dipisahkan oleh koma bertitik. Elemen dan atribut yang menyokong kesan animasiPada asasnya semua elemen grafik (laluan, rect, elips, teks, imej...), elemen kontena (svg, g, defs, use, switch, clipPath, mask. . .) semua animasi sokongan. Pada asasnya kebanyakan sifat menyokong kesan animasi. Sila rujuk kepada dokumentasi rasmi untuk arahan terperinci.

Gunakan DOM untuk melaksanakan animasi

Animasi SVG juga boleh dilengkapkan menggunakan skrip Butiran DOM akan diperkenalkan kemudian. Berikut ialah contoh mudah:



Salin kod

Kod adalah seperti berikut:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> ;
xmlns="http://www.w3.org/2000/svg"
onload=" StartAnimation(evt)" version="1.1">

fill="none" stroke="blue" stroke-width="2"/>

SVG

实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85 ).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/

SVG动画技术：http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx