iT邦幫忙

DAY 18
1

SVG 30 天 ~ 就要醬玩系列 第 18

Day18 - 初探 SVG SMIL Animation

SVG 的動畫元素是由 W3C Synchronized Multimedia (SYMM) Working Group 由 Synchronized Multimedia Integration Language (SMIL,同步多媒體集成語言) 所規範開發,SMIL 規劃具有許多的參數與設定值 ( 可以參考 W3C 的規範 ),也因為有了這些設定,我們便可以輕鬆的控制 SVG 圖形,這篇將介紹 SVG 基本的動畫,進階動畫控制的部分會在"下一篇文章進行分享。( oxxostudio.tw 同步發表:SVG 研究之路 (21) - 初探 SMIL Animation )

SVG 動畫其實跟 CSS3 的動畫很類似,都是必須要手動寫程式控制動畫時間、延遲時間與影格...等的數值,不過 SVG 動畫勝過 CSS3 動畫的地方,就在於 SVG 動畫可以讓圖形跟隨路徑移動、旋轉,還可以將動畫影格與時間做更精準的搭配,甚至在不需要撰寫 javascript 的情形下,就讓動畫具有一些互動效果,真的是非常之神奇呀!( 隨著瀏覽器逐漸的支援,SVG 也逐漸火紅起來 )

SVG 支援 SMIL 動畫規範中定義的四個動畫元素如下:
1. set
2. animate
3. animateMotion
4. animateColor ( 已不使用,直接使用屬性值獲取顏色 )

SVG 也包括以下的相容性擴展到 SMIL 動畫元素:
1. animateTransform
2. path attribute
3. mpath element
4. keyPoints attribute
5. rotate attribute

這篇文章會針對上面的 set、animate、animateMotion 與 animateTransform 這四個動畫元素,進行基本的介紹,除了 animateColor 已經不使用外,path、mpath、keyPoints 與 rotate 則必須依附在 animateMotion 上,之後會再一併介紹。

1. set
set 其實是一個很簡單的元素,若你要說它不像動畫也可以,因為顧名思義就是一個設定而已,但在動畫裡頭,我們時常會需要用到延遲幾秒後從某個位置出現之類的效果,這時候就可以將 set 派上用場,下列的範例表示兩秒之後,正方形會移到 x=70 的地方,雖然 set 支援所有 SVG 動畫的屬性,不過很可惜的,根據 W3C 的規範,動畫屬性不能添加,因此沒有辦法利用 set 做出兩秒跳這邊,四秒跳那邊的動畫。( 範例圖片是 gif,所以會重複播放 )

<rect width="50" height="50" x="10" y="10" fill="#c00">
  <set attributeName="x" to="40" begin="2s">
</rect>
<rect width="50" height="50" x="10" y="10" fill="none" stroke="#000"/>

2. animate
animate 元素就真的是一個動畫的元素 ( 廢話哈哈 ),下方的範例,設定兩秒內正方形會移到 x=60 的地方 ( dur="2s" ),同時無限次播放 ( repeatCount="indefinite" )。

<rect width="50" height="50" x="10" y="10" fill="#09c">
  <animate attributeName="x" to="60" dur="2s" repeatCount="indefinite"> 
</rect>
<rect width="50" height="50" x="10" y="10" fill="none" stroke="#000"/>

3. animateMotion
這個屬性是讓我們的圖形,可以跟隨路徑移動,甚至可以設定跟隨路徑自動旋轉,如果對於路徑 path 還不熟悉的,可以參考 SVG 研究之路 (4) - Path 基礎篇SVG 研究之路 (5) - Path 進階篇,比較需要注意的是,當我們設定了 animateMotion,則圖形位置以 path 的起點 M 開始計算,也就是會把 M 當作圖形的 (0,0) 的座標,因此下面的範例將 x 設為 0,y 設為 -10。

<rect width="20" height="10" x="0" y="-10" fill="#09c">
  <animateMotion dur="5s" path="M7.4,15.3c17,20.4,48.8,38,91.6,27.8c79.5-18.9,107.4,48.2,69.4,48.2c-33.9,0-15.2-58.1,65.4-41.7c26.2,5.3,63.2-19.1,79.1-34.3" repeatCount="indefinite" rotate="auto" /> 
</rect>
<path fill="none" stroke="#000" d="M7.4,15.3c17,20.4,48.8,38,91.6,27.8c79.5-18.9,107.4,48.2,69.4,48.2c-33.9,0-15.2-58.1,65.4-41.7c26.2,5.3,63.2-19.1,79.1-34.3"/>

如果沒有這樣設定,則會出現這樣的情況:

<rect width="20" height="10" x="20" y="20" fill="#09c">
  <animateMotion dur="5s" path="M7.4,15.3c17,20.4,48.8,38,91.6,27.8c79.5-18.9,107.4,48.2,69.4,48.2c-33.9,0-15.2-58.1,65.4-41.7c26.2,5.3,63.2-19.1,79.1-34.3" repeatCount="indefinite" rotate="auto" /> 
</rect>
<path fill="none" stroke="#000" d="M7.4,15.3c17,20.4,48.8,38,91.6,27.8c79.5-18.9,107.4,48.2,69.4,48.2c-33.9,0-15.2-58.1,65.4-41.7c26.2,5.3,63.2-19.1,79.1-34.3"/>

4. animateTransform
這是控制圖形 transform 動畫的屬性,要使用這個屬性,就非得掌握 SVG transform 的基礎知識,可以參考之前的文章:[SVG 研究之路 (19) - transform 基礎篇](這是控制圖形 transform 動畫的屬性,要使用這個屬性,就非得掌握 SVG transform 的基礎知識,可以參考之前的文章:SVG 研究之路 (19) - transform 基礎篇 與 SVG 研究之路 (20) - transform Matrix,下面的範例可以看到我們設定 type 是 scale,從 1 的比例變成 1.5 的比例。) 與 SVG 研究之路 (20) - transform Matrix,下面的範例可以看到我們設定 type 是 scale,從 1 的比例變成 1.5 的比例。

<rect width="60" height="60" x="10" y="10" fill="#0c0">
  <animateTransform dur="2s" attributeName="transform" repeatCount="indefinite" type="scale" from="1" to="1.5"/> 
</rect>
<rect width="60" height="60" x="10" y="10" fill="none" stroke="#000">

也可以把 type 設為 rotate,就可以讓圖形旋轉:

<rect width="60" height="60" x="50" y="50" fill="#0c0">
  <animateTransform dur="2s" attributeName="transform" repeatCount="indefinite" type="rotate" from="0,80,80" to="360,80,80"/> 
</rect>
<rect width="60" height="60" x="50" y="50" fill="none" stroke="#000">

其實 SVG animation 的設定還有很多,上述只是讓我們從最基本的「圖動起來」著手,避免一開始就介紹一大堆的屬性設定,喪失了對於動畫的好奇和熱情,下一篇即將介紹動畫更進階的設定,了解了這些設定之後,相信一定可以做出不錯的效果喔!


上一篇
Day17 - SVG transform Matrix
下一篇
Day19 - 深入理解 SVG SMIL Animation
系列文
SVG 30 天 ~ 就要醬玩31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言