svg路徑蒙版動(dòng)畫(huà)，是比較實(shí)用的一種動(dòng)畫(huà)效果，能夠繪制如下圖所示的動(dòng)畫(huà)。
接下來(lái)細說(shuō)這樣的動(dòng)畫(huà)是如何做成的:
1.準備工作
2.SVG路徑動(dòng)畫(huà)
3.SVG路徑蒙版動(dòng)畫(huà)
4.復雜圖形的編輯技巧
首先通過(guò)AI繪制需要制作蒙版的圖（這個(gè)圖片也可以通過(guò)ps導入） 并且繪制路徑，路徑方向要注意開(kāi)始方向，并且不要填充~
通過(guò)圖層可以看到有路徑以及圖片
然后點(diǎn)擊文件→儲存為→svg 保存svg文件。
使用文本編輯器打開(kāi)svg文件，就可以看到svg的代碼。
路徑得到后通過(guò)下面代碼獲取路徑長(chá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();//獲取路徑總長(cháng)度 alert(pathLen); </script>
準備工作完成，接下來(lái)詳細解釋SVG里面的各項內容~
下面就為大家展示path標簽繪制出來(lái)的svg是什么樣子
里面的內容是什么意思呢
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/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>標簽的內容是svg圖片格式的固定格式字段，不用理會(huì )它。
而path中只有以下幾個(gè)重要的參數：
stroke：筆畫(huà)顏色 這里是“black”黑色，同樣可以使用#000000來(lái)表示；
fill：填充路徑none，不填充（當路徑有填充時(shí)，路徑自動(dòng)閉合，其中顏色就是該字段填寫(xiě)的顏色，制作動(dòng)畫(huà)的路徑都不需要填充，所以為none）；
stroke-width：筆畫(huà)寬度
d：這個(gè)參數就代表了path的路徑。
通過(guò)以上的簡(jiǎn)單代碼直接嵌入到html中或者另存為.svg的文件我們就得到了一個(gè)簡(jiǎn)單的svg的path圖形，接下來(lái)我們給路徑加上css動(dòng)畫(huà)。
這里解釋下關(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動(dòng)畫(huà)
.Path1中有三個(gè)字段
stroke-dasharray：畫(huà)筆序列，表示帶顏色的部分（上文中的strock：black）長(cháng)266；然后透明266；由此反復填充滿(mǎn)路徑。
（這里之所以填寫(xiě)的266，是因為上文中的path路徑的長(cháng)度是266,因為我要讓顯示顏色的序列最終填滿(mǎn)路徑)
stroke-dashoffset：畫(huà)筆序列偏移，這里266表示stroke-dasharray向前偏移266。animation:css動(dòng)畫(huà) 五個(gè)參數分別是:關(guān)鍵幀@keyframes，動(dòng)畫(huà)總時(shí)間，動(dòng)畫(huà)模式linear（線(xiàn)性），動(dòng)畫(huà)開(kāi)始的延遲（0ms），動(dòng)畫(huà)循環(huán)infinite（無(wú)限循環(huán)）。
關(guān)鍵幀Path1_draw解釋?zhuān)喊俜直葧r(shí)間的時(shí)候{屬性：變化值}。（從0-10%的偏移還是266，10%-50%偏移0 圖像按照strock-dasharray的繪制顯現在管道中，50%-100%持續顯示）
Path路徑動(dòng)畫(huà)繪制完成。
svg蒙版只需做三件事：
1.在之前的path上外部加上和<defs><mask>的標簽，并且在mask中添加id
2.在svg中需要添加蒙版的圖片處添加mask="url(#id)" 即可
3.path中的stroke屬性就代表傳統的蒙版，黑色代表透明，白色代表顯示，這里要修改為white。stroke-width的寬度要足以覆蓋圖片，因此改大該值。
如以下代碼所示。
為了方便展示使用ai導出svg圖片時(shí)，我使用了嵌入選項，將底圖嵌入到了svg中，因此上述代碼中image中存在大量信息，不影響關(guān)鍵代碼的瀏覽。
至此，簡(jiǎn)單的路徑蒙版動(dòng)畫(huà)繪制完成。
上述的3點(diǎn)只是完成了一個(gè)簡(jiǎn)單路徑蒙版原件的制作，那么整個(gè)圖形應該有些什么關(guān)鍵的地方需要注意呢？
1.制作完成圖像的時(shí)候推薦首先使用ps將圖片分層處理好，前景圖，背景圖，以及需要制作蒙版的元素分開(kāi)，按照圖層排列好，將圖層都轉換為智能對象，
然后導出psd的源文件，再將源文件導入ai中生成svg圖片。
2.繪制路徑時(shí)，需要將元素單獨放置到一個(gè)AI的畫(huà)板中，并且將畫(huà)板調整到元素大小，否則制作的svg動(dòng)畫(huà)位置不正確會(huì )導致蒙版失效。
3.如本文開(kāi)頭的樣例圖所示，其中4條發(fā)光的管道匹配了4條不同的路徑，這里為了滿(mǎn)足流動(dòng)的效果調整了幾個(gè)管道不同的顯示時(shí)間；
但本文并沒(méi)有直接調整animation中的延遲時(shí)間和動(dòng)畫(huà)時(shí)間，而是通過(guò)調整了
stroke-dasharray:266 355;stroke-dashoffset:355;
這個(gè)值來(lái)延遲動(dòng)畫(huà)繪制的時(shí)間。因為動(dòng)畫(huà)使用了無(wú)限循環(huán)的播放方式，如果直接調整動(dòng)畫(huà)播放時(shí)間和延時(shí)，會(huì )導致之后循環(huán)的動(dòng)畫(huà)時(shí)間錯亂。
4.本文也考慮過(guò)直接使用 strock-dasharray：0 0 到 strock-dasharray：266 0，而省去stroke-dashoffset的方式繪制動(dòng)畫(huà)，
但是由于設置了stroke-width，導致動(dòng)畫(huà)開(kāi)始時(shí)會(huì )多露出一點(diǎn)，因此棄用該方式。
最后附上文章開(kāi)頭樣例圖的svg，以供參考。（嵌入了圖片，代碼很長(cháng)）
以上就是路徑蒙版動(dòng)畫(huà)的全部?jì)热?，希望對大家有所幫助?/span>
