日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
【W(wǎng)eb動(dòng)畫(huà)】SVG線條動(dòng)畫(huà)

 通常我們說(shuō)的 Web 動(dòng)畫(huà)，包含了三大類。

紅河哈尼網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

  • CSS3 動(dòng)畫(huà)
  • javascript 動(dòng)畫(huà)(canvas)
  • html 動(dòng)畫(huà)(SVG)

個(gè)人認(rèn)為 3 種動(dòng)畫(huà)各有優(yōu)劣，實(shí)際應(yīng)用中根據(jù)掌握情況作出取舍，本文討論的是我認(rèn)為 SVG 中在實(shí)際項(xiàng)目中非常有應(yīng)用價(jià)值 SVG 線條動(dòng)畫(huà)。

舉個(gè)栗子

SVG 線條動(dòng)畫(huà)，在一些特定的場(chǎng)合下可以解決使用 CSS 無(wú)法完成的動(dòng)畫(huà)。尤其是在進(jìn)度條方面，看看最近項(xiàng)目里的一個(gè)小需求，一個(gè)這種形狀的進(jìn)度條：

把里面的進(jìn)度條單獨(dú)拿出來(lái)，也就是需要實(shí)現(xiàn)這樣一個(gè)效果：

腦洞大開(kāi)一下，使用 CSS3 如何實(shí)現(xiàn)這樣一個(gè)進(jìn)度條呢。

CSS3 是可以做到的，就是很麻煩。但是如果采用 SVG 的話，迎刃而解。

See the Pen 不規(guī)則進(jìn)度條 by Chokcoco (@Chokcoco) on CodePen.

我們假定你在閱讀本文的時(shí)候有了一定的 SVG 基礎(chǔ)，上面代碼看看就懂了，好了，本文到此結(jié)束。

好吧，還是稍微解釋下，上面進(jìn)度條的主要 SVG 代碼如下：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.

SVG 為何

可縮放矢量圖形，即SVG，是W3C XML的分枝語(yǔ)言之一，用于標(biāo)記可縮放的矢量圖形。(摘自MDN[1])

上面代碼中，先談?wù)?svg 標(biāo)簽：

  • version：表示 的版本，目前只有 1.0，1.1 兩種
  • xmlns：http://www.w3.org/2000/svg 固定值
  • xmlns:xlink：http://www.w3.org/1999/xlink 固定值
  • xml:space：preserve 固定值，上述三個(gè)值固定，表示命名空間，當(dāng)數(shù)據(jù)單獨(dú)存在svg文件內(nèi)時(shí)，這3個(gè)值不能省略
  • class：就是我們熟悉的 class
  • width | height：定義 svg 畫(huà)布的大小
  • viewbox：定義了畫(huà)布上可以顯示的區(qū)域，當(dāng) viewBox 的大小和 svg 不同時(shí)，viewBox 在屏幕上的顯示會(huì)縮放至 svg 同等大?。〞簳r(shí)可以不用理解）

有了 svg 標(biāo)簽，我們就可以愉快的在內(nèi)部添加 SVG 圖形了，上面，我在 svg 中定義了兩個(gè) polyline 標(biāo)簽。

SVG 基本形狀

polyline：是SVG的一個(gè)基本形狀，用來(lái)創(chuàng)建一系列直線連接多個(gè)點(diǎn)。

其實(shí)，polyline 是一個(gè)比較不常用的形狀，比較常用的是path，rect，circle 等。這里我使用 polyline 的原因是需要使用`stroke-linejoin`[2]和 `stroke-linecap`[3]屬性，在線段連接處創(chuàng)建圓滑過(guò)渡角。

SVG 中定義了一些基本形狀[4]：

SVG 線條動(dòng)畫(huà)

好，終于到本文的重點(diǎn)了。

上面，我們給兩個(gè) polyline 都設(shè)置了 class，SVG 圖形的一個(gè)好處就是部分屬性樣式可以使用 CSS 的方式書(shū)寫(xiě)，更重要的是可以配合 CSS 動(dòng)畫(huà)一起使用。

上面，主要的 CSS 代碼：

 
 
 
 
    
  
  
  
  
  1. .g-rect-path{
    2. 
  
  
  
  
  2.     fill: none;
    3. 
  
  
  
  
  3.     stroke-width:10;
    4. 
  
  
  
  
  4.     stroke:#d3dce6;
    5. 
  
  
  
  
  5.     stroke-linejoin:round;
    6. 
  
  
  
  
  6.     stroke-linecap:round;
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. .g-rect-fill{
    10. 
  
  
  
  
  10.     fill: none;
    11. 
  
  
  
  
  11.     stroke-width:10;
    12. 
  
  
  
  
  12.     stroke:#ff7700;
    13. 
  
  
  
  
  13.     stroke-linejoin:round;
    14. 
  
  
  
  
  14.     stroke-linecap:round;
    15. 
  
  
  
  
  15.     stroke-dasharray: 0, 1370;
    16. 
  
  
  
  
  16.     stroke-dashoffset: 0;
    17. 
  
  
  
  
  17.     animation: lineMove 2s ease-out infinite;
    18. 
  
  
  
  
  18. }
    19. 
  
  
  
  
  19. 
  
  
  
  
  20. @keyframes lineMove {
    21. 
  
  
  
  
  21.     0%{
    22. 
  
  
  
  
  22.         stroke-dasharray: 0, 1350;
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24.     100%{
    25. 
  
  
  
  
  25.         stroke-dasharray: 1350, 1350;
    26. 
  
  
  
  
  26.     }
    27. 
  
  
  
  
  27. }
    28.

這是什么 CSS?怎么除了 animation 全都不認(rèn)識(shí)?

莫慌，其實(shí)很多和 CSS 對(duì)比一下非常好理解，只是換了個(gè)名字：

  • fill：類比 css 中的 background-color，給 svg 圖形填充顏色;
  • stroke-width：類比 css 中的 border-width，給 svg 圖形設(shè)定邊框?qū)挾?
  • stroke：類比 css 中的 border-color，給 svg 圖形設(shè)定邊框顏色;
  • stroke-linejoin | stroke-linecap：上文稍微提到過(guò)，設(shè)定線段連接處的樣式[5];
  • stroke-dasharray：值是一組數(shù)組，沒(méi)數(shù)量上限，每個(gè)數(shù)字交替表示劃線與間隔的寬度;
  • stroke-dashoffset：則是虛線的偏移量

重點(diǎn)講講能夠?qū)崿F(xiàn)線條動(dòng)畫(huà)的關(guān)鍵屬性 stroke-dasharray 。

上面，填充進(jìn)度條，使用了下面這個(gè)動(dòng)畫(huà) ：

 
 
 
 
    
  
  
  
  
  1. @keyframes lineMove {
    2. 
  
  
  
  
  2.     0%{
    3. 
  
  
  
  
  3.         stroke-dasharray: 0, 1350;
    4. 
  
  
  
  
  4.     }
    5. 
  
  
  
  
  5.     100%{
    6. 
  
  
  
  
  6.         stroke-dasharray: 1350, 1350;
    7. 
  
  
  
  
  7.     }
    8. 
  
  
  
  
  8. }
    9.

stroke-dasharray: 0, 1350;，表示線框短劃線和缺口的長(zhǎng)度分別為 0 和 1350，所以一開(kāi)始整個(gè)圖形都是被缺口占據(jù)，所以是在視覺(jué)效果上長(zhǎng)度為 0。

然后過(guò)渡到 stroke-dasharray: 1350, 1350，表示線框短劃線和缺口的長(zhǎng)度分別為 1350 和 1350，因?yàn)檎麄€(gè)圖形的長(zhǎng)度就是 1350，所以整個(gè)進(jìn)度條會(huì)被慢慢填充滿。

掌握了這個(gè)技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不錯(cuò)的交互場(chǎng)景：

SVG 線條動(dòng)畫(huà)實(shí)現(xiàn)按鈕交互

SVG 線條動(dòng)畫(huà)實(shí)現(xiàn)圓形進(jìn)度條

各類按鈕效果

多 SVG 圖形線條動(dòng)畫(huà)配合

之前我司一個(gè) h5 里面應(yīng)用過(guò)的，多SVG 圖形線條動(dòng)畫(huà)配合，可以制作一些比較酷炫的動(dòng)畫(huà)，很有科技感。

本文到此結(jié)束，我在我的 Github 上，使用 SVG 實(shí)現(xiàn)了一些圖形 --SVG奇思妙想[6]，Demo可以戳這里[7]。

下篇文章將會(huì)詳述非規(guī)則圖形，如何使用 PS + AI 生成 path 路徑，實(shí)現(xiàn) SVG 動(dòng)畫(huà)，放個(gè) Demo，敬請(qǐng)期待。


分享名稱：【W(wǎng)eb動(dòng)畫(huà)】SVG線條動(dòng)畫(huà)
當(dāng)前網(wǎng)址：http://www.dlmjj.cn/article/dpjdegs.html