SVG實戰開發學習（九）——讓svg動起來（五種動畫元素）

時間 2019-11-22

標籤 svg 實戰開發學習起來五種動畫元素简体版

原文原文鏈接

【<animate>元素】css

<circle cx="100" cy="200" r="30" style="fill:none;stroke-width:3;stroke:black">
<animate attributeType="XML" attributeName="r"
from="0" to="30" dur="3s"
restart="always" repeatCount="3">
</animate>
</circle>svg

<circle cx="100" cy="300" r="30" style="fill:none;stroke-width:3;stroke:black">
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="#F40" dur="10s"
restart="always">
</animate>
</circle>
</svg>
</body>
</html>動畫

第一個是一個水平移動的矩形，變化的屬性是矩形在X軸上的座標，在3S內從（50,50）移動到（300,50）處，動畫開始播放是在SVG文檔徹底解析3秒後，重複播放3次。
第二個是一個從圓心不斷變大的相似水波紋的效果，變化的屬性是圓的半徑，半徑從0一直變化到30，就產生了這樣的效果。
第三個是變化的是css的屬性"fill"，最終的效果是圓的填充顏色在10秒內從黑色變成紅色。rest

attributeName:變化的屬性名稱orm

attributeType：變化的類型，是HTML仍是cssxml

【<set>元素】htm

<set>元素是使用在非數值屬性上的，所謂非數值就是那些開關變量屬性、枚舉屬性。使用後的動畫過程不是漸變的，而是"一次到位"————突變，由於屬性值都是非數值的，沒法插值計算。
此例就是讓一個矩形在三秒鐘後消失。"visibility"是個枚舉屬性，能取的值只有3個"visible"、"hidden"和"inherit"ci

【<animateMotion>元素】

使用該元素能夠得到讓SVG圖形沿着事先定義好的路徑移動。它有一些本身專有的屬性。

a)path="<path-data>"：定義動畫播放過程當中所用到的路徑數據，其定義格式同<path>元素。

b)rotate="<angle>|auto|auto-reverse"：定義SVG圖形在沿着路徑移動的過程當中，其自身可否隨着路徑移動。若是該取值是一個角度值，那麼動畫對象在開始旋轉該角度後，再保持這個角度進行移動，默認值是0；"auto"表示動畫對象沿着路徑移動時，路徑若是出現拐彎，該對象也隨之拐彎。"auto-reverse"表示動畫對象逆時針旋轉180度後沿着路徑前進，也是隨着路徑拐彎而拐彎。

<body>
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(150,150)">
<path d="M0,0 L70,70 L150,270" style="fill:none;stroke:black;stroke-width:2"/>
<text x="0" y="0" font-size="37" visibility="hidden"
stroke="black" stroke-width="2">
AnimateMotion Effect
<set attributeName="visibility"
attributeType="CSS" to="visible"
begin="1s" dur="5s" fill="freeze"/>
<animateMotion path="M0,0 L70,70 L150,270"
begin="1s" dur="5s" fill="freeze" rotate="auto"/>
</text>
</g>
</svg>
</body>
</html>
實例中演示的動畫效果是一段文字沿着一條帶拐彎的路徑移動的。
咱們先使用了<set>元素，使得文字先顯示出來，而後沿着路徑移動。設置"rotate"屬性爲"auto"，使得文字遇到那個拐彎時繼續"貼"着路徑前進，而不是保持原來的方向："fill"屬性設置爲"freeze"，表示動畫播放完畢後，就保持在終止的畫面狀態。