SVG中的動畫技術(1) (轉)[@more@]SVG中的動畫技術(1)

動畫技術是網際網路中不可缺少的一個重要組成部分，是吸引訪問者的重要手段之一，SVG也同樣有能力隨時改變向量圖象外在表現的能力。SVG中生成動畫的方式有：

1）利用SVG提供的動畫元素實現：由於SVG的內容可以定義成動態變化的，因此，利用SVG提供的各種動畫元素，我們就可以得到各種動畫效果，比如：沿某路徑運動、漸隱漸現、旋轉、縮放、改變顏色等。
2）使用SVG ：由於SVG DOM遵循DOM1、DOM2規範的大部分內容，因此，SVG中的每個屬性和樣式都可以透過指令碼來訪問；另外，SVG也提供了一套擴充套件的DOM介面，讓透過指令碼程式設計實現動畫效果的手段更方便快捷。指令碼語言中的定時器可以很好地觸發和控制圖象的運動。

SVG的動畫元素標準的指定者與SYMM（Synchronized Multimedia）工作組合作，共同編寫了SMIL動畫規範，這個規範描繪了文件結構中使用的通用的動畫特徵集。SVG不但實現了SMIL的動畫規範，同時也提供了一些SVG的特殊擴充套件。SVG定義了比SMIL動畫更為嚴格的錯誤處理，當文件中有任何錯誤產生時，動畫都將會停止。

SVG支援SMIL（Synchronized Multimedia Integration Language）動畫規範中定義的下面的動畫元素：

animate：改變SVG元素數值屬性的不同值
set：是animate的簡化，主要用來改變非數值屬性的屬性值，比如visibility屬性等
animateMotion：沿某運動路線移動SVG元素
animateColor：改變某些元素的顏色屬性值
SVG對SMIL動畫的擴充套件元素和屬性有：
animateTranorm：改變SVG轉換的轉換屬性值
path屬性：改變animateMotion元素中path屬性的所有特性。
mpath元素：SVG允許animateMotion元素包含mpath子元素，它能夠引用SVG中path元素的路徑定義
rotate屬性：SVG為animateMotion增加一個rotate屬性，用來控制一個是否自動進行旋轉。

下面透過一個簡單的例子，來看一看SVG是如何實現動畫效果的：

BR>"">

本例子說明SVG的動畫元素

<!-- 下面定義漸變效果 --&gt

<!-- 下面程式碼說明了如何使用animate元素來使圓產生動畫效果，同時改變圓心的位置和半徑的大小 --&gt
fill="rgb(255,0,0)" style="fill: url(#grad1);">
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="250" />
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="150" to="152" />
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="150" />

<!-- 建立一個新的座標，並使文字旋轉和放大 --&gt

<!-- 下面的程式碼定義了“Hello,World！”這段文字，說明了'set','animateMotion',
'animateColor'和'animateTransform'元素的用法。 --&gt
font-family="宋體-18030" font-size="18" font-weight="bold" visibility="hidden" >
歡迎光臨！
Hello,World!
begin="4s" dur="6s" fill="freeze" />
begin="4s" dur="6s" fill="freeze" />
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="4s" dur="6s" fill="freeze" />
type="rotate" from="-90" to="0"
begin="4s" dur="6s" fill="freeze" />
type="scale" from="1" to="3" additive="sum"
begin="4s" dur="6s" fill="freeze" />

歡迎光臨【孟憲會之精彩世界】

上面例子中，我們可以看到，一個帶漸變顏色填充的圓，位置逐漸向右下方移動，圓心位置從(50,150)移動到（250,152），同時，半徑也由50增大到150；文字“Hello,World!”在4秒時開始出現（可視性visibility由hidden變成了visible）,並開始向圓中心方向移動，顏色從#0000FF逐漸變成了#800000，文字方向由-90度逐漸變成0度，文字大小逐漸變化到原來的3倍；文字的變化共持續了6秒。以上程式碼的效果如下圖所示：

<embed>

下面解釋程式碼中與動畫元素和屬性：

animate:是動畫元素，定義要進行變化的各種屬性。
xlink:href：指定要進行動畫的元素名稱，是一個uri地址。要進行動畫的元素必須是當前SVG文件中出現的元素，uri必須指定一個具有動畫能力的元素，如果指定的元素不止一個，或者指定的元素沒有進行動畫的能力，則會產生錯誤；如果沒有uri屬性的話，要進行動畫的元素就是當前動畫元素的最接近的父元素。
attributeName：指定要進行動畫變化的屬性名稱，可根據實際情況帶上XML的名稱空間。
attributeType：指定要變化的屬性和屬性值在什麼名稱空間裡定義。可有三種選擇之一：CSS、XML、auto。“CSS”指定attributeName的值是CSS屬性的名字；“XML”指定attributeName的值是預設XML名稱空間裡定義的XML屬性名；“auto”是預設值，首先搜尋CSS屬性列表看能否匹配attributeName，如果不能找到匹配的值，則尋找該元素的預設XML名稱空間
begin：指定元素何時進行動畫。可以取的值有： offset-value、syncbase-value、event-value、repeat-value、accessKey-value、wallclock-sync-value、"indefinite" ，offset-value是相對於文件開始的時間，不能為負值；syncbase-value是相對於另外動畫元素的同步時間，必須包含另外元素的id值；event-value是由事件觸發；repeat-value是重複事件，元素動畫開始時間是相對於重複事件觸發的時間；accessKey-value是指相對於的鍵盤輸入的時間；
wallclock-sync-value是現實世界中的時間；indefinite是由beginElement()的或被連結到該元素決定是否開始動畫。該屬性如果同時選擇多個值的話，要以分號“;”隔開。
dur：指定動畫的持續時間。可以取下面三者之一：大於0的數值、media和indefinite。該屬性值預設為indefinite，即無限長。
end：指定動畫結束的時間。與begin的取值方法類似。
fill：指動畫後的填充狀態。取下面二者之一：remove和freeze。remove表示不保留動畫結束時的狀態；freeze表示保留動畫結束時的狀態。預設為remove。
from：指定動畫開始時的屬性值。
to：指定動畫結束時的屬性值。
additive：指定動畫是否是在原來的基礎上進行的。取sum和replace二者之一，預設為replace。
accumulate：指定動畫是否是在前一次動畫的基礎上進行累加的。取sum和none二者之一，預設為none。

關於additive和accumulate兩個屬性的意義，我們可以透過改變下面例子中的不同值來領會。

x2="100%" y2="100%" gradientUnits="userSpace">

fill="freeze" dur="10s" attributeType="XML"
additive="sum"
accumulate="none" repeatCount="5"/>

另外，還有min（動畫持續的最小時間）、max（動畫持續的最大時間）、restart（動畫重新開始的時間，取always、whenNotActive和never之一）、repeatCount（動畫重複的時間）和repeatDur（所有重複的持續時間）。時間的格式可以是02:10:13、20:10:10.25、10.5s、00:00.005、12.467、5ms、3.2h等，但裡面不能包含空格，頭尾有空格時將被忽略。

SVG中的動畫技術(1) (轉)

相關文章