超級強大的SVG SMIL animation動畫詳解

原創 qq_21700537 2018-09-01 06:27

超級強大的SVG SMIL animation動畫詳解

這篇文章發佈於 2014年08月31日，星期日，03:07，歸類於 SVG相關。 閱讀 163808 次, 今日 117 次

更新於2017-02-24
拒有些資料顯示，Chrome 45 & Opera 32版本之後 SMIL會在控制檯console會有警告（雖然本人沒有看到），以後有可能不支持的風險。我覺得應該是打算靠CSS來撐場子，因爲很巧的是，Chrome 46和Opera 33正好開始支持CSS Motion Path了，真是心機瀏覽器。

//zxx: 本文的SVG在有緩存時候是無動畫效果，此時您可以試着【右鍵-新標籤頁打開圖片】。

一、SVG SMIL animation概覽

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

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

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

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

SVG的動畫元素是和SMIL開發組合作開發的。SMIL開發組和SVG開發組合作開發了SMIL動畫規範，在規範中制定了一個基本的XML動畫特徵集合。SVG吸收了SMIL動畫規範當中的動畫優點，並提供了一些SVG繼承實現。

2. 強大之處是？
除了可以實現「路徑動畫」，SVG animation最強大的地方在於：™只要在頁面放幾個animate元素，沒有任何CSS, 沒有任何JS，頁面上的元素就像是沒吃草的馬兒一樣，愉快地跑起來了。你會發現，我勒個去，原來要實現個動畫效果這麼簡單。什麼CSS3動畫，哪邊涼快哪邊呆着吧！

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

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

旋轉木馬

如何？是不是看到了童年夢幻的旋轉木馬效果？ 納尼？你沒看到。請檢查您現在使用的瀏覽器，IE瀏覽器(包括IE11)是不支持的哦，親~

SVG SMIL animation的瀏覽器支持表

如果不是瀏覽器原因，那就是緩存作祟，可以點擊這裏瀏覽器訪問：horse.svg。

二、SVG animation元素及效果概覽

5大元素，1統江湖。

5大受損 一個對策

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

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

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

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

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

3秒後會移動的馬

如果您確信您的瀏覽器夠堅挺，同時沒看到馬兒突然的位移效果（緩存），您可以狠狠地點擊這裏：horse-set.svg

直接在瀏覽器中打開SVG一睹真容吧~~

相關代碼如下：

<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
基礎動畫元素。實現單屬性的動畫過渡效果。類似Snap.svg的animate()方法支持的動畫效果。

下面這個馬兒奔跑的效果就是使用的animate元素（沒有動畫效果點這裏horse-animate.svg）：
不停奔跑的馬

代碼如下：

<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()方法都是一個路數。

爲避免效果重複，現在附上一個快速長大的馬的效果（沒有效果點這裏horse-scale.svg）：
快速長大的馬

SVG代碼爲：

<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路徑運動~

先來感受一匹走山路的馬的英姿（沒有效果點這裏horse-motion.svg）：
走山路的馬

SVG code as follow:

<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代碼相比，少個組標籤g元素。無妨。只要動畫元素是圖形元素子元素就可以。後面的path元素與動畫效果無關，只是爲了讓大家看清楚路徑軌跡線條。關於path的一系列參數值，可以參考我之前的文章：“深度掌握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" 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>

走山路的馬

哈，這樣纔有爬坡的感覺嘛（沒有效果點這裏horse-motion-rotate.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>

實現的是馬兒入山影無蹤的意境（沒有效果點這裏horse-combine.svg）：
馬兒入山影無蹤

OK, 至此，體驗SVG animation動畫效果的旅程就結束了。如果您單純就是來感受感受開闊下眼界，下面的文字內容可以快速掠過了。如果您是要深入學習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大顯身手的時候了！例如下面這個聰明的馬兒來回跑的效果（沒有效果點這裏horse-values.svg）：
馬兒來回跑

相關SVG代碼如下：

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="150" x="160">
        馬
        <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

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

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

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

時間值
既然這裏提到了時間，就順勢講簡單一下SVG animation中的時間表示(也適用於dur, end屬性)。常見單位有 "h"|"min"|"s"|"ms"

時間值支持的格式和規則相當複雜，例如我我規範上看到這個：1997-07-16T19:20:30.45+01:00. 以及洋洋灑灑N多看不懂的示意。尼瑪，這個要通透我週末釣魚時間都沒了，關鍵是沒有必要。所以，我們還是瞭解下最常見的基本使用。

上面的單位含義都是英文單位的縮寫。例如h表示小時(hour).

時間值支持小數寫法，因此，90s我們也可以使用1.5miu表示。時間值還支持hh:mm:ss這種寫法，因此，90s我們也可以使用01:30表示。

還有一點，十進制的小數值是秒的浮點定義。什麼意思呢？就是如果begin="1.5"沒有單位，這裏的小數點表示秒，也就是1.5s的意思。所以，上面N次出現的beigin="3s"也可以簡寫作beigin="3". 我測了下，FireFox和Chrome瀏覽器都是支持的。

begin的單值除了普通value，還有下面這些類別的value：
offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

① offset-value表示偏移值，數值前面有+或-. 應該指相對於documentdocument的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>

於是，實現了一個馬兒折線跑的效果，先橫向移動，再無縫縱向移動（沒有效果點這裏horse-animate-x-y.svg）。
馬兒折線跑

如果您發現沒有效果，可以狠狠地點擊這裏直接在瀏覽器中顯示SVG：horse-animate-x-y.svg

可以看到，後面attributeName爲y的元素的begin值是x.end. x.end中的x就是上面一個animate元素的id值，而end是動畫元素都有的一個屬性，動畫結束的時間。因此，begin="x.end"意思就是，當id爲x的元素動畫結束的時候，我執行動畫。非常類似於PowerPoint動畫的“上一個動畫之後”的選項。

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

③ event-value這個表示與事件相關聯的值。類似於PowerPoint動畫的“點擊執行該動畫”。語法是：[元素的id].[事件類型] +/- 時間值. 舉個例子，點擊下圖的圓圈圈，馬兒它就會自己跑！

馬

SVG代碼如下：

<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", 其中circle爲circle元素（黑色圓）的id, click表示點擊事件。含義一目瞭然，如果你想點擊圓圈圈2秒鐘後馬兒才跑，很簡單，偏移時間加上就可以了——begin="circle.click+2s".

主要注意的是，這類與事件關聯的SVG需要內聯在頁面中，否則click什麼的都是徒勞。

④ repeat-value指重複多少次之後幹嘛幹嘛。語法爲：[元素的id].repeat(整數) +/- 時間值. 舉個例子，下面這個馬兒會在水平運動2次之後，斜向運動（沒有效果點這裏horse-repeat-value.svg）……
馬兒跑了2次後變向

SVG代碼如下：

<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表示快捷鍵所在的字符，舉個例子，按下s鍵動畫走起。SVG代碼如下：

<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" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

SVG實時顯示如下：
馬

按下鍵盤上的字母"s", 理論上動畫就會執行。但是，據我測試，我的Chrome瀏覽器（版本36）上是沒有效果的，FireFox瀏覽器效果槓槓的！所以，如果您的瀏覽器沒有效果，但是手上有火狐，可以複製下面這個地址去FireFox瀏覽器下感受下：http://www.zhangxinxu.com/study/201408/horse-accesskey-value.svg

⑥ wallclock-sync-value指真實世界的時鐘時間定義。時間語法是基於在ISO8601中定義的語法。例如上面提到的1997-07-16T19:20:30.45+01:00這個讓人呵呵呵的時間表示。

⑦ "indefinite"就是這個字符串值，表示“無限等待”。據說需要beginElement()方法觸發或者指向該動畫元素的超鏈接(SVG中的a元素)。
下面代碼是beginElement()方法觸發的例子：

<svg id="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" to="60" begin="indefinite" dur="3s" />
    </text>
</svg>
var animate = document.getElementsByTagName("animate")[0];
if (animate) {
    document.getElementById("svg").onclick = function() {
        animate.beginElement();
    };
}

上面是HTML代碼，下面是JS代碼。意思很簡單，點擊我們的svg, 觸發animate元素的beginElement()方法，前提是begin="indefinite". 由於牽扯JS, 文章頁拘謹了，您可以狠狠地點擊這裏：beginElement()方法觸發SVG動畫demo

超鏈接觸發的例子參見下面：
馬點擊我

SVG代碼如下：

<svg width="320" height="200" font-family="microsoft yahei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <text font-size="120" y="160" x="160">馬
          <animate id="animate" attributeName="x" to="60" begin="indefinite" dur="3s" repeatCount="indefinite" />
     </text>
     <a xlink:href="#animate">
          <text x="10" y="20" fill="#cd0000" font-size="30">點擊我</text>
     </a>
</svg>

從上面代碼可以看出，動畫觸發條件很簡單，只要a元素的xlink:href指向的我們的動畫元素就可以了。

如果上面SVG沒效果，可以試試點擊這裏直接瀏覽器中訪問：horse-begin-link.svg

最後，搞一段規範上出現的一段文字：

If no begin is specified, the default value is “0” – the animation begins when the document begins. If there is any error in the argument value syntax for begin, the default value for begin will be used.

意思是，沒有begin或者begin參數解析異常，都當作0處理。

說到現在基本上都是begin屬性，實際上end與begin除了名字和字面含義不一樣，其值的種類與表意都是一模一樣的，我這裏就不重複囉嗦了。

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

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

6. calcMode, keyTimes, keySplines
這幾個參數是控制動畫先快還是先慢類似這樣作用的。

calcMode屬性支持4個值：discrete | linear | paced | spline. 中文意思分別是：“離散”|“線性”|“踏步”|“樣條”。

discrete
from值直接跳到to值。
linear
animateMotion元素以外元素的calcMode默認值。動畫從頭到尾的速率都是一致的。
paced
通過插值讓動畫的變化步調平穩均勻。僅支持線性數值區域內的值，這樣點之間“距離”的概念才能被計算（如position, width, height等）。如果”paced“指定，任何keyTimes或keySplines值都會打醬油。
spline
插值定義貝塞爾曲線。spline點的定義在keyTimes屬性中，每個時間間隔控制點由keySplines定義。

keyTimes = “<list>”
跟上面提到的<list>類似，都是分號分隔一組值。keyTimes總名字上看是關鍵時間點的意思，大致就是這個意思。前面提到過values也是多值，這裏有一些約定的規則：首先，keyTimes值的數目要和values一致，如果是from/to/by動畫，keyTimes就必須有兩個值。然後對於linear和spline動畫，第一個數字要是0, 最後一個是1。 最後，每個連續的時間值必須比它前面的值大或者相等。

paced模式下，keyTimes會被忽略；keyTimes定義錯誤，也會被忽略；dur爲indefinite也會被忽略。

keySplines = “<list>”
keySplines表示的是與keyTimes相關聯的一組貝塞爾控制點（默認0 0 1 1）。每個控制點使用4個浮點值表示：x1 y1 x2 y2. 只有模式是spline時候這個參數纔有用，也是分號分隔，值範圍0~1，總是比keyTimes少一個值。

如果keySplines值不合法或個數不對，是沒有動畫效果的。

叨叨這麼多，規範的術語還真是拗口，不急，我們先感受例子，然後再給大家通俗解釋：
如下4個SVG，只展示重要部分代碼：

<animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
<animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="paced"/>
<animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
<animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" />

其效果爲……您可以狠狠地點擊這裏：calcMode, keyTimes, keySplines屬性demo

可以看到到4匹馬上半途中你追我趕的經常場面：
四架馬車截圖

  Example keySplines01 - keySplines of 0 0 1 1 (the default)keySplines=”0 0 1 1″
(the default)		   Example keySplines02 - keySplines of .5 0 .5 1keySplines=”.5 0 .5 1″
 
  Example keySplines03 - keySplines of 0 .75 .25 1keySplines=”0 .75 .25 1″   Example keySplines04 - keySplines of 1 0 .25 .25keySplines=”1 0 .25 .25″

拿最後一個SVG說事吧，實際上就是values, keyTimes, keySplines三個人之間事情。values確定動畫的關鍵位置，keyTimes確定到這個關鍵點需要的時間，keySplines確定的是每個時間點段之間的貝塞爾曲線，也就是具體的緩動表現。我們平時CSS3寫的transition動畫效果，也是這麼回事，這是values值就兩個，所以，keyTimes只能是0;1, 貝塞爾曲線就只有一個，要不ease, 要不linear等。

7. repeatCount, repeatDur
repeatCount表示動畫執行次數，可以是合法數值或者”indefinite“（動畫循環到電腦死機）。

repeatDur定義重複動畫的總時間。可以是普通時間值或者”indefinite（”動畫循環到電腦死機）。

例如這個：

<animate attributeName="x" to="60" dur="3s" repeatCount="indefinite" repeatDur="10s" />

動畫只玩執行完整3個 + 一個1/3個動畫。因爲repeat總時間就10s而已。

8. fill
fill表示動畫間隙的填充方式。支持參數有：freeze | remove. 其中remove是默認值，表示動畫結束直接回到開始的地方。freeze“凍結”表示動畫結束後像是被凍住了，元素保持了動畫結束之後的狀態。

9. accumulate, additive
accumulate是累積的意思。支持參數有：none | sum. 默認值是none. 如果值是sum表示動畫結束時候的位置作爲下次動畫的起始位置。

additive控制動畫是否附加。支持參數有：replace | sum. 默認值是replace. 如果值是sum表示動畫的基礎知識會附加到其他低優先級的動畫上，

舉兩個例子，下面是例子1：

<img ...>
   <animateMotion begin="0" dur="5s" path="[some path]" additive="sum" fill="freeze" />
   <animateMotion begin="5s" dur="5s" path="[some path]" additive="sum" fill="freeze" />
   <animateMotion begin="10s" dur="5s" path="[some path]" additive="sum" fill="freeze" />
</img>

這裏輪到第二個動畫的時候，路徑是從第一個動畫路徑結束地方開始的，於是，3個動畫完美無縫連接起來了。

例子2：

<animateTransform attributeName="transform" type="scale" from="1" to="3" dur="10s" repeatCount="indefinite" additive="sum"/>
<animateTransform attributeName="transform" type="rotate" from="0 30 20" to="360 30 20" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>;

這裏，兩個動畫同時都是transform，都要使用一個type屬性，好在這個例子additive="sum"是累加的而不是replace替換。於是，我們就可以是實現一邊旋轉一邊放大的效果（沒有效果點這裏horse-animate-sum.svg）。

旋轉放大木馬

10. restart
restart這個屬性誕生的背景如下：很多動畫呢，其觸發可能與事件相關，例如，點擊某圓圈，馬兒就跑。而且，似乎沒點一次，馬兒就跑一下。現在，存在這種情況，希望馬兒只跑一次，之後在點擊就沒有反應。這種需求的出現迫使restart參數的出現。支持的參數有：always | whenNotActive | never.

always是默認值，表示總是，也就是點一次圈圈，馬兒跑一下。whenNotActive表示動畫正在進行的時候，是不能重啓動畫的。never表示動畫是一波流。

很好理解的參數，就不舉例了。

11. min, max
min/max表示動畫執行最短和最長時間。支持參數爲時間值和"media"（媒介元素有效）, max還支持indefinite.

12. ...
等其他遺漏參數。

四、動畫的暫停與播放(補充於2015-10-08)

今天有同事詢問如何暫停動畫。是醬樣子的，SVG animation中是有內置的API可以暫停和啓動動畫的。語法爲：

// svg指當前svg DOM元素
// 暫停
svg.pauseAnimations();

// 重啓動
svg.unpauseAnimations()

例如下面這個馬兒，點擊就會暫停，再點就會重新運動。
馬

五、寫在深夜的結束語

SVG SMIL animation動畫相關資料很少，尤其對各個屬性的解釋、示例內容幾乎沒有。所以呢，本文一不小心就搞大搞長了。SVG SMIL animation動畫不需要JS也不需要掌握CSS, 這對於那些喜歡動畫，對動畫有想法有天賦的的設計師而言，是個很好的工具、或者說舞臺。其有機會可以好好創造很多精彩的內容了！我就是這麼覺得的。

好，就這些，希望本文的內容能夠對感興趣的同行提供學習上的幫助。

本文前半部分的演示內容組織參考：SVG Animation
本文後半部分的參數演示詳解參考：SMIL Animation

歡迎評論，歡迎交流！

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

在網頁中使用SVG技術

qq_21700537 2018-09-01 06:27:54