svg路徑蒙版動畫，是比較實用的一種動畫效果，能夠繪制如下圖所示的動畫。

接下來細(xì)說這樣的動畫是如何做成的:

1.準(zhǔn)備工作

2.SVG路徑動畫

3.SVG路徑蒙版動畫

4.復(fù)雜圖形的編輯技巧

1.準(zhǔn)備工作

首先通過AI繪制需要制作蒙版的圖（這個圖片也可以通過ps導(dǎo)入） 并且繪制路徑，路徑方向要注意開始方向，并且不要填充~

 通過圖層可以看到有路徑以及圖片

然后點(diǎn)擊文件→儲存為→svg  保存svg文件。

使用文本編輯器打開svg文件，就可以看到svg的代碼。

路徑得到后通過下面代碼獲取路徑長度~~

 <svg>
        <path id="Path1" d="M238,8L75.3,103.7c0,0-5.3,7.7-18,0S10.3,73,10.3,73"/>
 </svg>
 <script>
        path = document.getElementById('Path1'),
        pathLen = path.getTotalLength();//獲取路徑總長度
        alert(pathLen);
 </script>

準(zhǔn)備工作完成，接下來詳細(xì)解釋SVG里面的各項內(nèi)容~

2.SVG路徑動畫

SVG元素中的<path> 標(biāo)簽

下面就為大家展示path標(biāo)簽繪制出來的svg是什么樣子

點(diǎn)擊查看代碼示例

里面的內(nèi)容是什么意思呢

<svg version="1.1" xmlns="http://www./2000/svg" xmlns:xlink="http://www./1999/xlink" xml:space="preserve">
<path stroke="black" fill="none" stroke-width="2px" d="M238,8L75.3,103.7c0,0-5.3,7.7-18,0S10.3,73,10.3,73"></path>

</svg>

其中<svg>標(biāo)簽的內(nèi)容是svg圖片格式的固定格式字段，不用理會它。

而path中只有以下幾個重要的參數(shù)：

stroke：筆畫顏色  這里是“black”黑色，同樣可以使用#000000來表示；

fill：填充路徑none，不填充（當(dāng)路徑有填充時，路徑自動閉合，其中顏色就是該字段填寫的顏色，制作動畫的路徑都不需要填充，所以為none）；

stroke-width：筆畫寬度

d：這個參數(shù)就代表了path的路徑。

通過以上的簡單代碼直接嵌入到html中或者另存為.svg的文件我們就得到了一個簡單的svg的path圖形，接下來我們給路徑加上css動畫。

點(diǎn)擊查看代碼示例

這里解釋下關(guān)鍵添加的代碼

<style type="text/css">
      .Path1{stroke-dasharray:266 266;stroke-dashoffset:266;animation:Path1_draw 7200ms linear 0ms infinite}
     @keyframes Path1_draw{10%{stroke-dashoffset: 266}50%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}
  </style>

首先在path的屬性中加入 class="Path1"

然后我們在下面添加CSS動畫

.Path1中有三個字段

stroke-dasharray：畫筆序列，表示帶顏色的部分（上文中的strock：black）長266；然后透明266；由此反復(fù)填充滿路徑。
（這里之所以填寫的266，是因為上文中的path路徑的長度是266,因為我要讓顯示顏色的序列最終填滿路徑)

stroke-dashoffset：畫筆序列偏移，這里266表示stroke-dasharray向前偏移266。

animation:css動畫 五個參數(shù)分別是:關(guān)鍵幀@keyframes，動畫總時間，動畫模式linear（線性），動畫開始的延遲（0ms），動畫循環(huán)infinite（無限循環(huán)）。

關(guān)鍵幀Path1_draw解釋：百分比時間的時候{屬性：變化值}。（從0-10%的偏移還是266，10%-50%偏移0 圖像按照strock-dasharray的繪制顯現(xiàn)在管道中，50%-100%持續(xù)顯示）

Path路徑動畫繪制完成。

3.SVG路徑蒙版動畫

svg蒙版只需做三件事：

1.在之前的path上外部加上和<defs><mask>的標(biāo)簽，并且在mask中添加id

2.在svg中需要添加蒙版的圖片處添加mask="url(#id)" 即可

3.path中的stroke屬性就代表傳統(tǒng)的蒙版，黑色代表透明，白色代表顯示，這里要修改為white。stroke-width的寬度要足以覆蓋圖片，因此改大該值。 

如以下代碼所示。

點(diǎn)擊查看代碼示例

為了方便展示使用ai導(dǎo)出svg圖片時，我使用了嵌入選項，將底圖嵌入到了svg中，因此上述代碼中image中存在大量信息，不影響關(guān)鍵代碼的瀏覽。

至此，簡單的路徑蒙版動畫繪制完成。

4.復(fù)雜圖形的編輯技巧

上述的3點(diǎn)只是完成了一個簡單路徑蒙版原件的制作，那么整個圖形應(yīng)該有些什么關(guān)鍵的地方需要注意呢？

1.制作完成圖像的時候推薦首先使用ps將圖片分層處理好，前景圖，背景圖，以及需要制作蒙版的元素分開，按照圖層排列好，將圖層都轉(zhuǎn)換為智能對象，

然后導(dǎo)出psd的源文件，再將源文件導(dǎo)入ai中生成svg圖片。

2.繪制路徑時，需要將元素單獨(dú)放置到一個AI的畫板中，并且將畫板調(diào)整到元素大小，否則制作的svg動畫位置不正確會導(dǎo)致蒙版失效。

3.如本文開頭的樣例圖所示，其中4條發(fā)光的管道匹配了4條不同的路徑，這里為了滿足流動的效果調(diào)整了幾個管道不同的顯示時間；

但本文并沒有直接調(diào)整animation中的延遲時間和動畫時間，而是通過調(diào)整了

stroke-dasharray:266 355;stroke-dashoffset:355;

這個值來延遲動畫繪制的時間。因為動畫使用了無限循環(huán)的播放方式，如果直接調(diào)整動畫播放時間和延時，會導(dǎo)致之后循環(huán)的動畫時間錯亂。

4.本文也考慮過直接使用 strock-dasharray：0 0 到 strock-dasharray：266 0，而省去stroke-dashoffset的方式繪制動畫，

但是由于設(shè)置了stroke-width，導(dǎo)致動畫開始時會多露出一點(diǎn)，因此棄用該方式。

最后附上文章開頭樣例圖的svg，以供參考。（嵌入了圖片，代碼很長） 

總結(jié)

以上就是路徑蒙版動畫的全部內(nèi)容，希望對大家有所幫助。