寫在前面：
動畫是最直觀的表達方式，比文字能夠給人更大的衝擊性。也是人們最容易查看、記憶最深刻，最過目不忘的友好表達方式，從本篇文章開始，接下來還有兩篇講述動畫，共計三篇動畫文檔，滿足動畫你對動畫渴求。
動畫元素放在形狀元素的內部，用來定義一個元素的某個屬性如何踩着時點改變。在指定持續時間裏，屬性從開始值變成結束值。
比如，有一個需求，是把一個球移動到另一端，移動方式可隨意指定，用<animate>標籤，可以很容易的做到。我們可以添加了一個<animate>元素到<circle>元素的內部。然後通過控制其中的attributeName、from、to、dur等屬性來實現。
<animate> 比較重要的屬性如下：
-
attributeName
需要動畫的屬性名稱 -
from
屬性的初始值 -
to
屬性的終止值 -
values
values的兩個值時，與from和to的寫法效果一致。
<rect width="10" height="10" x="20" y="20"><animate attributeName="x" values="10;30" dur="4s" repeatCount="indefinite"/></rect><rect width="10" height="10" x="20" y="40"><animate attributeName="x" from="10" to="30" dur="4s" repeatCount="indefinite"/></rect>
但values更多值時，可達到循環往復的效果，比如三個值，就能達到這總循環往復的效果。
通過控制rx屬性，可以使方框變圓，再變回方框
<rect width="10" height="10"><animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" /></rect>
直接展示效果又被吞了，這裏放視頻
animate方框變圓再變方框
-
dur
動畫的時間
如果你想要讓該元素的更多屬性具有動畫效果，只要添加更多的<animate> 元素到該元素內部即可。
根據attributeName的屬性不同，from和to的值也要對應改變。
一般dur是動畫的持續時間，我們使用indefinite來表示永動，就是永遠執行。
原文：
Animating attributes of an element
The following example animates the cx attribute of a circle. To do so, we add an <animate> element inside the <circle> element. The important attributes for <animate> are:
-
attributeName
-
The name of the attribute to animate.
-
from
-
The initial value of the attribute.
-
to
-
The final value.
-
dur
-
The duration of the animation (for example, write '5s' for 5 seconds).
If you want to animate more attributes inside the same element, just add more <animate> elements.
先看效果
動畫專題之標籤animate
爲防止效果被吞，我又進行了錄屏
在這個效果中，我實現了多種方式，進行了簡單的思維發散
-
填充色改變
原地不動的圓，fill的顏色由紅色變爲白色；
-
控件X軸距離改變
控制X軸的長短，使控件水平移動；
-
控件Y軸距離改變，同時改變描邊的寬度
①，控制Y軸的長短，使控件垂直移動；
②，同時控制stroke-width描邊的寬度；
-
控件X/Y軸距離同時改變，並同時改變原型控件的半徑
①，同時控制控件X/Y軸的距離，使控件斜線移動；
②，同時縮小了半徑；
結論與思考：
-
未達到的邊框顏色並沒有變色，我設置了改變stroke屬性，但沒有看到效果
-
另外，如果是text標籤要添加動畫呢？