SVG 動畫

林暉發表於2019-03-03
SVG動畫

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

實現一個購物袋的 loading 動效

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

SVG 動畫
其中旋轉通過 CSS 來完成，但是旋轉之後圓弧縮短變成笑臉的嘴巴需要藉助 SVG 來實現。

步驟一： 宣告 SVG 視窗

<svg width="100" height=“100”></svg>
複製程式碼

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

閱讀器會設定一個預設的座標系統，見下圖：左上角為原點，其中水平（x）座標向右遞增，垂直（y）座標向下遞增。在沒有指定的情況下，所有數值的預設單位都是畫素。如下圖

SVG 動畫

步驟二： 繪製購物袋

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

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

SVG 動畫
終點的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 分別用來設定描邊色和描邊的寬度。

SVG 動畫

步驟三： 繪製眼睛

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

SVG 動畫

<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 一起用來實現動效...

SVG 動畫

步驟五： 給嘴巴部分新增動效

@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% 的時間保持一個停留狀態。

SVG 動畫

給眼睛新增動畫

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

<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：指定一個外部定義的路徑

SVG 動畫

步驟7

將不同部位的動畫組合到一起

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

SVG 動畫

小結

SVG 在網頁中的角色更像是類似圖片一樣的媒體物件，其動畫也常常和 CSS 有關聯，除了微軟系的瀏覽器不支援之外，其相容性還是相當可觀的。在平時工作過程中，向量圖示的動畫、軌跡動畫特別適合使用 SVG 來實現。

相關文章