SVG SMIL animation動畫詳解

一、SVG SMIL animation概覽

1. SMIL是什么？

SMIL不是指「水蜜梨」，而是Synchronized Multimedia Integration Language（同步多媒體集成語言）的首字母縮寫簡稱，是有標准的。本文所要介紹的SVG動畫就是基於這種語言。

SMIL允許你做下面這些事情：

• 動畫元素的數值屬性（X, Y, …）
• 動畫屬性變換（平移或旋轉）
• 動畫顏色屬性
• 沿着運動路徑運動

注意到“沿着運動路徑運動”這一條沒？前面的三條CSS3都是可以有所擔當的，最后這一條，呵呵，CSS3只能蹲在牆角畫圈圈了！

2. 強大之處是？

除了可以實現「路徑動畫」，SVG animation最強大的地方在於：只要在頁面放幾個animate元素，沒有任何CSS, 沒有任何JS，頁面上的元素就像是沒吃草的馬兒一樣，愉快地跑起來了。

唷，不信？給你個馬，看它跑不跑！

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬</text>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
  </g>
</svg>

二、SVG animation元素及效果概覽

5大元素，1統江湖。

1. <set>
2. <animate>
3. <animateColor>
4. <animateTransform>
5. <animateMotion>

這5個元素猶如籃球場上的5名隊員，分別實現不同類別的動畫。

1. set

set意思設置，此元素沒有動畫效果。你可能會疑問了，既然這個元素沒有動畫效果，怎么會是animation五大天團成員之一呢？

雖然set雖然不能觸發連續的動畫，但是，其還是可以實現基本的延遲功能。就是指：可以在特定時間之后修改某個屬性值（也可以是CSS屬性值）。

舉個例子，下面這個「馬」會在3秒之后從橫坐標160的位置移動60這個位置。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      馬
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

這里出現了attributeName, attributeType等屬性。其含義有些顧名即可思意，有些需要點撥，這些屬性后面會統一講解。

2. animate

基礎動畫元素。實現單屬性的動畫過渡效果。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    馬
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>

這里除了新增from, dur這兩個通俗易懂的屬性外，還蹦出了個repeatCount屬性，同上，含義會后面統一講解。

 3. animateColor
一看就知道是顏色動畫。不過，animate可以實現其功能與效果，因此，此屬性已經被廢棄。可謂因為兄弟相爭而年少隕落的天王。逝者已矣，過去的就讓它過去吧~~

 4. animateTransform
此元素就是一開始給大家開眼界用到的那個元素。一看就知道實現transform變換動畫效果的。知識是一脈相承的，這里的transform變換與CSS3的transform變換，以及Snap.svg.js中的transform()方法都是一個路數。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">馬</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>

5. animateMotion
animateMotion元素可以讓SVG各種圖形沿着特定的path路徑運動~

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">馬
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

不過上面這個馬走得有點假，怎么馬兒一直都是水平的啊，這不符合物理學定律，是不科學的。我們可以小小處理下，讓表現更真實：

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">馬
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

6. 自由組合
實際制作時候的動畫，不可能總是一個屬性修改。比方說，位置和透明度同時變化，怎么辦呢？So easy! 直接組合就好了。

 

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

OK, 至此，體驗SVG animation動畫效果的旅程就結束了。下面進入參數詳解篇。

三、SVG animation參數詳解

1. attributeName = <attributeName>
要變化的元素屬性名稱，① 可以是元素直接暴露的屬性，例如，對於本文反復出現的「馬」對應的text元素上的x, y或者font-size; ② 可以是CSS屬性。例如，透明度opacity.

2. attributeType = “CSS | XML | auto”
attributeType支持三個固定參數，CSS/XML/auto. 用來表明attributeName屬性值的列表。x, y以及transform就屬於XML, opacity就屬於CSS. auto為默認值，自動判別的意思（實際上是先當成CSS處理，如果發現不認識，直接XML類別處理）。因此，如果你不確信某屬性是XML類別還是CSS類別的時候，我的建議是不設置attributeType值，直接讓瀏覽器自己去判斷，幾乎無差錯。

不知大家有沒有和我一樣的疑問：“既然瀏覽器醬可以自己判斷屬性類別，那這個屬性還有什么意義嗎？”我琢磨着，可能某些屬性，XML能起作用，CSS也能起作用，例如font-size, 此時就需要明確下歸屬。

3. from, to, by, values
上面4個屬性是一個家族的，是最具哲理的一個家族。他們解決的是非常有哲理的問題：你從哪里來？要到哪里去？……

from  = “<value>“

動畫的起始值。

to  = “<value>“

指定動畫的結束值。

by  = “<value>“

動畫的相對變化值。

values  = “<list>“

用分號分隔的一個或多個值，可以看成是動畫的多個關鍵值點。

 from, to, by, values雖然屬於一個家族，但是相互之間還是有制約關系的。有以下一些規則：

a. 如果動畫的起始值與元素的默認值是一樣的，from參數可以省略。

b. （不考慮values）to,by兩個參數至少需要有一個出現。否則動畫效果沒有。to表示絕對值，by表示相對值。拿位移距離，如果from是100, to值為160則表示移動到160這個位置，但是，如果by值是160，則表示移動到100+160=260這個位置。

c. 如果to,by同時出現，則by打醬油，只識別to.

d. 如果to,by,values都沒設置，自然沒動畫效果。如果任意（包括from）一個屬性的值不合法，規范上說是沒有動畫效果。但是，據我測試，FireFox瀏覽器確實如此，但是Chrome特意做了寫容錯處理。例如，本來是數值的屬性，寫了個諸如a這個不合法的值，其會當作0來處理，動畫效果依然存在。

e. values可以是一個值或多值。根據我在Chrome瀏覽器下的測試，是一個值的時候是沒有動畫效果。多值時候有動畫效果。當values值設置並能識別時候，from, to, by的值都會被忽略。那values屬性是干什么的呢？別看名字挺大眾的，其還是有些功力的。我們實現動畫，不可能就是單純的從a位置到b位置，有時候，需要去c位置過渡下。此時，實際上有3個動畫關鍵點。而from, to/by只能駕馭兩個，此時就是values大顯身手的時候了！

總結下，也就是from-to動畫、from-by動畫、to動畫、by動畫以及values動畫。

4. begin, end
begin指動畫開始的時間，看上去很簡單。設個時間，延遲嘛~~實際上非也非也，上面出現的beigin="3s"只是最簡單最基本的表示。

begin的定義是分號分隔的一組值。看到沒？是一組值，單值只是其中的情況之一。例如，beigin="3s;5s"表示的是3s之后動畫走一下，6s時候動畫再走一下（如果之前動畫沒走完，會立即停止從頭開始）。所以，如果一次動畫時間為3s, 即dur="3s"，同時沒有repeatCount屬性時候，我們可以看到動畫似乎連續執行了2次。

begin的單值除了普通value，還有下面這些類別的value：

offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

 

① offset-value表示偏移值，數值前面有+或-. 應該指相對於document的begin值而言。
② syncbase-value基於同步確定的值。語法為：[元素的id].begin/end +/- 時間值. 就是說借用其他元素的begin值再加加減減，這個可以准確實現兩個獨立元素的動畫級聯效果。OK，看完下面的例子一定會豁然開朗，對於上面的offset-value也會有一定的認知。

這樣的代碼：

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬
        <animate id="x" attributeName="x" to="60" begin="0s" dur="3s" fill="freeze" />
        <animate attributeName="y" to="100" begin="x.end" dur="3s" fill="freeze" />
    </text>
</svg>

於是，實現了一個馬兒折線跑的效果，先橫向移動，再無縫縱向移動。

begin="x.end"意思就是，當id為x的元素動畫結束的時候，我執行動畫。非常類似於PowerPoint動畫的“上一個動畫之后”的選項。

當然，我們還可以增加一些偏移值，例如begin="x.end-1s", 就表示id為x的元素動畫結束前一秒開始縱向移動。

③ event-value這個表示與事件相關聯的值。類似於PowerPoint動畫的“點擊執行該動畫”。語法是：[元素的id].[事件類型] +/- 時間值.

<svg id="svg" width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" cx="100" cy="100" r="50"></circle>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬
        <animate attributeName="x" to="60" begin="circle.click" dur="3s" />
    </text>
</svg>

也可以加上偏移值begin="circle.click+2s".即點擊后2s開始執行動畫。

④ repeat-value指重復多少次之后干嘛干嘛。語法為：[元素的id].repeat(整數) +/- 時間值. 舉個例子，下面這個馬兒會在水平運動2次之后，斜向運動。

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬
        <animate id="x" attributeName="x" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="y" to="100" begin="x.repeat(2)" dur="3s" fill="freeze" />
    </text>
</svg>

begin="x.repeat(2)"指id為x的元素的動畫重復2次后執行。

⑤ accessKey-value定義快捷鍵。即按下某個按鍵動畫開始。語法為：accessKey(" character "). character表示快捷鍵所在的字符，舉個例子

begin="accessKey(s)"，表示按下s鍵后執行動畫。

5. dur
dur屬性值比begin簡單了好幾層樓，就后面兩種：常規時間值 | "indefinite".

“常規時間值”就是3s之類的正常值；"indefinite"指事件無限。試想下，動畫時間無限，實際上就是動畫壓根不執行的意思。因此，設置為"indefinite"跟沒有dur是一個意思，與dur解析異常一個意思。

 

文章出處：http://www.zhangxinxu.com/wordpress/?p=4333