svg動畫 animate

最近使用到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/