SVG Animation

animation elements (動畫元素)

animate

主要使用在單一屬性,以插補運算 (interpolation) 方式產生漸漸改變的動畫。

簡單地如:填色 (fill) 為 blue 的方形,經由 5 秒的時間漸漸變為 yellow

SVG 片段
<rect width="100" height="100" style="fill:blue;stroke:none">
 <animate attributeName="fill" to="yellow" dur="5s"/>
</rect>
測試

稍微複雜一點點如:一個 id="shape1" 的圓,經由 5 秒漸漸變為完全透明 (第一段動畫) ;再經由 5 秒漸漸變回不透明 (第二段動畫) 。這次以 xlink:href 屬性指向圓的 id (被改變的元素) 來改變不透明度屬性 (opacity) 產生動畫。

SVG 片段
<circle id="shape1" cx="60" cy="60" r="60" style="fill:orange;stroke:none" />
<animate xlink:href="#shape1" attributeName="opacity" values="1;0;1" dur="10s" repeatCount="indefinite" />

set

指定變為一個屬性的值,並維持不變一段時間,而不會產生漸漸改變的效果。經常會使用在切換效果的消失與顯現,或是沒辦法運用插補運算 (interpolation) 的屬性。由於 set 不會運算,所以 additiveaccumulate 動畫屬性不會作用。

例如,指定一個原本沒有描邊 (stroke) 的圓角矩形,在 5 秒後出現紅色描邊並維持 3 秒後再消失。

SVG 片段
<rect width="100" height="100" rx="40" ry="20" x="4" y="4" style="stroke:none;fill:aqua;stroke-width:8px">
 <set attributeName="stroke" to="red" dur="3s" begin="5s"/>
</rect>

另外,常會用到的一閃一閃效果。讓一個圓點消失 (displayvisibility 屬性) 一段很短的時間,如 200ms ,再回復顯現一小段時間,如 500ms ,再不斷地重複 200ms 消失、 500ms 出現。

SVG 片段
<circle r="10" cx="10" cy="10" style="fill:red;stroke:none">
 <set id="ani3" attributeName="display" to="none" dur="200ms" begin="0s;ani3.end+500ms"/>
</circle>

animateTransform

animateMotion

動畫元素共用的屬性 (common attributes)

適用 animate, set, animateTransform, animateMotion 等動畫元素。

xlink:href=

準備產生動畫的目標元素的 id 參照 (IRI) ,必須是在同一文件內的一部分 (fragment) 。如果沒有指定 xlink:href 屬性,會以動畫元素的父元素 (parent elements) 作為目標元素。

attributeName=

產生動畫的特定屬性 (attribute or css property) 名稱。

attributeType=

動畫屬性的型式。注意大小寫須符合。一般使用下,這個屬性沒有定義不會有影響。

to=

動畫期間結尾時的數據。

by=

動畫期間至結尾時的相對變動 (relative offset) 數據。

from=

動畫期間起始時的數據。

dur=

動畫的簡單持續時間。

begin=

開始動畫的時間點。可指定多個值,以 ; (分號) 區隔,表示可在多個不同時間點開始。

end=

終止動畫的時間點。可指定多個值,以 ; (分號) 區隔,表示可在多個不同時間點終止。

fill=

動畫執行結束是否移除動畫終止的屬性值,回復到無動畫時的屬性值。

repeatCount=

動畫重複執行的次數。

repeatDur=

動畫重複執行的延續時間。

restart=

動畫可否重新開始。

accumulate=
additive=

更新日期: