您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何使用CSS3實(shí)現(xiàn)SVG路徑描邊動(dòng)畫效果,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
不依賴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)方式??蛇x值: 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
。分別表示:百分比值、長度值、繼承。
8、 stroke-opacity
表示描邊透明度,默認(rèn)是1。
與本文教程相關(guān)的動(dòng)畫效果相關(guān)的就是 stroke-dasharray
和 stroke-dashoffset
。
stroke-dasharray和stroke-dashoffset
為了方便說明,減少干擾,我們拿一條直線炒個(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í)候,通過setAttribute方法設(shè)置<line>節(jié)點(diǎn)元素的stroke-dasharray和stroke-dashoffset值,達(dá)到了上面的效果。
一個(gè)特殊情況
我們現(xiàn)在都試想一下,如果 stroke-dasharray
和 stroke-dashoffset
值都很大,超過了描邊路徑的總長度,會(huì)怎么樣?
用中文解釋就是,一根火腿腸12厘米,要在上面畫虛線,虛線間隔有15厘米,如果沒有 dashoffset
,則火腿腸前面15厘米會(huì)被辣椒醬覆蓋!實(shí)際上只有12厘米,因此,我們看到的是整個(gè)火腿腸都有辣椒醬。
現(xiàn)在, dashoffset
也是15厘米,也就是虛線要往后偏移15厘米,結(jié)果,辣椒醬要抹在火腿腸之外,也就是火腿腸上什么辣椒醬也沒有。如果換成上面的直線SVG,也就是直線看不見了。
我們把 dashoffset
值逐漸變小,則會(huì)發(fā)現(xiàn),火腿腸上的辣椒醬一點(diǎn)一點(diǎn)出現(xiàn)了,好像辣椒醬從火腿腸根部涂抹上去一樣。
上面的兩個(gè)滑塊都右滑到底,然后下面的滑塊往左慢慢滑(請(qǐng)使用支持type=range的瀏覽器),您會(huì)看到直線慢慢出來了,這就是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),無需任何JavaScript,這就是一開始Demo頁面的實(shí)現(xiàn)。
其CSS代碼如下:
path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear infinite; } @keyframes dash { to { stroke-dashoffset: 0; } }
1000 沒有什么特殊含義,只是足夠大,保證比比每個(gè)路徑的長度大即可,你也可以是 1500 ,區(qū)別就是描邊速度更快一點(diǎn)。
屬性CSS3 animation 的小伙伴應(yīng)該一看就看出上面代碼的含義的,5秒動(dòng)畫, stroke-dashoffset 從1000到0. 描邊動(dòng)畫形成。
以上CSS代碼幾乎可以通用。
無論你的SVG路徑多么復(fù)雜,都能以描邊動(dòng)畫形式呈現(xiàn)。根據(jù)自己的測(cè)試,IE10+下沒有動(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ǔn)確長度??赡苄枰柚鶭avaScript,類似下面的代碼:
var path = document.querySelector('path'); var length = path.getTotalLength();
關(guān)于“如何使用CSS3實(shí)現(xiàn)SVG路徑描邊動(dòng)畫效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。