SVG中的動畫技術 1

svg中的動畫技術(1)

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

1）利用svg提供的動畫元素實現：由於svg的內容可以定義成動態變化的，因此，利用svg提供的各種動畫元素，我們就可以得到各種動畫效果，比如：沿某路徑運動、漸隱漸現、旋轉、縮放、改變顏色等。

2）使用svg dom：由於svg dom遵循dom1、dom2規範的大部分內容，因此，svg中的每個屬性和樣式都可以通過指令碼程式設計來訪問；另外，svg也提供了一套擴充套件的dom介面，讓通過指令碼程式設計實現動畫效果的手段更方便快捷。指令碼語言中的定時器可以很好地觸發和控制圖象的運動。

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

svg支援**il（synchronized ********** integration language）動畫規範中定義的下面的動畫元素：

animate：改變svg元素數值屬性的不同值

set：是animate的簡化，主要用來改變非數值屬性的屬性值，比如visibility屬性等

animatemotion：沿某運動路線移動svg元素

animatecolor：改變某些元素的顏色屬性值

svg對**il動畫的擴充套件元素和屬性有：

animatetransform：改變svg轉換的轉換屬性值

path屬性：改變animatemotion元素中path屬性的所有特性。

mpath元素：svg允許animatemotion元素包含mpath子元素，它能夠引用svg中path元素的路徑定義

rotate屬性：svg為animatemotion增加乙個rotate屬性，用來控制乙個物件是否自動進行旋轉。

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

本例子說明svg的動畫元素

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" />

font-family="宋體-18030" font-size="18" font-weight="bold" visibility="hidden" >

歡迎光臨！

hello,world!

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秒。以上**的效果如下圖所示：

下面解釋**中與動畫元素和屬性：

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

SVG中的動畫技術 1

SVG中的動畫技術 1

SVG中的動畫技術

相關推薦