SVG <Animation> 動畫元素用于為SVG圖形制作動畫。動畫元素最初是在同步多媒體集成語言（SMIL）中定義的。在動畫中，必須指定屬性，運(yùn)動，顏色，動畫的開始時間和動畫的持續(xù)時間的開始和結(jié)束值。
可以對SVG圖像中的形狀進(jìn)行動畫處理。有幾種不同的動畫SVG形狀的方法。在本文中，我將介紹各種可能性。
這是一個簡單的SVG動畫示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 60 60" repeatCount="indefinite" /> </rect> </svg>測試看看?/?
注意<rect>元素如何在元素 <animateTransform>內(nèi)部嵌套。正是這個元素使矩形動畫化。
這是生成的SVG動畫：
通過操縱形狀隨時間變化的屬性來完成動畫制作。使用5個SVG動畫元素中的一個或多個完成此操作：
<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>
這些SVG動畫元素中的每一個都設(shè)置或設(shè)置SVG形狀的不同方面的動畫。這些動畫元素將在本文的其余部分中進(jìn)行說明。
該set元素是SVG動畫元素中最簡單的元素。在經(jīng)過特定時間間隔后，它只是將屬性設(shè)置為特定值。因此，形狀不會連續(xù)進(jìn)行動畫處理，而只是更改屬性值一次。
這是一個<set>元素示例：
<svg width="500" height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;"> <set attributeName="r" attributeType="XML" to="100" begin="0s" /> </circle></svg>測試看看?/?
注意<set>元素嵌套在circle 元素內(nèi)部。這就是將<set>元素應(yīng)用于形狀的方式-通過將其嵌套在要應(yīng)用形狀的SVG元素內(nèi)。
<set>元素在特定時間設(shè)置屬性的值。 要設(shè)置的屬性名稱在attributeName屬性中指定。 將其設(shè)置為的值在to屬性中指定。 設(shè)置屬性值的時間在begin屬性中指定。
上面的示例r在5秒鐘后將屬性設(shè)置為100。運(yùn)行后圖像效果：
前面的示例在<set>元素中也有一個attributeType屬性。 該值已設(shè)置為XML。 這是因為在示例中要為其設(shè)置值的屬性(r屬性)是SVG Circle元素的屬性。 因為SVG元素是XML元素，所以SVG屬性也是XML屬性。
您還可以設(shè)置形狀的CSS屬性的動畫。如果這樣做，則需要將attributeType設(shè)置為CSS。如果不提供attributeType屬性，則瀏覽器將嘗試猜測要制作動畫的屬性是XML屬性還是CSS屬性。
animate元素用于為SVG形狀的屬性設(shè)置動畫。您可以將animate元素嵌套在要應(yīng)用的形狀內(nèi)。這是一個示例：
<svg width="500" height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;"> <animate attributeName="cx" attributeType="XML" from="30" to="470" begin="0s" dur="5s" fill="remove" repeatCount="indefinite"/> </circle></svg>測試看看?/?
此示例將<circle>元素的cx屬性從值30（“from”屬性）設(shè)置為值479（“to”屬性）的動畫。動畫從0秒開始（“begin”屬性），持續(xù)時間為5秒（“dur”屬性）。
動畫完成后，動畫屬性將設(shè)置回其原始值（fill=“remove”屬性設(shè)置）。如果希望動畫屬性保持動畫的“到”值(to-value)，請將“fill ”屬性設(shè)定為“freeze”。動畫無限期重復(fù)（“repeatCount”屬性）。
這是生成的動畫：
<AnimateTransform>元素可以為形狀的Transform屬性設(shè)置動畫。 <Animate>元素不能做到這一點。
這是一個示例：
<svg width="500" height="100"><rect x="20" y="20" width="100" height="40" style="stroke: #ff00ff; fill:none;" > <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatCount="indefinite" /> </rect></svg>測試看看?/?
本<animateTransform>示例對嵌套在transform其中的<rect>元素的屬性進(jìn)行動畫處理。該type屬性設(shè)置為rotate（旋轉(zhuǎn)變換功能），表示動畫變換將是旋轉(zhuǎn)。在from和to屬性設(shè)定的參數(shù)進(jìn)行動畫，并傳遞給rotate函數(shù)。本示例圍繞點100,100從0度旋轉(zhuǎn)到360度。
這是使正方形的比例動畫化的示例：
<svg width="500" height="200"> <rect x="20" y="20" width="40" height="40" style="stroke: #ff00ff; fill: none;" > <animateTransform attributeName="transform" type="scale" from="1 1" to="2 3" begin="0s" dur="10s" repeatCount="indefinite" ></animateTransform> </rect> </svg>測試看看?/?
再次注意，from 和 to 屬性包含通常作為參數(shù)傳遞給scale()轉(zhuǎn)換函數(shù)的值。
這是生成的動畫：
<animateMotion>元素可以沿路徑動畫的形狀的運(yùn)動。它也可以旋轉(zhuǎn)形狀以匹配路徑的坡度，就像在山上行駛的汽車一樣。這是一個示例：
<svg width="500" height="150"> <path d="M10,50 q60,50 100,0 q60,-50 100,0" style="stroke: #000000; fill: none;" ></path> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" ></animateMotion> </rect> </svg>測試看看?/?
path在<animateMotion>元素 的屬性中指定沿矩形動畫的路徑。該path屬性使用與path元素相同的語法。
這也是顯示了路徑的結(jié)果動畫，因此您可以更好地跟隨運(yùn)動。
為了旋轉(zhuǎn)正方形以使其與路徑的斜率對齊，請將<animateMotion>元素的 rotate屬性設(shè)置為auto。這是一個示例：
<svg width="500" height="150"> <path d="M10,50 q60,50 100,0 q60,-50 100,0" style="stroke: #000000; fill: none;"></path> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" ></animateMotion> </rect> </svg>測試看看?/?
這是生成的動畫。注意正方形的旋轉(zhuǎn)如何變化以適合路徑。
您還可以將rotate屬性設(shè)置為特定的值，例如20或30等。這樣可以在整個動畫中使形狀旋轉(zhuǎn)該角度數(shù)。
定義SVG動畫時，可以指定動畫的開始時間和持續(xù)時間。指定時，您可以在不同的時間單位之間進(jìn)行選擇。的時間單位內(nèi)的通常指定的begin，dur 和end各種動畫元素的屬性。
在這些屬性中，您可以指定一個數(shù)字，后跟一個時間單位，如本文示例中所述。例如5s5秒。以下是您可以使用的時間單位列表：
| 時間單位 | 描述 |
|---|---|
| h | 小時 |
| min | 分鐘 |
| s | 秒 |
| ms | 毫秒 |
您還可以以包含小時，分鐘和秒的時間格式指定時間。格式如下：
hh:mm:ss
這是一個示例：
1:30:45
此示例指定1小時30分45秒的時間（對于動畫來說這當(dāng)然是很長的時間）。
您可以將一個動畫的開始同步到另一個動畫的結(jié)束。您是這樣的：
<svg width="500" height="100"> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animate id="one" attributeName="x" attributeType="XML" from="0" to="400" begin="0s" dur="10s" fill="freeze" ></animate> <animate attributeName="y" attributeType="XML" from="0" to="50" begin="one.end" dur="10s" fill="freeze" ></animate> </rect> </svg>測試看看?/?
這是生成的動畫：
第一個動畫的id屬性設(shè)置為one。
第二個動畫通過其begin屬性引用第一個動畫。該begin屬性值設(shè)置為one.end，意味著該動畫應(yīng)在ID one結(jié)束的動畫結(jié)束時開始。
當(dāng)另一個動畫開始或結(jié)束時， 可以使用id.begin或id.end啟動動畫。而不是id使用動畫元素的ID進(jìn)行同步。
您還可以指定到另一個動畫的開始或結(jié)束時間的偏移量，如下所示：
one.begin+10s one.end+5s
另外，您可以在動畫end屬性中指定一個明確的結(jié)束時間。這不會替換dur屬性。它所做的只是在動畫中添加另一個可能的結(jié)尾，因此以先發(fā)生的為準(zhǔn)。這是一個示例：
<animate attributeName="y" attributeType="XML" from="0" to="50" begin="one.begin+3s" dur="10s" end="one.end" fill="freeze" />
該動畫的時長為10秒，或者ID one結(jié)束的動畫結(jié)束時停止，以先到者為準(zhǔn)。
您可以在動畫元素內(nèi)使用兩個屬性，以重復(fù)動畫。
第一個屬性是repeatCount屬性。在此屬性內(nèi)，您可以設(shè)置一個數(shù)字，該數(shù)字將使動畫重復(fù)該次數(shù)，或者indefinite使該動畫保持運(yùn)行而不會停止的值。
第二個屬性是，repeatDur它指定要重復(fù)播放動畫的持續(xù)時間。您也可以indefinite在repeatDur屬性內(nèi)使用值，其效果與在屬性內(nèi)使用值相同 repeatCount。
這是兩個示例：
<animate attributeName="y" attributeType="XML" from="0" to="50" begin="one.begin+3s" dur="10s" repeatCount="3" fill="freeze" />
<animate attributeName="y" attributeType="XML" from="0" to="50" begin="one.begin+3s" dur="10s" repeatDur="30s" fill="freeze" />
您可以通過<animation>在元素內(nèi)列出多個動畫來組合動畫。您已經(jīng)看到了，但這是另一個示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" width="40" height="20" style="stroke: #000000; fill: none;"> <animate attributeName="x" attributeType="XML" from="10" to="400" begin="0s" dur="10s" repeatCount="indefinite" ></animate> <animate attributeName="y" attributeType="XML" from="10" to="100" begin="0s" dur="10s" fill="freeze" repeatCount="indefinite" ></animate> </rect> </svg>測試看看?/?
本示例有兩個動畫，每個動畫為矩形的x和y屬性設(shè)置動畫。這是生成的動畫：
當(dāng)組合<animateTransform>元素時，默認(rèn)的行為是第二個動畫抵消第一個動畫。但是，您可以通過向兩個<animateTransform>元素添加屬性additive和值sum來組合轉(zhuǎn)換動畫。這是一個示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="10" y="10" width="40" height="20" style="stroke: #000000; fill: none;"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" begin="0s" dur="10s" repeatCount="indefinite" additive="sum" ></animateTransform> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 30 20" to="360 30 20" begin="0s" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum" ></animateTransform> </svg>測試看看?/?
這是縮放和旋轉(zhuǎn)矩形的結(jié)果動畫：