目錄[^1]

一、SVG SMIL Animation概覽

1.1 SMIL是什麼？

全稱Synchronized Multimedia Integration Language
SMIL允許你做這些事情：

• 動畫元素的數值屬性（X，Y,...）
• 動畫屬性變換（平移或旋轉或縮放）
• 動畫顏色變換
• 沿著指定路徑運動 CSS3不能做到

1.2 SMIL強大之處

SMIL的強大之處在於：不需要CSS，不需要JS，只需要 animate 元素即可。例項:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="200" y="200" width="60" height="60" fill="red"></rect>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</svg>

二、SMIL Animation元素及效果概覽

• <set>
• <animate>
• <animateColor>
• <animateTransform>
• <animateMotion>

2.1 <set />

<set>意思是設定，此元素沒有動畫效果。但是可以實現基本的延遲功能。也就是說，可以在特定時間之後修改某個屬性值（也可以是CSS屬性值）。
例項：矩形會在3s後從x="160" 移動到x="60"的位置。

<svg xmlns="http://www.w3.org/2000/svg"  width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red">
        <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </rect>
</svg>

2.2 <animate />

基礎動畫元素。實現單屬性的動畫過渡效果。例項：矩形沿著X軸平移

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red">
        <animate attributeName="x" from="200" to="10" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect> 
</svg>

2.3 <animateColor />

顏色動畫，其可以實現的功能與效果，animate也可以做到，因此，該屬性已經被廢棄

2.4 <animateTransform></animateTransform>

實現 transform 變換動畫效果。例項，矩形快速變大：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red"></rect> 
    <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="3"></animateTransform>
</svg>

2.5 <animateMotion>

animateMotion元素可以讓SVG各種圖形沿著特定的 path 路徑運動。例項：矩形按照既定路徑運動

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
  <rect x="-25" y="-25" width="50" height="50" fill="rgba(0,255,255,.6)">
    <animateMotion path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" fill="freeze"></animateMotion>
  </rect>
  <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>

2.6 自由組合

讓矩形沿著路徑來回移動，並更改顏色

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
  <circle cx="0" cy="0" r="5" fill="red"></circle>
  <circle cx="0" cy="-100" r="5" fill="yellow"></circle>
  <rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
    <animateMotion id="clockwise" path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" begin="0; counterclockwise.end + 1s" fill="freeze"></animateMotion>
    <animateMotion id="counterclockwise" path="M 0 -100 A 200 200 0 1 1 100 100 L 0 0" dur="3s" begin="clockwise.end + 1s" rotate="auto" fill="freeze"></animateMotion>
    <animate id="toYellow" attributeType="XML" attributeName="fill" 
      begin="0; toRed.end + 1s" 
      from="red" to="yellow" dur="3s" fill="freeze"></animate>
    <animate id="toRed" attributeType="XML" attributeName="fill" 
      begin="toYellow.end + 1s"
      from="yellow" to="red" dur="3s" fill="freeze"></animate>
  </rect>
  <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>

三、SVG Animation引數詳解

3.1 attributeName = <attributeName>

需要變化的元素屬性名稱：

• 可以是元素直接暴露的屬性，例如，對於反覆出現的矩形對應的 <rect> 元素上的 x， y或者rx，ry
• 還可以是CSS屬性。例如，透明度 opacity。

3.2 attributeType = "CSS | XML | auto"

attributeType支援三個固定引數，CSS、XML、auto，用來表示attributeType屬性值的列表。x,y以及transform就屬於XML；opacity就屬於CSS；auto為預設值，自動判別的意思，實際上縣當成CSS處理，如果發現不認識，直接XML類別處理。因此如果不確定某屬性是XML還是CSS類別的時候設定為auto。雖然如此，為了瀏覽器效能最佳，還是儘量區分類別。

3.3 from，to，by，values

上面的4個屬性是一個家族的，他們解決的問題是，從哪裡來？到哪裡去？怎麼去？去幹什麼？

• from = "value" ：動畫的起始值。
• to = "value" ：指定動畫的結束值。
• by = "value" ：動畫的相對變化值。
• values = "list" ：用分號分隔的一個或多個值，可以看出是動畫的多個關鍵值點。

from，to，by，values雖然是一個家族的，但是相互之間還是有制約關係的：

• 如果動畫的起始值與元素的預設值是一樣的，form引數可以省略。

• （不考慮values）to、by兩個引數至少需要有一個出現，否則沒有動畫效果。to表示絕對值，by表示相對值。
  拿位移舉例，如果from="100"，to="160"則表示移動到160這個位置，但是by="160"表示100+160=260，表示移動到260的位置。

• 如果to，by同時出現，則by打醬油，只是別to。

• 如果to，by，values都沒設定，自然沒動畫效果。如果任意（包括from）一個屬性的值不合法，嚴格來說是沒有動畫效果的。但是Chrome有容錯機制，可能會出現動畫。

• values可以是一個或多個值。當values的值設定並被識別時，from，to，by的值都會被忽略。
  values的功能就是實現多點之間動畫。而from，to，by只能實現兩個點的切換。例項，矩形來回移動：

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
    <rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
        <animate attributeName="fill" values="red;green;blue;black" dur="4s" fill="freeze" />
        <animate attributeName="x" values="0;300;100;500" dur="4s" fill="freeze"/>
    </rect>
 </svg>

總結為五個動畫：from-to動畫、from-by動畫、to動畫、by動畫、values動畫。

3.4 begin，end

begin指動畫開始的時間，看上去很簡單。例如begin="3s"只是最基本的表示方式。
begin的定義是分號分隔的一組值。例如begin="3s;5s"表示的是3s之後動畫走一下，5s的時候再走一下（如果之前的動畫沒走完，會立即停止並從頭開始）

SVG Animate中的時間表示

常見單位有"h" | "min" | "s" | "ms",以上單位都是英文單位的縮寫。
時間值支援小數寫法，因此90s也可以用1.5min表示。時間值還支援hh:mm:ss這種寫法，因此，90s我們也可以使用01:30表示。

還有一點，十進位制的小數值是秒的浮點定義，什麼意思呢？例如 begin="1.5" 沒有單位，這裡的小數點表示秒，也就是 1.5s的意思。所以上面N次出現的begin=3s 也可以簡寫作 begin="3"。

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

• offset-value 表示偏移值，數值前面有+ 或 - ，指相對於document的begin值；

• syncbase-value 基於同步確定的值。語法為：[ID].begin/end +/- 時間值。
  例如: 2.6綜合例項的begin="0; counterclockwise.end + 1s" 意思是上一個動畫結束1s之後。

• event-value 這個表示與時間相關聯的值。類似於 ”點選執行該動畫“， 語法為：id.event +- time
  例如：begin = "circle.click + 2s" 表示點選2s之後執行動畫

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
    <circle id="circle" cx="100" cy="100" r="20"></circle>
    <rect x="-25" y="-25" rx="5" ry="5" width="100" height="100" fill="red">
        <animate attributeName="x" to="260" begin="circle.click + 2s" dur="2s" />
    </rect>
 </svg>

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

• repeat-value 指重複多少次之後做什麼。語法為：[ID].repeat（整數） +/- 時間值。
  例項：矩形水平移動兩次之後，斜向運動

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="#ff5050">
        <animate id="x" attributeName="x" to="800" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="y" to="800" begin="x.repeat(2)" dur="3s" fill="freeze" />
    </rect>
</svg>

begin="x.repeat(2)"指id為x的元素的動畫重複2次之後執行該動畫。

• accessKey-value 定義快捷鍵。即按下某個按鍵動畫開始。語法為: accessKey("character"). character表示快捷鍵所在字元。
  例項：按下A鍵動畫執行（firefox上可用，chrome不支援）

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="#ff5050">
        <animate attributeName="x" to="400" begin="accessKey(a)" dur="3s" repeatCount="indefinite" />
    </rect>
</svg>

• wallclock-sync-value 指真實世界的時鐘定義，時間語法是基於ISO8601中定義的語法，例如：2018-01-23T10:40:54.45+01:00

• indefinite 就是這個字串值，表示無限等待，需要beginElement()方法觸，或者指向該動畫元素的超連結（SVG中的a元素）觸發。
  beginElement()觸發例項：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="600" height="200">
  <rect x="100" y="100" width="100" height="100">
    <animate attributeName="x" to="400" begin="indefinite" dur="2s">
  </rect>
</svg>
<script type="text/javascript">
  var animate = document.getElementsByTagName("animate")[0];
    if (animate){
      document.getElementById("svg").onclick = function(){
        animate.beginElement();
      }
    }
</script>

超連結（a標籤）觸發例項：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="200">
    <rect x="100" y="100" width="100" height="100">
        <animate id="animate" attributeName="x" to="400" begin="indefinite" dur="2s"/>
    </rect>
    <a xlink:href="#animate">
        <text x="100" y="60" fill="#cd0000" font-size="30">點選</text>
    </a>
</svg>

end與begin的屬性大同小異，無需重複說明。

3.5 dur

dur有兩種值：常規時間值 | “indefinite”
常規時間值就是（3s）這種正常值；indefinite指時間無限。
動畫時間無限，實際上就是動畫不執行，因此設定“indefinite”跟沒有設定dur值一個意思，與dur解析異常一個意思。

3.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值不合法或個數不對，是沒有動畫效果的。

來看一個綜合例項：演示效果

<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 80; 160" calcMode="paced"/>
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" />
    </text>
</svg>

values確定動畫的關鍵位置，keyTimes確定到這個關鍵點需要的時間，keySplines確定的是每個時間之間的貝塞爾曲線，也就是具體緩動表現。
CSS3寫的transition動畫效果，也是這麼回事，只是values值就兩個，所以，keyTimes只能是0；1，貝塞爾曲線就一個，要不ease，要不liner。
keySplines=".5 0 .5 1; 0 0 1 1"這裡的動畫曲線可以自由調節，可以參考以下曲線：

3.7 repeatCount，repeatDur

repeatCount 表示動畫執行次數，可以是合法數值或者"indefinite"(動畫迴圈到電腦當機)。
repeatDur 定義重複動畫的總時間。可以是普通時間值或者"indefinite"(動畫迴圈到電腦當機)。

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

動畫執行 3 + 1/3 次。因為repeatDur=“10s”

3.8 fill

fill表示動畫間隙的填充方式。支援引數有：freeze | remove，其中remove是預設值，表示動畫結束直接回到開始的地方，freeze表示動畫結束凍住，表示保持動畫結束的資訊。

3.9 accumulate，additive

accumulate 是累積的意思。支援引數有none | sum 。預設值是none，值sum表示動畫結束時的位置作為下次動畫的起始位置。
additive 控制動畫是否附加。支援引數有：replace | sum。預設值replace，值sum表示動畫的基礎指示會附加到其他低優先順序的動畫上。
例項1，

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

輪到第二個動畫的時候，路徑從第一個動畫路徑結束的地方開始，三個動畫完美結合

例項2：線上檢視效果

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
   <rect x="200" y="200" width="20" height="20"></rect>
   <animateTransform attributeName="transform" type="scale" from="1" to="4" dur="5s"  additive="sum" fill="freeze"/>
   <animateTransform attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="5s" fill="freeze" additive="sum"/>;
 </svg>

3.10 restart

restart這個屬性誕生的背景如下：很多動畫其觸發可能與事件相關，例如，點選圓圈，矩形就跑。而且，似乎每點一次，矩形就動一下。現在，存在這種情況，希望矩形只動一次，之後點選就不動了。這種需求迫使restart引數的出現。
支援的引數有：** always | whenNotActive | never**
always 是預設值，表示總是，也就是點一次圈圈，馬兒跑一下。
whenNotActive 表示動畫正在執行的時候，不能重啟動畫。
never 表示執行一次就不再執行。

3.11 min,max

min/max表示動畫執行最短和最長時間。支援引數為時間值和"media"（沒接元素有效），max還支援indefinite。

四、動畫暫停與播放

SVG Animation中是有內建的API可以暫停和啟動動畫，語法：

//暫停
svg.pauseAnimations();

//播放
svg.unpauseAnimation();

通過ID獲取SVG元素

var svgElement = document.getElementById("rect1")

五、animeJS動畫庫

http://animejs.com/
SVG和animeJS搭配使用可以做出非常流暢的動畫。
可以檢視我的
例項1：http://jsbin.com/faxikem/5/edit?html,output
例項2：https://github.com/PowerXuan/MonstarLogoSVGAnimation