HTML5之SVG 2D入門11―用戶交互性(動畫)介紹及應用

2024-09-05 07:20:10

字體：大中小

來源：轉載

供稿：網友

交互性
SVG擁有良好的用戶交互性，例如：
1. SVG能響應大部分的DOM2事件。
2. SVG能通過cursor良好的捕捉用戶鼠標的移動。
3. 用戶可以很方便的通過設置svg元素的zoomAndPan屬性的值來實現縮放等效果。
4. 用戶可以很方便的把動畫和事件結合起來，完成一些復雜的效果。
通過給SVG元素掛接事件，我們可以使用腳本語言方便的完成一些交互任務。SVG支持大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll等事件。除了這些，SVG還提供了獨有的動畫相關的事件，比如：onroom,onbegin,onend,onrepeat等。
事件大家比較熟悉，就不多說了。

動畫的方式
SVG采用的是使用文本來定義圖形，這種文檔結構非常適合于創建動畫。要改變圖形的位置、大小和顏色，只需要調整相應的屬性就可以了。事實上，SVG有為各種事件處理而專門設計的屬性，甚至很多還是專門為動畫量身定做的。在SVG中，實現動畫可以有下面幾種方式：
1. 使用SVG的動畫元素。這個下面會重點介紹。
2. 使用腳本。采用DOM操作啟動和控制動畫，這個已經是一門成熟的技術了，后面有一個小例子。
3. SMIL(Synchronized Multimedia Integration Language)。這個有興趣的請參考：http://www.w3.org/TR/2008/REC-SMIL3-20081201/。
下面的例子包含了SVG中幾種最基本的動畫：

復制代碼

上一篇：HTML5之SVG 2D入門10―濾鏡的定義及使用

下一篇：HTML5之SVG 2D入門12―SVG DOM及DOM操作介紹