SVG animation動畫詳解

admin發表於2017-09-16
不但可以使用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動畫屬性一章節。

相關文章