1、接上篇SVG動畫的屬性詳解

1.1 animation參數(shù)

1.1.1 attributeName

你想改變的屬性名稱，① 可以是元素直接暴露的屬性，例如，以上案例出現(xiàn)的改變x, y又或者font-size; ② 可以是CSS屬性。例如，透明度opacity.

1.1.2 attributeType

attributeType支持三個固定參數(shù)，CSS/XML/auto. 用來表明attributeName屬性值的列表。x, y以及transform就屬于XML, opacity就屬于CSS. auto為默認(rèn)值，自動判別的意思（實際上是先當(dāng)成CSS處理，如果發(fā)現(xiàn)不認(rèn)識，直接XML類別處理）。因此，如果你不確信某屬性是XML類別還是CSS類別的時候，我的建議是不設(shè)置attributeType值，直接讓瀏覽器自己去判斷，幾乎無差錯。

我想大家都有和我一樣的疑問：“既然瀏覽器醬可以自己判斷屬性類別，那這個屬性還有什么意義嗎？”可能某些屬性，XML有其作用，CSS也有其作用，例如font-size, 此時就需要明確下歸屬。

1.1.3 from to by values dur

from = ““

動畫的起始值。

to = ““

就是to的值

指定動畫的結(jié)束值。（絕對）

by=””

by最后的結(jié)束值=from的值+by的值

指定動畫的結(jié)束值（相對）

Values=””（可以存在多個）

dur = ““

完成動畫的時間

1.1.4 begin end

begin指動畫開始的時間，看上去很簡單。設(shè)個時間，延遲嘛~~實際上非也非也，上面出現(xiàn)的beigin="3s"只是最簡單最基本的表示。

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

begin的值可以是觸發(fā)事件

begin的值可以是某個動畫執(zhí)行n次之后

1.1.5 repeatCount,repeatDur

repeatCount表示動畫執(zhí)行次數(shù)，可以是合法數(shù)值或者”indefinite“（動畫循環(huán)到內(nèi)存耗盡）。

repeatDur定義重復(fù)動畫的總時間?？梢允瞧胀〞r間值或者”indefinite（動畫循環(huán)到內(nèi)存耗盡）。