使用CSS3實(shí)現(xiàn)SVG路徑描邊動(dòng)畫效果入門教程
我要評(píng)論不依賴javascript，直接使用純css實(shí)現(xiàn) svg 的描邊繪制動(dòng)畫效果，效果演示動(dòng)畫。
基礎(chǔ)知識(shí)：
SVG中有個(gè)比較重要的屬性分支 stroke ，中文軟件中稱為“描邊”。和stroke相關(guān)的屬性還有下面這些：
1、 stroke 表示描邊顏色。表示顏色的名字不是stroke-color，只是單純的stroke。它的值官方稱為“paint”，可選值的類型包括 none 、 currentColor 、 <color> 。
none <color> currentColor
2、 stroke-width 表示描邊的粗細(xì)。
3、 stroke-linecap 表示描邊端點(diǎn)表現(xiàn)方式?？捎弥涤校?butt 、 round 、 square 、 inherit 。圖示如下：
4、 stroke-linejoin 表示描邊轉(zhuǎn)角的表現(xiàn)方式。可選值： miter 、 round 、 bevel 、 inherit 。圖示如下：
5、 stroke-miterlimit 表示描邊相交（銳角）的表現(xiàn)方式，默認(rèn)大小是4。斜角轉(zhuǎn)斜面的角度損耗之類的意思，值越大，損耗越小。
6、 stroke-dasharray 表示虛線描邊，可選值為： none 、 <dasharray> 、 inherit
none <dasharray> inherit
7、 stroke-dashoffset 表示虛線的起始偏移，可選值為： <percentage> 、 <length> 、 inherit 。分別表示：百分比值、長(zhǎng)度值、繼承。
8、 stroke-opacity 表示描邊透明度，默認(rèn)是1。
與本文教程相關(guān)的動(dòng)畫效果相關(guān)的就是 stroke-dasharray 和 stroke-dashoffset 。
stroke-dasharray和stroke-dashoffset
為了方便說(shuō)明，減少干擾，我們拿一條直線炒個(gè)板栗，如下：
點(diǎn)擊下面的滑塊（或輸入數(shù)值）體驗(yàn)下：
stroke-dasharray：
stroke-dashoffset：
HTML代碼為：
<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <g> <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/> </g> </svg>
移動(dòng)滑塊時(shí)候（或文本框輸入）時(shí)候，通過(guò)setAttribute方法設(shè)置<line>節(jié)點(diǎn)元素的stroke-dasharray和stroke-dashoffset值，達(dá)到了上面的效果。
一個(gè)特殊情況
我們現(xiàn)在都試想一下，如果 stroke-dasharray 和 stroke-dashoffset 值都很大，超過(guò)了描邊路徑的總長(zhǎng)度，會(huì)怎么樣？
用中文解釋就是，一根火腿腸12厘米，要在上面畫虛線，虛線間隔有15厘米，如果沒(méi)有 dashoffset ，則火腿腸前面15厘米會(huì)被辣椒醬覆蓋！實(shí)際上只有12厘米，因此，我們看到的是整個(gè)火腿腸都有辣椒醬。
現(xiàn)在， dashoffset 也是15厘米，也就是虛線要往后偏移15厘米，結(jié)果，辣椒醬要抹在火腿腸之外，也就是火腿腸上什么辣椒醬也沒(méi)有。如果換成上面的直線SVG，也就是直線看不見了。
我們把 dashoffset 值逐漸變小，則會(huì)發(fā)現(xiàn)，火腿腸上的辣椒醬一點(diǎn)一點(diǎn)出現(xiàn)了，好像辣椒醬從火腿腸根部涂抹上去一樣。
上面的兩個(gè)滑塊都右滑到底，然后下面的滑塊往左慢慢滑（請(qǐng)使用支持type=range的瀏覽器），您會(huì)看到直線慢慢出來(lái)了，這就是SVG路徑繪制動(dòng)畫的原理。
CSS3 animation 的支持
內(nèi)聯(lián)SVG的強(qiáng)大之處在于，其本身也是個(gè)HTML元素，能被CSS屬性控制，處理傳統(tǒng)的高寬定位、邊框背景色等，SVG自身的一些特殊屬性也能被CSS支持，甚至在CSS3 animation 動(dòng)畫中。
于是，我們上面探討的SVG描邊動(dòng)畫效果能夠輕松使用CSS3 animation 實(shí)現(xiàn)，無(wú)需任何JavaScript，這就是一開始Demo頁(yè)面的實(shí)現(xiàn)。
其CSS代碼如下：
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
1000 沒(méi)有什么特殊含義，只是足夠大，保證比比每個(gè)路徑的長(zhǎng)度大即可，你也可以是 1500 ，區(qū)別就是描邊速度更快一點(diǎn)。
屬性CSS3 animation 的小伙伴應(yīng)該一看就看出上面代碼的含義的，5秒動(dòng)畫， stroke-dashoffset 從1000到0. 描邊動(dòng)畫形成。
以上CSS代碼幾乎可以通用。
無(wú)論你的SVG路徑多么復(fù)雜，都能以描邊動(dòng)畫形式呈現(xiàn)。根據(jù)自己的測(cè)試，IE10+下沒(méi)有動(dòng)畫效果，不是CSS不支持SVG的 stroke 相關(guān)屬性，而是animation中不支持 stroke 相關(guān)屬性的動(dòng)畫。
以上效果有什么用的，我試想了以下一些場(chǎng)景：演示時(shí)候分步展示一些要點(diǎn)；或者圖片等hover描邊效果；或者網(wǎng)站tip注意項(xiàng)的箭頭引導(dǎo)提示效果等，都很有用。
路徑的長(zhǎng)度
如果您想知道路徑，或線條的準(zhǔn)確長(zhǎng)度?？赡苄枰柚鶭avaScript，類似下面的代碼：
var path = document.querySelector('path');
var length = path.getTotalLength();
參考文章
Polygon feature design: SVG animations for fun and profit
教程轉(zhuǎn)自：
總結(jié)
以上所述是小編給大家介紹的使用CSS3實(shí)現(xiàn)SVG路徑描邊動(dòng)畫效果入門教程,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
- CSS3作為新興的前端技術(shù)可以實(shí)現(xiàn)很多復(fù)雜變化的效果，比如文字描邊。這里主要用到text-shadow屬性，顧名思義就是為文字加上陰影效果，本文給大家介紹純CSS3代碼實(shí)現(xiàn)文字描2016-04-25
- 這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問(wèn)題,需要的朋友可以參考下2016-03-07