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

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

: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