[[355648]]

SVG <Animation> 動畫元素用于為SVG圖形制作動畫。動畫元素最初是在同步多媒體集成語言（SMIL）中定義的。在動畫中，必須指定屬性，運動，顏色，動畫的開始時間和動畫的持續時間的開始和結束值。

可以對SVG圖像中的形狀進行動畫處理。有幾種不同的動畫SVG形狀的方法。

一、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>內部嵌套。正是這個元素使矩形動畫化。

二、動畫選項概述

這些SVG動畫元素中的每一個都設置或設置SVG形狀的不同方面的動畫。這些動畫元素將在本文的其余部分中進行說明。

1. set

該set元素是SVG動畫元素中最簡單的元素。在經過特定時間間隔后，它只是將屬性設置為特定值。因此，形狀不會連續進行動畫處理，而只是更改屬性值一次。

這是一個<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="5s"  /> 
 
</circle> 
</svg> 

注:

<set>元素在特定時間設置屬性的值。要設置的屬性名稱在attributeName屬性中指定。將其設置為的值在to屬性中指定。設置屬性值的時間在begin屬性中指定。

運行效果：（r在5秒鐘后將屬性設置為100）：

2. attributeType

可以設置形狀的CSS屬性的動畫。如果這樣做，則需要將attributeType設置為CSS。如果不提供attributeType屬性，則瀏覽器將嘗試猜測要制作動畫的屬性是XML屬性還是CSS屬性。

3. animate

animate元素用于為SVG形狀的屬性設置動畫。可以將animate元素嵌套在要應用的形狀內。

示例

<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”屬性）設置為值479（“to”屬性）的動畫。動畫從0秒開始（“begin”屬性），持續時間為5秒（“dur”屬性）。

動畫完成后，動畫屬性將設置回其原始值（fill=“remove”屬性設置）。如果希望動畫屬性保持動畫的“到”值(to-value)，請將“fill ”屬性設定為“freeze”。動畫無限期重復（“repeatCount”屬性）。

4. animateTransform

<Animate>元素不能做到這一點，<AnimateTransform>元素可以為形狀的Transform屬性設置動畫。

例：

<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> 

運行效果：

解析：

例中對嵌套transform其中的<rect>元素的屬性進行動畫處理。該type屬性設置為rotate（旋轉變換功能），表示動畫變換將是旋轉。在from和to屬性設定的參數進行動畫，并傳遞給rotate函數。本示例圍繞點100,100從0度旋轉到360度。

使正方形的比例動畫化。

示例

<svg width="500" height="200"> 
            <rect x="20" y="20" width="40" height="40" style="stroke: #FF0000; fill: none;"> 
                <animateTransform attributeName="transform" type="scale" from="1 1" to="2 3" begin="0s" dur="10s" repeatCount="indefinite"> 
        </animateTransform> 
            </rect> 
</svg> 

運行效果：

注：

from 和 to 屬性包含通常作為參數傳遞給scale()轉換函數的值。

三、總結

本文基于HTML基礎，介紹了SVG中<Animation>元素。對每一種動畫的效果進行詳細講解。每一種動畫中都采用靜態圖解析的方式來呈現動態運用的效果。通過具體的案例分析，能夠讓讀者更好的理解。

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

代碼很簡單，希望對你學習有幫助。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。