SVG animation動畫詳解

admin發表於2017-09-16
SVG動畫
不但可以使用SVG繪製靜態圖形，也可以利用動畫元素建立動畫效果。

SVG提供的動畫元素主要有如下幾個:

（1）.<set>:在指定的時間之後執行指定的動畫。

（2）.<animate>:基礎動畫元素，實現單屬性的動畫效果。

（3）.<animateTransform>:實現transform變換動畫效果，參閱SVG animateTransform變換動畫一章節。

（4）.<animateMotion>:實現路徑動畫效果，參閱SVG animateMotion路徑動畫一章節。

本章節主要介紹<animate>元素實現的動畫效果，其他動畫效果可以參閱相關文章。

由於<set>元素比較簡單，所以這裡一併介紹，下面進入正題。

一.<set>元素:

此元素並不會產生任何動畫效果，但是具有延遲的功能。

看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:300px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect
        id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <set xlink:href="#ant"
       attributeName="x"  
       to="100"
       begin="3s" />
</svg>
</body>
</html>

程式碼並沒有動畫效果，只會在3s之後將矩形從橫座標10位置移動到100位置。

<set>元素也具有一些屬性，不過<animate>元素也同時具有，所以這裡就不做介紹。

二.<animate>元素:

此元素可以建立單屬性動畫過渡效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:300px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           to="100"
           dur="3s"
           begin="0s"/>
</svg>
</body>
</html>

用3s的時間，矩形元素從x軸10處以動畫方式移動到100處。

下面對主要屬性做一下介紹:

（1）.attributeName:

它用來規定元素的哪個屬性會產生動畫效果。

比如上面程式碼的x軸座標，也可以是透明度等類似屬性。

（2）.attributeType:

此屬性用來為attributeName規定的屬性值規定名稱空間；支援三個屬性值:CSS/XML/auto。

比如x和y屬於XML，而opacity則屬於css。

此屬性通常不用顯示規定，能夠自動進行識別，且不用擔心出錯。

如果沒有規定，預設auto，首先查詢CSS屬性列表中是否有匹配的值，如果沒有，則去XML名稱空間中查詢。

（3）.from、to和by:

from屬性規定attributeName屬性的起始值，如果起始值和預設值相同，from可以省略。

to屬性規定attributeName屬性的終止值。

by屬性規定了一個相對於from的值（to是絕對值）。假如from值是10，by的值是50，那麼最終值是60。

特別說明:如果同時規定了to和by，那麼to的優先順序會更高。

（4）.values屬性:

此屬性功能與from和to類似。

它也是規定attributeName的起點和終點，並且起點和終點之間也可以有關鍵幀。

屬性值是一個用分號分隔的一個或多個值。

特別說明:如果規定了values屬性，那麼from, to和by都會被忽略。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:500px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="10;200;10;200"
           dur="3s"
           begin="0s"/>
</svg>
</body>
</html>

（5）.begin和end屬性:

begin屬性用來規定動畫開始的時間，end屬性用來規定動畫結束的時間。

這裡重點介紹begin屬性，end和它是相同的原理。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:500px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="10;200;10;200"
           dur="3s"
           begin="click"/>
</svg>
</body>
</html>

上面的程式碼規定，點選矩形以後動畫才會開始。

begin屬性值其實相當複雜的:

[XML] 純文字檢視 複製程式碼
offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

（1）.offset-value:

相對於svg文件開始時間（可以簡單理解為svg文件就緒）的一個偏移值；之前所有的演示程式碼都是運用的這個語法格式，比如

[XML] 純文字檢視 複製程式碼
begin="5s"

上面表示文件就緒5s秒後開始動畫的執行；偏移值可以是負數，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:250px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="0;200;0;200"
           dur="10s"
           begin="-1s"/>
</svg>
</body>
</html>

如果說正的偏移是規定文件就緒後多長時間開始動畫，那麼負的偏移可以簡單理解為，在文件就緒之前就開始動畫；以上面程式碼為例子，我們看到的動畫執行初始狀態是動畫開始執行1秒後的狀態。

（2）.syncbase-value:

基於同步確定的時間點開始動畫，語法結構如下:

[XML] 純文字檢視 複製程式碼
[元素的id].begin/end +/- 時間值

也就是基於一個指定元素開始或者結束時間點的偏移值。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="one"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
 
  <rect id="two"
        x="0" y="70"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate xlink:href="#one"
           attributeName="x"
           values="0;200"
           dur="5s"
           fill="freeze"
           id="rect-anim" />
 
  <animate
           xlink:href="#two"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="rect-anim.begin + 1s"/>
</svg>
</body>
</html>

規定第二個動畫在第一個動畫開始後2s開始執行。

（3）.event-value:

從名稱就可以看到，動畫的開始是與事件相關聯的，語法結構如下:

[XML] 純文字檢視 複製程式碼
[元素的id].[事件型別] +/- 時間值

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
 
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="2s"
           begin="click + 1s"/>
</svg>
</body>
</html>

上面的程式碼中，點選一秒後開始動畫；偏移時間可以省略。

事件物件可以不是元素本身，看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="one"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
  </rect>
  <rect id="two"
        x="0" y="70"
        width="50" height="50"
        fill="blue">
  </rect>
  <animate
           xlink:href="#two"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="one.click + 1s"/>
</svg>
</body>
</html>

上面的程式碼中，點選第一個矩形1秒後，第二個矩形開始動畫效果。

（4）.repeat-value:

規定動畫是在其他某個動畫重複執行指定次數後開始，語法結構如下:

[XML] 純文字檢視 複製程式碼
[元素的id].repeat(整數) +/- 時間值

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="one"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
  </rect>
  <rect id="two"
        x="0" y="70"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#one"
           attributeName="x"
           values="0;200"
           dur="5s"
           repeatCount="4"
           fill="freeze"
           id="rect-anim" />
  <animate
           xlink:href="#two"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="rect-anim.repeat(2)+2s"/>
</svg>
</body>
</html>

上面的程式碼中，第一個矩形動畫重複兩次2秒之後，第二個矩形元素開始動畫行為。

（5）.accessKey-value:

定義動畫開始的快捷鍵，語法結構如下:

[XML] 純文字檢視 複製程式碼
accessKey("character") +/- 時間值

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="accessKey(d)+1s"/>
</svg>
</body>
</html>

上面的程式碼，在點選d鍵一秒後開始動畫效果。

特別說明:在寫本文之時，谷歌瀏覽器並不支援，但是在火狐瀏覽器下能夠順暢執行。

（6）.wallclock-sync-value:

以真實的世界時鐘時間來規定動畫的開始，語法結構如下:

[XML] 純文字檢視 複製程式碼
wallclock("wallclock-value")

w3c文件的介紹貌似有點複雜，引用w3c文件一個時間:1997-07-16T19:20+01:00。

實際應用中，出場的機會估計不會太多，更多內容可以參閱w3c關於Wallclock-sync values的介紹。

（7）.indefinite:

只有在特殊條件下才能觸發，比如通過beginElement()或者通過超連結呼叫，否則將會無限期等待下去。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
<script>
window.onload = function () {
  var obt = document.getElementById("bt");
  var animate = document.getElementById("rect-animate");
  obt.onclick = function () {
    animate.beginElement();
  }
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate id="rect-animate"
           xlink:href="#ant"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="indefinite"/>
  <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rect-animate">          
    <text
          x="0" y="120"
          fill="red"
          font-size="20">檢視效果</text>     
  </a>
</svg><br/>
<input type="button" id="bt" value="檢視效果">
</body>
</html>

（6）.dur屬性:

此屬性規定動畫持續的時間，在前面的程式碼中都有涉及，就不演示了。

（7）.calcMode, keyTimes和keySplines屬性:

由於篇幅原因，此屬性的用法參閱calcMode, keyTimes和keySplines屬性一章節。

（8）.repeatCount和repeatDur屬性:

此屬性的用法參閱SVG repeatCount和repeatDur屬性一章節。

（9）.fill屬性:

此屬性的用法參閱SVG fill動畫屬性一章節。

（10）.restart屬性:

此屬性的用法參閱SVG restart動畫屬性一章節。

相關文章