svg路徑蒙版動畫

 

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，以供參考。（嵌入了圖片，代碼很長） 

 

總結

以上就是路徑蒙版動畫的所有內容，但願對你們有所幫助。