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 (英文)
animateTransformanimateMotion適用 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=更新日期: