SVG 動畫

CSS3 動畫已經很強大，可是有些時候像是用一些靈活簡單的效果。使用css的話代碼並非很精簡，處理較爲複雜。配合 SVG的話，可讓 Web 動效有更多的可能性。

實現一個購物袋的 loading 動效

以一個購物袋的 loading 動效爲示例，一塊兒來熟悉上手 SVG 動畫。

其中旋轉經過 CSS 來完成，可是旋轉以後圓弧縮短變成笑臉的嘴巴須要藉助 SVG 來實現。

步驟一： 聲明 SVG 視窗

<svg width="100" height=「100」></svg>
複製代碼

指定一個寬高都爲 100 像素的區域，width="100" 和 width="100px" 是等價的，固然也可使用其餘的合法單位，例如 cm、mm、em 等。

閱讀器會設置一個默認的座標系統，見下圖：左上角爲原點，其中水平（x）座標向右遞增，垂直（y）座標向下遞增。在沒有指定的狀況下，全部數值的默認單位都是像素。以下圖

步驟二： 繪製購物袋

購物袋由兩個部分組成，先畫下面的主體：

<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />
複製代碼

任何形狀均可以使用路徑元素畫出，描述輪廓的數據放在它的 d 屬性中。

1.樣式中的 fill 用來設置填充色

2.路徑數據由命令和座標構成

指令	說明
M 20 40	表示移動畫筆到 (20,40)
L 80 40	表示繪製一條線到 (80, 40)
A 10 10 90 0 1 70 100	繪製一個橢圓弧

圓弧命令以字母 A 開始，後面緊跟着 7 個參數，這 7 個參數分別用來表示： 1.橢圓的 x 半徑和 y 半徑 2.橢圓的 x 軸旋轉角度 3.圓弧的角度小於 180 度，爲 0；大於或等於 180 度，則爲 1 4.以負角度繪製爲 0，不然爲 1 5.

終點的x、y座標

接下來繪製購物袋上面的部分：

<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;」 />
複製代碼

上面的部分是一個半圓弧，一樣用路徑來畫出，固然也可使用基礎形狀來完成。

樣式中的 stoke 和 stroke-width 分別用來設置描邊色和描邊的寬度。

步驟三： 繪製眼睛

使用基礎形狀，畫兩個小圓點。四個屬性分別是位置座標、半徑和填充顏色。

<circle cx=「40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />
複製代碼

步驟四： 繪製嘴巴

<circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;」>
複製代碼

嘴巴是一段圓弧，我繪製了一個圓，而後描邊了其中的一段，而且作了一個旋轉，來讓它的角度處於正確的位置。

1.stroke-linecap：用來定義開放路徑的終結,可選 round|butt|square
2.stroke-dasharray：用來建立虛線
3.stroke-dashoffset：設置虛線位置的起始偏移值，在下一個步驟裏，它會和stroke-dasharray 一塊兒用來實現動效...

步驟五： 給嘴巴部分添加動效

@keyframes mouth {
 0% {
  transform: rotate(-80deg);
  stroke-dasharray: 60, 95;
  stroke-dashoffset: 0;
 }
 40% {
  transform: rotate(280deg);
  stroke-dasharray: 60, 95;
  stroke-dashoffset: 0;
 }
 70%, 100% {
  transform: rotate(280deg);
  stroke-dashoffset: -23;
  stroke-dasharray: 42, 95;
 }
}
複製代碼

動畫分爲兩個部分：

1.圓弧旋轉
2.旋轉以後縮短變形
在一個循環裏，最後留有 30% 的時間保持一個停留狀態。

給眼睛添加動畫

兩隻眼睛都是沿着圓弧運動 ，例如左眼，首先用一個路徑來規定它的運動軌跡：

<path id="eyeright" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" />
複製代碼

而後使用 animateMotion 來設置動畫：

<circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
 <animateMotion   dur="0.8s"   repeatCount="indefinite"   keyPoints="0;0;1;1"   keyTimes="0;0.3;0.9;1"   calcMode="linear">   <mpath xlink:href="#eyeleft"/>  </animateMotion> </circle>
複製代碼

1.dur：動畫的時間
2.repeatCount：重複次數
3.keyPoints：運動路徑的關鍵點
4.timePoints：時間的關鍵點
5.calcMode：控制動畫的運動速率的變化，discrete | linear | paced|spline 四個屬性可選
6.mpath：指定一個外部定義的路徑

步驟7

將不一樣部位的動畫組合到一塊兒

眼睛的動畫是從嘴巴旋轉完成開始，到嘴巴變形完成結束，所以和嘴巴的動畫同樣，設置了四個對應的關鍵時間點。 爲了讓銜接更順暢，眼睛的動畫開始比嘴巴變形開始稍微提早了一點點。

小結

SVG 在網頁中的角色更像是相似圖片同樣的媒體對象，其動畫也經常和 CSS 有關聯，除了微軟系的瀏覽器不支持以外，其兼容性仍是至關可觀的。在平時工做過程當中，矢量圖標的動畫、軌跡動畫特別適合使用 SVG 來實現。