idt .org 如果 count 種類 我們 RKE marker 有一個

最近使用到svg的動畫animate，簡單總結下animate的主要屬性：

1.定義：SVG 的animate

動畫元素放在形狀元素的內部，用來定義一個元素的某個屬性如何踩著時點改變。在指定持續時間裏，屬性從開始值變成結束值。

2.SVG animate參數詳解

2.1 attributeName = <attributeName>

要變化的元素屬性名稱

a. 可以是元素直接暴露的屬性，例如，對應的text元素上的x, y或者font-size;

b. 可以是CSS屬性。例如，透明度opacity.

2.2 attributeType = “CSS | XML | auto”

attributeType支持三個固定參數，CSS/XML/auto. 用來表明attributeName屬性值的列表。

x, y以及transform就屬於XML, opacity就屬於CSS. auto為默認值，

自動判別的意思（實際上是先當成CSS處理，如果發現不認識，直接XML類別處理）。因此，如果你不確信某屬性是XML類別還是CSS類別的時候，我的建議是不設置attributeType值，直接讓瀏覽器自己去判斷，幾乎無差錯。

那麽問題來了？“既然瀏覽器醬可以自己判斷屬性類別，那這個屬性還有什麽意義嗎？”我覺著可能是某些屬性，XML能其作用，CSS也能其作用，例如font-size, 此時就需要明確下歸屬。

2.3 from, to, by, values

from = “<value>“ 動畫的起始值
to = “<value>“ 指定動畫的結束值
by = “<value>“ 動畫的相對變化值
values = “<list>“ 用分號分隔的一個或多個值，可以看出是動畫的多個關鍵值點

from, to, by, values雖然屬於一個家族，但是相互之間還是有制約關系的。有以下一些規則：
a. 如果動畫的起始值與元素的默認值是一樣的，from參數可以省略。

b. （不考慮values）to,by兩個參數至少需要有一個出現。否則動畫效果沒有。to表示絕對值，by表示相對值。拿位移距離，如果from是100, to值為160則表示移動到160這個位置，但是，如果by值是160，則表示移動到100+160=260這個位置。
c. 如果to,by同時出現，則只識別to.
d. 如果to,by,values都沒設置，自然沒動畫效果。如果任意（包括from）一個屬性的值不合法，規範上說是沒有動畫效果。但是，據我測試，FireFox瀏覽器確實如此，但是Chrome特意做了寫容錯處理。例如，本來是數值的屬性，寫了個諸如a這個不合法的值，其會當作0來處理，動畫效果依然存在。
e. values可以是一個值或多值。根據我在Chrome瀏覽器下的測試，是一個值的時候是沒有動畫效果。多值時候有動畫效果。當values值設置並能識別時候，from, to, by的值都會被忽略。那values屬性是幹什麽的呢？別看名字挺大眾的，其還是有些功力的。我們實現動畫，不可能就是單純的從a位置到b位置，有時候，需要去c位置過渡下。此時，實際上有3個動畫關鍵點。而from, to/by只能駕馭兩個，此時就是values大顯身手的時候了！

// 用動畫實現一個圓點呼吸燈的效果，即opacity從1到0.2的變化
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="4">
        <animate attributeName=‘opacity‘ dur=‘2s‘ values="1;.2;1" repeatCount="indefinite"/>
    </circle>
</svg>

2.4 begin, end
begin指動畫開始的時間，看上去很簡單，實際上很復雜的，例如：beigin="3s"只是最簡單最基本的表示。

begin的定義是分號分隔的一組值，單值只是其中的情況之一。例如，beigin="3s;6s"表示的是3s之後動畫走一下，6s時候動畫再走一下（如果之前動畫沒走完，會立即停止從頭開始）。所以，如果一次動畫時間為3s, 即dur="3s"，同時沒有repeatCount屬性時候，我們可以看到動畫似乎連續執行了2次。

beigin="3s"也可以簡寫作beigin="3"， FireFox和Chrome瀏覽器都是支持的。小數也支持例如：beigin="1.5" 。如果begin屬性寫錯了一律按begin=0處理。

begin的單值除了普通value，還有下面這些類別的value：
offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

實在復雜不在細說了，有興趣的同學自己看參考資料。

end指動畫結束的時間，end與begin除了名字和字面含義不一樣，其值的種類與表意都是一樣的，就不啰嗦了。

2.5 dur
dur屬性標識了動畫的簡單持續時間。該屬性值比begin簡單多多多了，就兩種情況：常規時間值 | "indefinite"。

“常規時間值”就是3s之類的正常值；

"indefinite"指事件無限。不過，動畫時間無限，實際上就是動畫壓根不執行的意思。因此，設置為"indefinite"跟沒有dur是一個意思，與dur解析異常一個意思。

2.6 repeatCount, repeatDur
repeatCount表示動畫執行次數，可以是合法數值或者“indefinite”（無限循環）。

repeatDur定義重復動畫的總時間。可以是普通時間值或者“indefinite”（無限循環）。

2.7 fill
fill表示動畫間隙的填充方式。

支持參數有：freeze | remove. 其中remove是默認值，表示動畫結束直接回到開始的地方。

freeze“凍結”表示動畫結束後像是被凍住了，元素保持了動畫結束之後的狀態。

3.備註

參考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animate

http://tutorials.jenkov.com/svg/svg-animation.html

https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

svg動畫 animate