資訊專欄INFORMATION COLUMN
摘要：于年月日成為推薦標準。注意繪制復雜的路徑應盡可能借助設計工具，人為計算的屬性耗時耗力，也不是目前的學習重點。動畫方面，使用控制的屬性來實現動畫，這個屬性可以將繪制為虛線。
原文鏈接
為了之后產品可能的動畫需求，我們需要調研各種可行的前端動畫技術。相信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聲明：
在現代瀏覽器中，我們可以直接在HTML代碼中嵌入SVG代碼：
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關閉路徑。
注意：繪制復雜的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)
到這一步，svg path動畫的demo就基本做完了，我們可利用這個原理實現更復雜的svg path動畫，如多個path的過渡動畫，物體沿不規則path移動等等。svg技術本身還是很復雜的，短時間掌握svg有一定的難度，必要時可以借助svg動畫庫實現需要的設計效果，做到技術靈活服務于產品。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109221.html
摘要：于年月日成為推薦標準。注意繪制復雜的路徑應盡可能借助設計工具，人為計算的屬性耗時耗力，也不是目前的學習重點。動畫方面，使用控制的屬性來實現動畫，這個屬性可以將繪制為虛線。 原文鏈接 為了之后產品可能的動畫需求，我們需要調研各種可行的前端動畫技術。相信CSS3動畫和JS動畫我們平常已經接觸很多了，而SVG技術則很少用，事實上SVG也是一種強大的動畫解決方案，可以幫我們解決傳統動畫做不到的...
摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
閱讀 3610·2023-04-26 02:24
閱讀 943·2023-04-25 14:47
閱讀 2515·2021-11-24 11:16
閱讀 1733·2021-11-24 09:38
閱讀 1583·2021-11-18 10:07
閱讀 2073·2021-09-22 15:49
閱讀 1602·2019-08-30 15:55
閱讀 892·2019-08-26 13:38
