使用CSS3實現SVG路徑描邊動畫效果入門教程

  發布時間:2019-10-21 14:44:51   作者:佚名   我要評論
不依賴javascript,直接使用純css實現 svg 的描邊繪制動畫效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧

不依賴javascript,直接使用純css實現 svg 的描邊繪制動畫效果,效果演示動畫。

基礎知識:

SVG中有個比較重要的屬性分支 stroke ,中文軟件中稱為“描邊”。和stroke相關的屬性還有下面這些:

1、 stroke 表示描邊顏色。表示顏色的名字不是stroke-color,只是單純的stroke。它的值官方稱為“paint”,可選值的類型包括 nonecurrentColor<color>

none
<color>
currentColor

2、 stroke-width 表示描邊的粗細。

3、 stroke-linecap 表示描邊端點表現方式。可用值有: buttroundsquareinherit 。圖示如下:

4、 stroke-linejoin 表示描邊轉角的表現方式。可選值: miterroundbevelinherit 。圖示如下:

5、 stroke-miterlimit 表示描邊相交(銳角)的表現方式,默認大小是4。斜角轉斜面的角度損耗之類的意思,值越大,損耗越小。

6、 stroke-dasharray 表示虛線描邊,可選值為: none<dasharray>inherit

none
<dasharray>
inherit

7、 stroke-dashoffset 表示虛線的起始偏移,可選值為: <percentage><length>inherit 。分別表示:百分比值、長度值、繼承。

8、 stroke-opacity 表示描邊透明度,默認是1。

與本文教程相關的動畫效果相關的就是 stroke-dasharraystroke-dashoffset

stroke-dasharray和stroke-dashoffset

為了方便說明,減少干擾,我們拿一條直線炒個板栗,如下:

點擊下面的滑塊(或輸入數值)體驗下:

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>

移動滑塊時候(或文本框輸入)時候,通過setAttribute方法設置<line>節點元素的stroke-dasharray和stroke-dashoffset值,達到了上面的效果。

一個特殊情況

我們現在都試想一下,如果 stroke-dasharraystroke-dashoffset 值都很大,超過了描邊路徑的總長度,會怎么樣?

用中文解釋就是,一根火腿腸12厘米,要在上面畫虛線,虛線間隔有15厘米,如果沒有 dashoffset ,則火腿腸前面15厘米會被辣椒醬覆蓋!實際上只有12厘米,因此,我們看到的是整個火腿腸都有辣椒醬。

現在, dashoffset 也是15厘米,也就是虛線要往后偏移15厘米,結果,辣椒醬要抹在火腿腸之外,也就是火腿腸上什么辣椒醬也沒有。如果換成上面的直線SVG,也就是直線看不見了。

我們把 dashoffset 值逐漸變小,則會發現,火腿腸上的辣椒醬一點一點出現了,好像辣椒醬從火腿腸根部涂抹上去一樣。

上面的兩個滑塊都右滑到底,然后下面的滑塊往左慢慢滑(請使用支持type=range的瀏覽器),您會看到直線慢慢出來了,這就是SVG路徑繪制動畫的原理。

CSS3 animation 的支持

內聯SVG的強大之處在于,其本身也是個HTML元素,能被CSS屬性控制,處理傳統的高寬定位、邊框背景色等,SVG自身的一些特殊屬性也能被CSS支持,甚至在CSS3 animation 動畫中。

于是,我們上面探討的SVG描邊動畫效果能夠輕松使用CSS3 animation 實現,無需任何JavaScript,這就是一開始Demo頁面的實現。

其CSS代碼如下:

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

1000 沒有什么特殊含義,只是足夠大,保證比比每個路徑的長度大即可,你也可以是 1500 ,區別就是描邊速度更快一點。

屬性CSS3 animation 的小伙伴應該一看就看出上面代碼的含義的,5秒動畫, stroke-dashoffset 從1000到0. 描邊動畫形成。

以上CSS代碼幾乎可以通用。

無論你的SVG路徑多么復雜,都能以描邊動畫形式呈現。根據自己的測試,IE10+下沒有動畫效果,不是CSS不支持SVG的 stroke 相關屬性,而是animation中不支持 stroke 相關屬性的動畫。

以上效果有什么用的,我試想了以下一些場景:演示時候分步展示一些要點;或者圖片等hover描邊效果;或者網站tip注意項的箭頭引導提示效果等,都很有用。

路徑的長度

如果您想知道路徑,或線條的準確長度。可能需要借助JavaScript,類似下面的代碼:

var path = document.querySelector('path');
var length = path.getTotalLength();

參考文章

Polygon feature design: SVG animations for fun and profit

Animating Vectors with SVG

How SVG Line Animation Works

 Animated line drawing in SVG

 W3 – Stroke Properties

教程轉自:

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%e5%8a%a8%e7%94%bb-%e8%b7%af%e5%be%84/

總結

以上所述是小編給大家介紹的使用CSS3實現SVG路徑描邊動畫效果入門教程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • 純CSS3代碼實現文字描邊

    CSS3作為新興的前端技術可以實現很多復雜變化的效果,比如文字描邊。這里主要用到text-shadow屬性,顧名思義就是為文字加上陰影效果,本文給大家介紹純CSS3代碼實現文字描
    2016-04-25
  • 簡單掌握CSS3將文字描邊及填充文字顏色的方法

    這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問題,需要的朋友可以參考下
    2016-03-07

最新評論

福建体育彩票时时彩11