SVG SMIL Animation

目錄[^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在各大瀏覽器都支持



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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,443評論 6贊 532
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,530評論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,407評論 0贊 375
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,981評論 1贊 312
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,759評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,204評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,263評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,415評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,955評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,528評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,222評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,650評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,892評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,675評論 3贊 392
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2贊 374