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

時間  2019-11-12
標籤 超級 強大 svg smil animation 動畫 詳解 简体版
原文   原文鏈接

 

本文花費精力驚人，具備先驅前瞻性，轉載規則以及申明見文末，小心予以追究。
本文地址：http://www.zhangxinxu.com/wordpress/?p=4333html

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

1、SVG SMIL animation概覽

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

SMIL容許你作下面這些事情：微信

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

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

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

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。動畫

2、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動畫，下面的參數詳解篇實在是不容錯過。

3、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. ...
等其餘遺漏參數。

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

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

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

// 重啓動
svg.unpauseAnimations()

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

5、寫在深夜的結束語

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

好，就這些，但願本文的內容可以對感興趣的同行提供學習上的幫助。

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

歡迎評論，歡迎交流！

本文爲原創文章，時間、人力成本驚人，目前其餘地方几乎沒有相關資料！所以若要轉載，除了保留原出處，還須要把下圖的二維碼圖弄上；或者任意金額的友情資助，算是文檔購買，你能夠任意複製與傳播！
本文地址：http://www.zhangxinxu.com/wordpress/?p=4333

（本篇完）

若是您以爲本文的內容對您的學習有所幫助，您能夠支付寶(左)或微信(右)：
 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程