svg系列：2. svg path實現(xiàn)圖片路徑動畫

zhangyucha0 發(fā)布于2019-08-30 15:43 / 1506人閱讀

摘要：于年月日成為推薦標(biāo)準(zhǔn)。注意繪制復(fù)雜的路徑應(yīng)盡可能借助設(shè)計工具，人為計算的屬性耗時耗力，也不是目前的學(xué)習(xí)重點。動畫方面，使用控制的屬性來實現(xiàn)動畫，這個屬性可以將繪制為虛線。

原文鏈接

為了之后產(chǎn)品可能的動畫需求，我們需要調(diào)研各種可行的前端動畫技術(shù)。相信CSS3動畫和JS動畫我們平常已經(jīng)接觸很多了，而SVG技術(shù)則很少用，事實上SVG也是一種強(qiáng)大的動畫解決方案，可以幫我們解決傳統(tǒng)動畫做不到的技術(shù)痛點。

SVG簡介

SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創(chuàng)建矢量圖。

SVG1.1 于 2003 年 1 月 14 日成為 W3C 推薦標(biāo)準(zhǔn)。

SVG本質(zhì)上是用XML語言描述的，所以它可以和DOM結(jié)構(gòu)一樣被CSS和JS編程控制，通過連續(xù)地改變SVG圖形屬性就可以創(chuàng)建SVG動畫。

SVG可用文本編輯器編輯，也可通過Adobe Illustator等專業(yè)編輯軟件處理。

SVG文件可多帶帶使用，使用XML定義并包含DTD聲明：

在現(xiàn)代瀏覽器中，我們可以直接在HTML代碼中嵌入SVG代碼：

SVG path

SVG可以繪制許多形狀，這里不一一介紹，重點介紹下svg path，它是svg形狀中功能最為強(qiáng)大的一個，也是我們前端動畫會經(jīng)常用到的形狀。

顧名思義，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，到達(dá)位置75 200，然后從那里開始到225 200，最后在150 0關(guān)閉路徑。

注意：繪制復(fù)雜的path路徑應(yīng)盡可能借助設(shè)計工具，人為計算path的d屬性耗時耗力，也不是目前的學(xué)習(xí)重點。

path的其他常用屬性有：

stroke 定義路徑顏色

stroke-width 定義路徑寬度，單位像素

stroke-dasharray 用于創(chuàng)建虛線

fill 定義path閉合區(qū)域的填充顏色

基于svg path實現(xiàn)圖片路徑動畫

點擊這里查看demo：

WPS Logo Demo

這個效果的實現(xiàn)并不復(fù)雜，首先我們需要wps logo的svg資源，可以借助photoshop 和 Adobe Illustrator 從圖片中生成svg路徑。

第一步，使用ps魔棒工具去除白色背景，并選中路徑，然后右鍵，建立工作路徑：

點擊菜單-> 文件 -> 導(dǎo)出 -> 導(dǎo)出路徑到ai ：

在ai中選中路徑，存儲為svg格式。然后在編輯器中打開svg即可查看到path的d屬性了！

之后，在代碼里創(chuàng)建svg圖形，并指定其stroke-width等屬性。

動畫方面，使用css animation控制path的stroke-dasharray屬性來實現(xiàn)動畫，這個屬性可以將path繪制為虛線。

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

利用這個原理，我們將實線的長度從0逐漸變?yōu)閜ath總長度，將空白的長度逐漸變?yōu)?，就可以實現(xiàn)類似“繪圖”的效果了~

#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()

動畫過程中，可以設(shè)置監(jiān)聽，在動畫的不同階段執(zhí)行不同的鉤子函數(shù)：

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

}

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

到這一步，svg path動畫的demo就基本做完了，我們可利用這個原理實現(xiàn)更復(fù)雜的svg path動畫，如多個path的過渡動畫，物體沿不規(guī)則path移動等等。svg技術(shù)本身還是很復(fù)雜的，短時間掌握svg有一定的難度，必要時可以借助svg動畫庫實現(xiàn)需要的設(shè)計效果，做到技術(shù)靈活服務(wù)于產(chǎn)品。