SVG中的動畫技術 1

2021-04-15 15:57:24 字數 4130 閱讀 8428

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

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也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有 1 利用svg提供的動畫元素實現 由於svg的內容可以定義成動態變化的,因此,利用svg提供的各種動畫元素,我們就可以得到各...

SVG中的動畫技術 1

svg中的動畫技術 1 動畫技術是網際網路中不可缺少的乙個重要組成部分,是吸引訪問者的重要手段之一,svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有 1 利用svg提供的動畫元素實現 由於svg的內容可以定義成動態變化的,因此,利用svg提供的各種動畫元素,我們就可以得到各...

SVG中的動畫技術

動畫技術是網際網路 中不可缺少的乙個重要組成部分,是吸引訪問者的重要手段之一,svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有 1 利用svg提供的動畫元素實現 由於svg的內容可以定義成動態變化的,因此,利用svg提供的各種動畫元素,我們就可以得到各種動畫效果,比如 沿某...