animate
₪主要使用在單一屬性,以插補運算 (interpolation) 方式產生漸漸改變的動畫。
簡單地如:填色 (fill
) 為 blue
的方形,經由 5 秒的時間漸漸變為 yellow
。
<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
) 產生動畫。
<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" />
w3c 詳細規格:animate
(英文)
set
₪指定變為一個屬性的值,並維持不變一段時間,而不會產生漸漸改變的效果。經常會使用在切換效果的消失與顯現,或是沒辦法運用插補運算 (interpolation) 的屬性。由於 set
不會運算,所以 additive
及 accumulate
動畫屬性不會作用。
例如,指定一個原本沒有描邊 (stroke
) 的圓角矩形,在 5 秒後出現紅色描邊並維持 3 秒後再消失。
<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>
另外,常會用到的一閃一閃效果。讓一個圓點消失 (display
或 visibility
屬性) 一段很短的時間,如 200ms ,再回復顯現一小段時間,如 500ms ,再不斷地重複 200ms 消失、 500ms 出現。
<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>
w3c 詳細規格:set
(英文)
animateTransform
animateMotion
適用 animate
, set
, animateTransform
, animateMotion
等動畫元素。
xlink:href=
準備產生動畫的目標元素的 id
參照 (IRI) ,必須是在同一文件內的一部分 (fragment) 。如果沒有指定 xlink:href
屬性,會以動畫元素的父元素 (parent elements) 作為目標元素。
"IRI"
如 "#sy1"
表示 id="sy1"
的元素會產生動畫。當然,這目標元素必須是在同一文件中,並且不會有其它同名的。
attributeName=
產生動畫的特定屬性 (attribute or css property) 名稱。
"attributeName"
如 "width"
表示會以寬度的變化來產生動畫。
attributeType=
動畫屬性的型式。注意大小寫須符合。一般使用下,這個屬性沒有定義不會有影響。
"auto"
會自動檢驗屬性的型式。此為初始值。
"CSS"
指定屬性型式為 css property 。
"XML"
指定屬性型式為 XML 。
to=
動畫期間結尾時的數據。
"value"
一般為數值,如 "200"
或含有單位 "300px"
;也可以是文字型態的定義,如顏色值 "rgb(255,128,128)"
或顯示模式 "none"
。
by=
動畫期間至結尾時的相對變動 (relative offset) 數據。
"value"
此值只接受可計算的數值。同時指定 to
時,會忽略 by
。
from=
動畫期間起始時的數據。
"value"
與 to
的指定方式相同。沒有指定 from
時,會以原有定義作為起始數據。
dur=
動畫的簡單持續時間。
"時間值"
如 "8s"
表示動畫從開始算起會持續 8 秒。此值必須大於 0 。常用單位為 s
秒、 ms
毫秒,允許小數值。其它更多的時間值表示方式可參考 w3c Clock Values 。
"indefinite"
特別字,如果沒有指定 dur
屬性就會用 indefinite
。然而,此值使插補 (interpolation) 動畫失去作用,也就是不會有漸漸的變化;使用在 set
元素會較有用。
begin=
開始動畫的時間點。可指定多個值,以 ;
(分號) 區隔,表示可在多個不同時間點開始。
"時間值"
如 "2s"
表示動畫在 2 秒時開始; "2s;5s;10s"
表示動畫分別在 2 秒、 5 秒、 10 秒時開始。其它更多的時間值表示方式可參考 w3c Clock Values 。
"id.end;id.begin"
動畫在指定的動畫元素 (以元素的 id
指定) 起始或結尾時開始。如:
"ani.end"
表示動畫在 id="ani"
動畫元素結束時開始。
"ani.end+2s"
表示在 id="ani"
動畫結束後 2 秒開始。
"ani.end-0.5s"
表示在 id="ani"
動畫結束前 0.5 秒開始。
"id.event;event"
動畫在指定的元素 (以元素的 id
指定) 發生某個事件 (event
) 時開始。如:
"playNode.click"
表示動畫在 id="playNode"
的元素被使用者在其內按下滑鼠執行鍵時開始。
"playNode.click+2s"
表示動畫在 id="playNode"
的元素被按下滑鼠執行鍵後 2 秒開始。
而如 "mouseover"
,沒指定 id
,表示在滑鼠移入此
動畫時開始。
可處理的事件 (event
) 可參考 w3c Complete list of supported events 。
"id.repeat(整數)"
動畫在指定的元素 (以元素的 id
指定) 重複幾次結束時開始。如:
"ani.repeat(3)"
表示動畫在 id="ani"
的元素重複動畫 3 次完時開始。
"ani.repeat(3)+2s"
表示動畫在 id="ani"
的元素重複動畫 3 次後 2 秒開始。
"accessKey(鍵盤字元)"
動畫在使用者按下鍵盤上指定的單一字元時開始。如:
"accessKey(p)"
表示動畫在使用者按下鍵盤 p 字的時候開始。
"accessKey(p)+2s"
表示動畫在使用者按下鍵盤 p 字後 2 秒開始。
end=
終止動畫的時間點。可指定多個值,以 ;
(分號) 區隔,表示可在多個不同時間點終止。
begin
屬性相同。fill=
動畫執行結束是否移除動畫終止的屬性值,回復到無動畫時的屬性值。
"remove"
此為初始值,會移除最終值,回復原有的值。
"freeze"
動畫結束後,會維持動畫最終的值。
repeatCount=
動畫重複執行的次數。
"數值"
可包含小數,表示只重複到一部分。
"indefinite"
特別字,表示重複無限次。
repeatDur=
動畫重複執行的延續時間。
"時間值"
如 "6s"
表示有 6 秒的時間可重複動畫。其它更多的時間值表示方式可參考 w3c Clock Values 。
"indefinite"
特別字,表示重複無限時間。
restart=
動畫可否重新開始。
"always"
任何時候都可重新開始。此為初始值。
"whenNotActive"
只有在動畫沒有進行時可重新開始。動畫進行中,會忽略嚐試重新開始的動作。
"never"
動畫不能被重新開始。
accumulate=
additive=
更新日期: