導語：直播過程中，往往會有各種動畫特效增強直播效果，近期需求中，設計要求在企鵝電競PC官網上實現一種卡牌效果，在不規則圖片上疊加倒計時效果。前端項目中，往往使用css來完成動畫，像倒計時效果也可以使用css完成，但是相對來說css實現方案比較復雜，層次嵌套較多。倒計時動效要求覆蓋圖片的倒計時陰影為非規則且半透明的。在日常的圓環動畫中，也會有類似的倒計時效果，只不過圓環是規則的，實現起來比較簡單。但是基于圓環效果，再加上svg的mask特性，就可以實現此類特殊效果。

[ 實現動態圖]?

css的mask屬性可以切割圖形，實現不規則圖形，但是css mask屬性兼容性比較差。canvas基于像素繪制，上下文占用內存大，多次切換上下文會造成內存釋放慢，影響到頁面的流暢度。而svg的兼容性好，基于XML，比較輕量，而且當前特效的XML結構比較簡單，不會影響頁面性能，鑒于當前頁面已經有多處特效使用canvas繪制，基于性能考慮，本次方案不采用canvas實現。綜合對比后決定用svg來實現這個效果。

實現方式

兼容性

性能（小規模）

css(mask)	差	一般
canvas	好	一般
svg	好	好

效果分為兩部分，下層部分是一張靜態圖，上層部分是倒計時效果。實現難點在倒計時效果上，而倒計時效果又可以分為幾部分：

1、實現半透明倒計時圖層，且時間可隨意設置；

2、實現切割半透明倒計時蒙版；

3、把蒙版作用在倒計時圖層，并覆蓋在靜態圖上；

4、組件化，可實現各種不規則圖形的效果；

SVG半透明倒計時圖層

1. 圓環效果

在一些頁面中，經常可以看到一些圓環進度條，因為svg實現簡單，所以這些基本上都是用svg的實現，svg circle是svg繪制圓形矢量圖的屬性，它支持設置以下屬性：

• cx，cy：坐標位置

• r：半徑

• stroke-width：填充寬度

• fill：填充內容

• stroke-dasharray：虛線寬度

• transform：變換

下面用幾行代碼演示svg圓環圖：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="50%" cy="50%" r="40%" stroke-width="20%" stroke="#D1D3D7" fill="none"></circle> <circle class="transformNe90" cx="50%" cy="50%" r="40%" stroke-width="20%" stroke="#00A5E0" fill="none" stroke-dasharray="100 502.7"></circle> </svg>

[ svg圓環圖 ]

2. 虛線效果

實現這個效果的重點在circle的stroke-dasharray屬性，stroke-dasharray在SVG中表示的是描邊虛線。需要傳入兩個值，第一個是虛線的寬度，第二個是虛線之間的間距stroke-dashoffset，下面看一下用stroke-dasharray實現的虛線效果：

<svg width="200" height="200" viewPort="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line stroke-width="2" stroke-dasharray="5, 5" stroke="black" x1="10" y1="10" x2="190" y2="10"></line> <line stroke-width="2" stroke-dasharray="5, 10" stroke="black" x1="10" y1="30" x2="190" y2="30"></line> <line stroke-width="2" stroke-dasharray="10, 5" stroke="black" x1="10" y1="50" x2="190" y2="50"></line> <line stroke-width="2" stroke-dasharray="5, 1" stroke="black" x1="10" y1="70" x2="190" y2="70"></line> <line stroke-width="2" stroke-dasharray="1, 5" stroke="black" x1="10" y1="90" x2="190" y2="90"></line> <line stroke-width="2" stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110"></line> <line stroke-width="2" stroke-dasharray="15, 10, 5" stroke="black" x1="10" y1="130" x2="190" y2="130"></line> <line stroke-width="2" stroke-dasharray="15, 10, 5, 10" stroke="black" x1="10" y1="150" x2="190" y2="150"></line> <line stroke-width="2" stroke-dasharray="15, 10, 5, 10, 15" stroke="black" x1="10" y1="170" x2="190" y2="170"></line> <line stroke-width="2" stroke-dasharray="5, 5, 1, 5" stroke="black" x1="10" y1="190" x2="190" y2="190"></line> </svg>

[ svg虛線圖 ]

3. 實現圓環

從上面的虛線圖可以看出，stroke-width表示虛線的“高度”，虛線的寬度是stroke-dasharray的第一個參數值，虛線間隔是stroke-dasharray的第二個參數值。

在實現圓環效果時，也是這個原理，stroke-width表示圓環的邊框寬度，stroke-dasharray的第一個參數為圓環邊框的可見長度，stroke-dasharray的第二個參數為圓環邊框的非可見長度。

如果把stroke-dasharray設置為"0 a"，其中a大于等于圓環的周長時。此時整個圓環的可見長度為0，非可見長度為a，整個圓環不可見，表現為圓環進度條為0，若增大可見長度，便可以看到圓環進度條增長了。

[ 可見長度為0 ]

[ 可見長度為10% ]

[ 可見長度為100% ]

4. 圓環動畫

svg的animate屬性可以實現svg動畫，它支持設置以下屬性：

• attributeName：要變化的元素屬性名稱

• attributeType：CSS | XML | auto

• begin，end：開始結束時間，可以是單時間或分號隔開的時間列表，常見單位有 “h”|”min”|”s”|”ms”

• from, to, by, values 開始結束點

• fill：表示動畫間隙的填充方式。支持參數有：freeze | remove. 其中remove是默認值，表示動畫結束直接回到開始的地方。freeze“凍結”表示動畫結束后像是被凍住了，元素保持了動畫結束之后的狀態。

• repeatCount：動畫執行次數

• repeatDur：定義重復動畫的總時間

當stroke-dasharray的可見長度等于圓環的周長，此時可見長度剛好覆蓋了整個圓環，基于以上的實現，再加上動畫，就可以實現圓環動畫了

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="50%" cy="50%" r="40%" stroke-width="30" stroke="#D1D3D7" fill="none"></circle> <circle cx="50%" cy="50%" r="40%" stroke-width="30" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="0 502.7"> <animate attributeType="XML" attributeName="stroke-dasharray" from="0" to="502.7" dur="10s" fill="freeze" repeatCount="10"></animate> </circle> </svg>

[ 動態圓環 ]

5. 實心環形動畫

接下來就是要把圓環動畫擴寬到實心環形動畫。那么若增大storke-width，會發現圓寬度會向內外擴展

[ stroke-width等于半徑 ]

繼續增大stroke-width，使得stoken-width等于圓的直徑，因為設置r=”40%”,所以stroke-width=”80%”。此時填充的位置剛好覆蓋到圓的中心

這里需要注意的是stroke-dasharray的起始位置在右側，而不是上方，因此，需要使用transform逆時針旋轉90°，所以通過添加class="transformNe90"旋轉整個circle動畫

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="50%" cy="50%" r="40%" stroke-width="80%" stroke="#D1D3D7" fill="none"></circle> <circle class="transformNe90" cx="50%" cy="50%" r="40%" stroke-width="80%" stroke="#00A5E0" fill="none" stroke-dasharray="0 502.7"> <animate attributeType="XML" attributeName="stroke-dasharray" from="0" to="502.7" dur="10s" fill="freeze" repeatCount="10"></animate> </circle> </svg> <style> .transformNe90 { transform: rotate(-90deg); transform-origin: center center; } </style>

[ stroke-width等于直徑 ]

此時倒計時效果剛好覆蓋了整個圓，填充的倒計時效果完成。

實現切割半透明倒計時蒙版

1. css遮罩層

了解svg蒙版，先了解一下css的遮罩mask屬性，css mask遮罩屬性是一個很古老的屬性，它的原理是黑透白不透，它是基于圖像的alpha計算遮罩程度的，顏色越深透過遮罩層的可見視圖就越多，如果是全黑就會全透，同理全白就會透不過，看起來就像把白色區域的圖形給切掉了。它支持在樣式中設置以下幾種屬性：

• mask-image

• mask-mode

• mask-repeat

• mask-position

• mask-clip

• mask-origin

• mask-size

• mask-type

• mask-composite

mask-image指遮罩使用的圖片資源，所支持的圖片類型非常的廣泛，可以是url()靜態圖片資源，格式包括JPG，PNG以及SVG，使用mask-image我們可以遮罩出任意我們想要的圖形，非常強大。下面看一個用css mask實現的遮罩效果：

<style> .mask-image { width: 200px; height: 200px; -webkit-mask-image: url(http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png); mask-image: url(http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png); } </style> <div style="width: 200px;height: 200px; background: #00A5E0" class="mask-image"></div>

[ css mask]?

2. svg蒙版

從上面這個的例子，我們可以看出，所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分。同比，我們在svg中也使用svg的蒙版屬性mask來實現遮罩。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <mask id="maskId" patternUnits="userSpaceOnUse" > <image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png" width="100%" height="100%" /> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#00A5E0" mask="url(#maskId)" /> </svg>

[ svg mask ]

3. svg的蒙版mask-type

可以看到，基于svg 的mask屬性，可以生成一塊用于切割倒計時動畫的遮罩層。但是有些地方是半透明的是怎么回事，實際上svg的mask屬性，其遮罩類型是luminance，也就是基于亮度來進行遮罩的。因此只需要把mask的mask-type設置為基于透明度就可以了mask-type='alpha'：

<mask id="maskId" patternUnits="userSpaceOnUse" mask-type="alpha"> <image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png" width="100%" height="100%" /> </mask>

[ mask-type='alpha' ]

被遮罩的倒計時效果

基于以上的倒計時效果和蒙版遮罩層，再設置circle上面的stroke屬性的顏色值為rgba(0,0,0,.5)，就可以實現半透明的遮罩層。綜合上面的倒計時效果，就可以實現想要的半透明不規則倒計時效果。

由于為了把circle的倒計時起點設置為頂部，加了類transformNe90旋轉了90度，因此在圖形遮罩層上，需要設置類transform90實現反方向90度的旋轉：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <mask id="maskId" patternUnits="userSpaceOnUse" mask-type="alpha"> <image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/fushenka2.png" width="100%" height="100%" class="transform90"/> </mask> <image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/fushenka2.png" width="100%" height="100%"/> <circle class="transformNe90" cx="50%" cy="50%" r="50%" stroke-width="100%" stroke="rgba(0,0,0,.5)" fill="none" stroke-dasharray="628.32 628.32" mask="url(#maskId)"> <animate attributeType="XML" attributeName="stroke-dasharray" from="0" to="628.3" dur="10s" fill="freeze" repeatCount="10"></animate> </circle> </svg> <style> .transform90 { transform: rotate(90deg); transform-origin: center center; } .transformNe90 { transform: rotate(-90deg); transform-origin: center center; } </style>

[ 不規則倒計時動效 ]

組件化，實現各種不規則圖形的倒計時效果

基于以上的實現，已經實現了一個固定長寬，固定圖，固定透明度的不規則倒計時效果，但是在實際的應用中，我們需要兼容各種不同尺寸的圖形，因此需要把它抽象成組件，支持設置image的src、height、width以及circle的dur、from等屬性

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :viewbox="'0 0 ' + width + ' ' + height" class="pk-countdown" > <defs> <mask :id="maskId" patternUnits="userSpaceOnUse"> <image x="0" y="0" width="100%" height="100%" class="transform90" :xlink:href="src" /> </mask> </defs> <image x="0" y="0" :xlink:href="src" width="100%" height="100%" /> <circle cx="50%" cy="50%" r="50%" stroke-width="100%" :stroke="'rgba(0,0,0,' + opacity + ')'" fill="none" :stroke-dasharray="'0 ' + circle" :mask="'url(#'+maskId+')'" class="transformNe90" > <animate attributeType="XML" attributeName="stroke-dasharray" :from="circleStart" :to="circle" :dur="duration + 's'" fill="freeze" :repeatCount="repeatCount" /> </circle> </svg> ... circleStart() { return (this.process / this.duration) * this.circle }, circle() { return (Math.PI * 2 * Math.max(this.width, this.height)) / 2 }

這樣就可以通過父組件傳遞屬性，控制倒計時效果的各種屬性，實現通用的不規則倒計時效果。

總結

svg是一個很強大的矢量圖繪制工具，可以直接內嵌到網頁的dom中，并且可以通過css設置svg的各種屬性，相對于canvas，它的操作更加靈活，實現更加簡單。結合svg的mask和filter等屬性，可以實現很多酷炫的效果。而且它的兼容性好，基本主流的瀏覽器都支持，還兼容到IE9，對于需要用css實現的復雜效果，都可以考慮用svg實現。

附圖：

[ svg兼容性 ]

總結

以上是生活随笔為你收集整理的卡牌特效: svg不规则倒计时动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。