svg中的動畫技術(1)
動畫技術是網際網路中不可缺少的乙個重要組成部分，是吸引訪問者的重要手段之一，svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有：
1）利用svg提供的動畫元素實現：由於svg的內容可以定義成動態變化的，因此，利用svg提供的各種動畫元素，我們就可以得到各種動畫效果，比如：沿某路徑運動、漸隱漸現、旋轉、縮放、改變顏色等。svg的動畫元素標準的指定者與symm（synchronized **********）工作組合作，共同編寫了smil動畫規範，這個規範描繪了xml文件結構中使用的通用的動畫特徵集。svg不但實現了smil的動畫規範，同時也提供了一些svg的特殊擴充套件。svg定義了比smil動畫更為嚴格的錯誤處理程式，當文件中有任何錯誤產生時，動畫都將會停止。2）使用svg dom：由於svg dom遵循dom1、dom2規範的大部分內容，因此，svg中的每個屬性和樣式都可以通過指令碼程式設計來訪問；另外，svg也提供了一套擴充套件的dom介面，讓通過指令碼程式設計實現動畫效果的手段更方便快捷。指令碼語言中的定時器可以很好地觸發和控制圖象的運動。
svg支援smil（synchronized ********** integration language）動畫規範中定義的下面的動畫元素：
animate：改變svg元素數值屬性的不同值下面通過乙個簡單的例子，來看一看svg是如何實現動畫效果的：set：是animate的簡化，主要用來改變非數值屬性的屬性值，比如visibility屬性等
animatemotion：沿某運動路線移動svg元素
animatecolor：改變某些元素的顏色屬性值
svg對smil動畫的擴充套件元素和屬性有：
animatetransform：改變svg轉換的轉換屬性值
path屬性：改變animatemotion元素中path屬性的所有特性。
mpath元素：svg允許animatemotion元素包含mpath子元素，它能夠引用svg中path元素的路徑定義
rotate屬性：svg為animatemotion增加乙個rotate屬性，用來控制乙個物件是否自動進行旋轉。
xml **上面例子中，我們可以看到，乙個帶漸變顏色填充的圓，位置逐漸向右下方移動，圓心位置從(50,150)移動到（250,152），同時，半徑也由50增大到150；文字「hello,world!」在4秒時開始出現（可視性visibility由hidden變成了visible）,並開始向圓中心方向移動，顏色從#0000ff逐漸變成了#800000，文字方向由-90度逐漸變成0度，文字大小逐漸變化到原來的3倍；文字的變化共持續了6秒。以上**的效果如下圖所示：xmlversion="1.0"
encoding="utf-16"
standalone="no"
?>
"">
<
svgwidth="500"
height="400"
xmlns=""
>
<
desc
>本例子說明svg的動畫元素desc
>
<
defs
>
<
lineargradient
id="grad1"
x1="0"
y1="0"
x2="0"
y2="100%"
>
<
stop
offset="0%"
style="stop-color: #88f;"
/>
<
stop
offset="100%"
style="stop-color: #008;"
/>
lineargradient
>
defs
>
<
circle
id="rectelement"
cx="50"
cy="50"
r="50"
fill="rgb(255,0,0)"
style="fill: url(#grad1);"
>
<
animate
attributename="cx"
attributetype="xml"
xlink:href="#rectelement"
begin="0s"
dur="9s"
fill="freeze"
from="50"
to="250"
/>
<
animate
attributename="cy"
attributetype="xml"
xlink:href="#rectelement"
begin="0s"
dur="9s"
fill="freeze"
from="150"
to="152"
/>
<
animate
attributename="r"
attributetype="xml"
xlink:href="#rectelement"
begin="0s"
dur="9s"
fill="freeze"
from="50"
to="150"
/>
circle
>
<
gtransform="translate(50,50)"
>
'animatecolor'和'animatetransform'元素的用法。 -->
<
text
id="textelement"
x="0"
y="0"
font-family="宋體-18030"
font-size="18"
font-weight="bold"
visibility="hidden"
>
歡迎光臨！
<
tspan
dx="-100"
dy="20"
>hello,world!tspan
>
<
setattributename="visibility"
attributetype="css"
to="visible"
begin="4s"
dur="6s"
fill="freeze"
/>
<
animatemotion
path="m 0 20 l 50 120"
begin="4s"
dur="6s"
fill="freeze"
/>
<
animatecolor
attributename="fill"
attributetype="css"
from="rgb(0,0,255)"
to="rgb(128,0,0)"
begin="4s"
dur="6s"
fill="freeze"
/>
<
animatetransform
attributename="transform"
attributetype="xml"
type="rotate"
from="-90"
to="0"
begin="4s"
dur="6s"
fill="freeze"
/>
<
animatetransform
attributename="transform"
attributetype="xml"
type="scale"
from="1"
to="3"
additive="sum"
begin="4s"
dur="6s"
fill="freeze"
/>
text
>
<
text
x="92"
y="275"
style="font-size:16pt;font-weight:bold"
>歡迎光臨【孟憲會之精彩世界】text
>
<
text
x="105"
y="295"
style="font-size:16pt;font-weight:bold"
>
>
g>
svg>
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提供的各種動畫元素，我們就可以得到各種動畫效果，比如 沿某...