SVG 動畫（animate、animateTransform、animateMotion）

原文：https://blog.csdn.net/chy555chy/article/details/53535581

參考 MDN開發文檔 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

SMIL

As of Chrome 45.0, SMIL animations are deprecated in favor of CSS animations and Web animations.

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduced support for animating SVG using Synchronized Multimedia Integration Language (SMIL). SMIL allows you to:

• animate the numeric attributes of an element (x, y, …)
• animate transform attributes (translation or rotation)
• animate color attributes
• follow a motion path

This is done adding an SVG element like <animate> inside the SVG element to animate. Below are examples for the four different ways.

自Chrome 45.0起，SMIL動畫就被廢棄了，取而代之的是CSS動畫和Web動畫。

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 介紹使用同步多媒體集成語言(SMIL)支持SVG動畫。SMIL容許：

• 將元素的數值屬性（x， y， …）做爲動畫
• 將變換屬性（translation，rotation）做爲動畫
• 將顏色屬性做爲動畫
• 按照運動軌跡移動

經過添加SVG動畫元素，好比<animate>到SVG元素內部來實現動畫，下面的例子演示了四種不一樣的動畫方式。

animate

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.

下面的例子將圓的cx屬性做爲動畫。爲了實現這種效果，咱們添加了一個<animate>元素到<circle>元素的內部。<animate> 比較重要的屬性以下：

• attributeName 
  須要動畫的屬性名稱
• from 
  屬性的初始值
• to 
  終止值
• dur 
  動畫的時間

若是你想要讓該元素的更多屬性具備動畫效果，只要添加更多的<animate> 元素到該元素內部便可。

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" /> </circle> </svg>

animateTransform

The <animateTransform> element let you animate transform attributes. This new element is necessary because we are not animating a simple attribute like x which is just a number. Rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. In the example below, we animate the center of the rotation and the angle.

<animateTransform>元素能夠執行變換屬性的動畫。這個新的元素是必要的，由於咱們不能用一個簡單的數值的屬性就像x來製做這種動畫。旋轉屬性就像：rotation(theta, x, y)，theta是一個角度，x和y是絕對座標。在下面這個例子中咱們繞着旋轉中心旋轉必定的角度。

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> <rect x="0" y="0" width="200" height="200" fill="yellow" stroke="red" stroke-width="1" /> <rect x="20" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"> <!-- Rotate from 0 to 360 degrees, and move from 60 to 100 in the x direction. --> <!-- Keep doing this until the drawing no longer exists. --> <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="20 60 60" to="360 100 60" repeatCount="indefinite" /> </rect> </svg>

animateMotion

The <animateMotion> element lets you animate an element position and rotation according to a path. The path is defined the same way as in <path>. You can set the attribute to define whether the object rotates following the tangent of the path.

<animateMotion>元素讓你能夠實現一個路徑動畫，而且根據路徑進行旋轉。路徑使用和<path>相同的方式進行定義。你能夠設置屬性來定義對象是否根據路徑的正切角度來旋轉。

Example 1: Linear motion

In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the <animateMotion> element. In this case, we’re establishing a path consisting of a MoveTo command to establish the starting point for the animation, then the Horizontal-line command to move the circle 300 pixels to the right, followed by the Z command, which closes the path, establishing a loop back to the beginning. By setting the value of the repeatCount attribute to indefinite, we indicate that the animation should loop forever, as long as the SVG image exists.

在這個例子中，一個藍色的圓在黑盒的左右邊緣之間來回的反彈，無限地重複着一樣的動做。該動畫是由<animateMotion>元素控制的。在這種狀況下咱們創建了一個路徑，由MoveTo命令來建立動畫的起始點，而後Horizontal-line命令來將圓向右移動300像素到右邊，接着使用Z命令，關閉路徑，創建一個環迴路徑。經過設置repeatCount屬性爲indefinite，咱們能夠指定只要SVG圖片存在的話，動畫是否永久循環。

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" fill="yellow" stroke-width="1" stroke="red" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /> </circle> </svg>

Example 2: Curved motion

Same example as before with a curved path and following the direction of the path.

和上面差很少的例子，只不過如今是沿着曲線和路徑方向運動。

<svg width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" fill="yellow" stroke-width="1" stroke="red" /> <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="3s" repeatCount="indefinite" rotate="auto"> </rect> </svg>