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

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

1.準備工作

2.SVG路徑動畫

3.SVG路徑蒙版動畫

4.復雜圖形的編輯技巧

1.準備工作

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

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

然後點擊文件→儲存為→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>

準備工作完成，接下來詳細解釋SVG裏面的各項內容~

2.SVG路徑動畫

SVG元素中的<path> 標簽

下面就為大家展示path標簽繪制出來的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圖片格式的固定格式字段，不用理會它。

而path中只有以下幾個重要的參數：

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

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

stroke-width：筆畫寬度

d：這個參數就代表了path的路徑。

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

點擊查看代碼示例

這裏解釋下關鍵添加的代碼

<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；由此反復填充滿路徑。
（這裏之所以填寫的266，是因為上文中的path路徑的長度是266,因為我要讓顯示顏色的序列最終填滿路徑)

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

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

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

Path路徑動畫繪制完成。

3.SVG路徑蒙版動畫

svg蒙版只需做三件事：

1.在之前的path上外部加上和<defs><mask>的標簽，並且在mask中添加id

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

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

如以下代碼所示。

點擊查看代碼示例

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

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

4.復雜圖形的編輯技巧

上述的3點只是完成了一個簡單路徑蒙版原件的制作，那麽整個圖形應該有些什麽關鍵的地方需要註意呢？

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

然後導出psd的源文件，再將源文件導入ai中生成svg圖片。

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

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

但本文並沒有直接調整animation中的延遲時間和動畫時間，而是通過調整了

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

這個值來延遲動畫繪制的時間。因為動畫使用了無限循環的播放方式，如果直接調整動畫播放時間和延時，會導致之後循環的動畫時間錯亂。

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

但是由於設置了stroke-width，導致動畫開始時會多露出一點，因此棄用該方式。

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

總結

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

svg路徑蒙版動畫