svg系列：2. svg path實現圖片路徑動畫

原文連接

爲了以後產品可能的動畫需求，咱們須要調研各類可行的前端動畫技術。相信CSS3動畫和JS動畫咱們日常已經接觸不少了，而SVG技術則不多用，事實上SVG也是一種強大的動畫解決方案，能夠幫咱們解決傳統動畫作不到的技術痛點。

SVG簡介

• SVG(Scalable Vector Graphics)，可縮放矢量圖形，具備放大縮小不失真的特性，能夠用來建立矢量圖。
• SVG1.1 於 2003 年 1 月 14 日成爲 W3C 推薦標準。
• SVG本質上是用XML語言描述的，因此它能夠和DOM結構同樣被CSS和JS編程控制，經過連續地改變SVG圖形屬性就能夠建立SVG動畫。
• SVG可用文本編輯器編輯，也可經過Adobe Illustator等專業編輯軟件處理。

SVG文件可單獨使用，使用XML定義幷包含DTD聲明：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

在現代瀏覽器中，咱們能夠直接在HTML代碼中嵌入SVG代碼：

<div class="svg-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </svg>
</div>

SVG path

SVG能夠繪製許多形狀，這裏不一一介紹，重點介紹下svg path，它是svg形狀中功能最爲強大的一個，也是咱們前端動畫會常常用到的形狀。

顧名思義，path定義的是一組路徑，你能夠用path元素繪製矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其餘的形狀，例如貝塞爾曲線、2次曲線等曲線。path元素的形狀是經過它的 d 屬性決定的，d屬性中一般以字母爲命令，以下所示：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

如下path 定義了一個三角形：它開始於位置150 0，到達位置75 200，而後從那裏開始到225 200，最後在150 0關閉路徑。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

注意：繪製複雜的path路徑應儘量藉助設計工具，人爲計算path的d屬性耗時耗力，也不是目前的學習重點。

path的其餘經常使用屬性有：

• stroke 定義路徑顏色
• stroke-width 定義路徑寬度，單位像素
• stroke-dasharray 用於建立虛線
• fill 定義path閉合區域的填充顏色

基於svg path實現圖片路徑動畫

點擊這裏查看demo：

WPS Logo Demo

這個效果的實現並不複雜，首先咱們須要wps logo的svg資源，能夠藉助photoshop 和 Adobe Illustrator 從圖片中生成svg路徑。

第一步，使用ps魔棒工具去除白色背景，並選中路徑，而後右鍵，創建工做路徑：

點擊菜單-> 文件 -> 導出 -> 導出路徑到ai ：

在ai中選中路徑，存儲爲svg格式。而後在編輯器中打開svg便可查看到path的d屬性了！

以後，在代碼裏建立svg圖形，並指定其stroke-width等屬性。

動畫方面，使用css animation控制path的stroke-dasharray屬性來實現動畫，這個屬性能夠將path繪製爲虛線。

如 stroke-dasharray: 10px 20px; 就定義了實線的長度是10px，空白的長度是20px，以下圖所示：

利用這個原理，咱們將實線的長度從0逐漸變爲path總長度，將空白的長度逐漸變爲0，就能夠實現相似「繪圖」的效果了~

#wps-logo-path {
  animation: wpsLogo 3s ease-in-out forwards;
}

@keyframes wpsLogo {
    0% {
        stroke-dasharray: 0 1078px;
    }
    100% {
        stroke-dasharray: 1078px 0;
    }
}

path的總長度能夠這樣計算 $('#wpsLogoPath')[0].getTotalLength()

動畫過程當中，能夠設置監聽，在動畫的不一樣階段執行不一樣的鉤子函數：

document.addEventListener('webkitAnimationEnd', function(e) {

}

代碼中，咱們還定義了線性漸變，用來填充path閉合區域內的背景值，fill: url(#wpslinear)

<defs>
  <linearGradient id="wpslinear" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#FB5A43"/>
    <stop offset="100%" stop-color="#FD3258"/>
  </linearGradient>
</defs>

到這一步，svg path動畫的demo就基本作完了，咱們可利用這個原理實現更復雜的svg path動畫，如多個path的過渡動畫，物體沿不規則path移動等等。svg技術自己仍是很複雜的，短期掌握svg有必定的難度，必要時能夠藉助svg動畫庫實現須要的設計效果，作到技術靈活服務於產品。