svg路徑蒙版動(dòng)畫(huà)，是比較實(shí)用的一種動(dòng)畫(huà)效果，能夠繪制如下圖所示的動(dòng)畫(huà)。

接下來(lái)細(xì)說(shuō)這樣的動(dòng)畫(huà)是如何做成的:

1.準(zhǔn)備工作

2.SVG路徑動(dòng)畫(huà)

3.SVG路徑蒙版動(dòng)畫(huà)

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

1.準(zhǔn)備工作

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

 通過(guò)圖層可以看到有路徑以及圖片

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

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

路徑得到后通過(guò)下面代碼獲取路徑長(zhǎng)度~~

 <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();//獲取路徑總長(zhǎng)度
        alert(pathLen);
 </script>

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

2.SVG路徑動(dòng)畫(huà)

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

下面就為大家展示path標(biāo)簽繪制出來(lái)的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圖片格式的固定格式字段，不用理會(huì)它。

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

stroke：筆畫(huà)顏色  這里是“black”黑色，同樣可以使用#000000來(lái)表示；

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

stroke-width：筆畫(huà)寬度

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

通過(guò)以上的簡(jiǎn)單代碼直接嵌入到html中或者另存為.svg的文件我們就得到了一個(gè)簡(jiǎn)單的svg的path圖形，接下來(lái)我們給路徑加上css動(dòng)畫(huà)。

點(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"

然后我們?cè)谙旅嫣砑覥SS動(dòng)畫(huà)

.Path1中有三個(gè)字段

stroke-dasharray：畫(huà)筆序列，表示帶顏色的部分（上文中的strock：black）長(zhǎng)266；然后透明266；由此反復(fù)填充滿路徑。
（這里之所以填寫(xiě)的266，是因?yàn)樯衔闹械膒ath路徑的長(zhǎng)度是266,因?yàn)槲乙岋@示顏色的序列最終填滿路徑)

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

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

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

Path路徑動(dòng)畫(huà)繪制完成。

3.SVG路徑蒙版動(dòng)畫(huà)

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圖片時(shí)，我使用了嵌入選項(xiàng)，將底圖嵌入到了svg中，因此上述代碼中image中存在大量信息，不影響關(guān)鍵代碼的瀏覽。

至此，簡(jiǎn)單的路徑蒙版動(dòng)畫(huà)繪制完成。

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

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

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

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

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

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

但本文并沒(méi)有直接調(diào)整animation中的延遲時(shí)間和動(dòng)畫(huà)時(shí)間，而是通過(guò)調(diào)整了

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

這個(gè)值來(lái)延遲動(dòng)畫(huà)繪制的時(shí)間。因?yàn)閯?dòng)畫(huà)使用了無(wú)限循環(huán)的播放方式，如果直接調(diào)整動(dòng)畫(huà)播放時(shí)間和延時(shí)，會(huì)導(dǎo)致之后循環(huán)的動(dòng)畫(huà)時(shí)間錯(cuò)亂。

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

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

最后附上文章開(kāi)頭樣例圖的svg，以供參考。（嵌入了圖片，代碼很長(zhǎng)） 

總結(jié)

以上就是路徑蒙版動(dòng)畫(huà)的全部?jī)?nèi)容，希望對(duì)大家有所幫助。