建站
咨詢
售后
建站咨詢
新聞中心
通常我們說的 Web 動畫，包含了三大類。
紅河哈尼網站制作公司哪家好，找成都創(chuàng)新互聯公司！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、成都響應式網站建設等網站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯公司于2013年創(chuàng)立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創(chuàng)新互聯公司。
- CSS3 動畫
- javascript 動畫(canvas)
- html 動畫(SVG)
個人認為 3 種動畫各有優(yōu)劣，實際應用中根據掌握情況作出取舍，本文討論的是我認為 SVG 中在實際項目中非常有應用價值 SVG 線條動畫。
舉個栗子
SVG 線條動畫，在一些特定的場合下可以解決使用 CSS 無法完成的動畫。尤其是在進度條方面，看看最近項目里的一個小需求，一個這種形狀的進度條：
把里面的進度條單獨拿出來，也就是需要實現這樣一個效果：
腦洞大開一下，使用 CSS3 如何實現這樣一個進度條呢。
CSS3 是可以做到的，就是很麻煩。但是如果采用 SVG 的話，迎刃而解。
See the Pen 不規(guī)則進度條 by Chokcoco (@Chokcoco) on CodePen.
我們假定你在閱讀本文的時候有了一定的 SVG 基礎，上面代碼看看就懂了，好了，本文到此結束。
好吧，還是稍微解釋下，上面進度條的主要 SVG 代碼如下：
SVG 為何
可縮放矢量圖形，即SVG，是W3C XML的分枝語言之一，用于標記可縮放的矢量圖形。(摘自MDN[1])
上面代碼中，先談談 svg 標簽：
- version：表示
- xmlns：http://www.w3.org/2000/svg 固定值
- xmlns:xlink：http://www.w3.org/1999/xlink 固定值
- xml:space：preserve 固定值，上述三個值固定，表示命名空間，當數據單獨存在svg文件內時，這3個值不能省略
- class：就是我們熟悉的 class
- width | height：定義 svg 畫布的大小
- viewbox：定義了畫布上可以顯示的區(qū)域，當 viewBox 的大小和 svg 不同時，viewBox 在屏幕上的顯示會縮放至 svg 同等大?。〞簳r可以不用理解）
有了 svg 標簽，我們就可以愉快的在內部添加 SVG 圖形了，上面，我在 svg 中定義了兩個 polyline 標簽。
SVG 基本形狀
polyline：是SVG的一個基本形狀，用來創(chuàng)建一系列直線連接多個點。
其實，polyline 是一個比較不常用的形狀，比較常用的是path，rect，circle 等。這里我使用 polyline 的原因是需要使用`stroke-linejoin`[2]和 `stroke-linecap`[3]屬性，在線段連接處創(chuàng)建圓滑過渡角。
SVG 中定義了一些基本形狀[4]：
SVG 線條動畫
好，終于到本文的重點了。
上面，我們給兩個 polyline 都設置了 class，SVG 圖形的一個好處就是部分屬性樣式可以使用 CSS 的方式書寫，更重要的是可以配合 CSS 動畫一起使用。
上面，主要的 CSS 代碼：
- .g-rect-path{
- fill: none;
- stroke-width:10;
- stroke:#d3dce6;
- stroke-linejoin:round;
- stroke-linecap:round;
- }
- .g-rect-fill{
- fill: none;
- stroke-width:10;
- stroke:#ff7700;
- stroke-linejoin:round;
- stroke-linecap:round;
- stroke-dasharray: 0, 1370;
- stroke-dashoffset: 0;
- animation: lineMove 2s ease-out infinite;
- }
- @keyframes lineMove {
- 0%{
- stroke-dasharray: 0, 1350;
- }
- 100%{
- stroke-dasharray: 1350, 1350;
- }
- }
這是什么 CSS?怎么除了 animation 全都不認識?
莫慌，其實很多和 CSS 對比一下非常好理解，只是換了個名字：
- fill：類比 css 中的 background-color，給 svg 圖形填充顏色;
- stroke-width：類比 css 中的 border-width，給 svg 圖形設定邊框寬度;
- stroke：類比 css 中的 border-color，給 svg 圖形設定邊框顏色;
- stroke-linejoin | stroke-linecap：上文稍微提到過，設定線段連接處的樣式[5];
- stroke-dasharray：值是一組數組，沒數量上限，每個數字交替表示劃線與間隔的寬度;
- stroke-dashoffset：則是虛線的偏移量
重點講講能夠實現線條動畫的關鍵屬性 stroke-dasharray 。
上面，填充進度條，使用了下面這個動畫 ：
- @keyframes lineMove {
- 0%{
- stroke-dasharray: 0, 1350;
- }
- 100%{
- stroke-dasharray: 1350, 1350;
- }
- }
stroke-dasharray: 0, 1350;，表示線框短劃線和缺口的長度分別為 0 和 1350，所以一開始整個圖形都是被缺口占據，所以是在視覺效果上長度為 0。
然后過渡到 stroke-dasharray: 1350, 1350，表示線框短劃線和缺口的長度分別為 1350 和 1350，因為整個圖形的長度就是 1350，所以整個進度條會被慢慢填充滿。
掌握了這個技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不錯的交互場景：
SVG 線條動畫實現按鈕交互
SVG 線條動畫實現圓形進度條
各類按鈕效果
多 SVG 圖形線條動畫配合
之前我司一個 h5 里面應用過的，多SVG 圖形線條動畫配合，可以制作一些比較酷炫的動畫，很有科技感。
本文到此結束，我在我的 Github 上，使用 SVG 實現了一些圖形 --SVG奇思妙想[6]，Demo可以戳這里[7]。
下篇文章將會詳述非規(guī)則圖形，如何使用 PS + AI 生成 path 路徑，實現 SVG 動畫，放個 Demo，敬請期待。
本文標題：【Web動畫】SVG線條動畫
鏈接分享：http://www.5511xx.com/article/dpjdegs.html
