蒙版對于UI設(shè)計(jì)師來說罢维，太熟悉不過了淹仑，當(dāng)然了，可能PS里面用的多一些肺孵，AI里面用的少一些匀借，SVG同樣支持蒙版，而且借助蒙版平窘，能完成很多神奇的效果吓肋。我喜歡稱蒙版動畫為一種魔術(shù)，這是真正的“障眼法”瑰艘，它只讓你看到想要看到的部分是鬼。
前面SVG的動畫效果里，有兩次用過了蒙版紫新，一個是在路徑動畫中均蜜，利用蒙版的路徑描邊動畫，逐漸畫出白色的螺旋線芒率，從而動態(tài)顯示底部的小豆豆組成的路徑兆龙，達(dá)到飛機(jī)撒播小豆的效果。
還有一次是在路徑變形動畫中利用蒙版的路徑變形動畫來實(shí)現(xiàn)鏤空圖形的變形動畫敲董。這還只是蒙版動畫的冰山一角紫皇，下面會介紹幾個有代表性的應(yīng)用，掌握了蒙版動畫之后腋寨，嗯聪铺，你會打開一扇全新的門。

1.SVG蒙版基本語法

先簡單說一下SVG蒙版的基本語法萄窜，給沒有SVG基礎(chǔ)的UI設(shè)計(jì)師入入門铃剔。

<mask id="shade"><circle cx="50" cy="50" r="30" /></mask>
<rect mask="url(#shade)"/>

表示我定義了一個半徑30的圓形蒙版shade,矩形使用這個shade蒙版撒桨。蒙版如果里面不定義任何形狀，則默認(rèn)為全黑蒙版键兜，也就是說凤类，使用蒙版的形狀完全被遮罩了，蒙版里定義的任何形狀都是在這個黑色畫布上進(jìn)行繪制的普气。至于使用過程中谜疤，那自然是各種變化多多，下面由淺入深现诀，慢慢來講夷磕。

2.靜態(tài)SVG蒙版

這個嚴(yán)格來說不是蒙版動畫，而是蒙版下的動畫仔沿，還記得馮老板的新電影《我不是潘金蓮》里面獨(dú)特的表現(xiàn)手法吧坐桩，所有畫面集中于一個圓形的視窗里，那用蒙版來實(shí)現(xiàn)的話封锉，就是黑色底上放一個白色的圓形绵跷。下面就來模擬一下這種效果。這是我做的一個水波紋的動態(tài)效果
（實(shí)現(xiàn)方法可以參考以前發(fā)過的路徑變形動畫）成福。

水波紋動態(tài)效果

一開始說過默認(rèn)的蒙版是全黑的碾局，這樣我們只需要加白色一個圓形就可以實(shí)現(xiàn)圓形的視窗了。

蒙版動畫原理

<svg>
<style>
@keyframes deform1{0% {d:path('');} 100%{d:path('');}}/*第一個路徑變形動畫*/
@keyframes deform1{0% {d:path('');} 100%{d:path('');}}/*第二個路徑變形動畫*/
#animate1 {animation: deform1 2s alternate infinite ;fill:#71CFD1;opacity:0.5}/*設(shè)定透明度*/
#animate2 {animation: deform2 2s alternate infinite;fill:#71CFD1;opacity:0.3} 
</style>
<mask id="shade"><circle fill="#ffffff" cx=" " cy=" " r="200"/></mask><!--定義蒙版-->
<g mask="url(#shade)"><!--把變形動畫放到一個組里闷叉，再調(diào)用蒙版-->
<path  id="animate1" />
<path  id="animate2"/>
</g>

看一下效果：

使用蒙版后的效果

圓形視窗實(shí)現(xiàn)了，但似乎少了些什么脊阴，不錯握侧，就是黑色的背景，這里有兩種添加方法嘿期，可以在AI里面繪制一個中間為鏤空的圓形的黑色矩形品擎，鏤空圓形部分與蒙版里的白色圓形重合，但還有一個偷懶的好方法备徐，就是不用蒙版（搞什么萄传？！）蜜猾。直接把這個鏤空的黑色矩形秀菱，放到變形動畫上面就好了。這樣路徑部分代碼簡化如下：

<path  id="animate1" />
<path  id="animate2"/>
<path d=""/> <!--黑色鏤空矩形對應(yīng)的路徑-->

注意一下路徑疊加的順序蹭睡，從上到下對應(yīng)AI里的圖層順序從下到上衍菱。也就是瀏覽器先渲染排序在前的路徑圖形，然后層層疊加肩豁。
效果棒棒噠

直接使用黑色鏤空矩形遮住多余區(qū)域

當(dāng)然了脊串，蒙版的方法還是要掌握的辫呻，因?yàn)檫@是唯一一個特例嘛。而且缺點(diǎn)顯而易見琼锋，你的矩形不能任意控制大小放闺，只能大于被遮住的動畫的區(qū)域。
如果說這種簡單的圓形無法體現(xiàn)蒙版的優(yōu)勢缕坎，那下面這種會展現(xiàn)的更為充分怖侦。

注水的杯子

簡單說一下杯子和蒙版的關(guān)系

杯子與蒙版

來看代碼部分：

<mask id="shade"><path fill="#FFFFFF" d=" "/></mask>
<g mask="url(#shade)">
<path  id="animate1"/>
<path  id="animate2"/>
</g>
<g>
…此處省略若干杯子形狀的代碼…
</g>

其實(shí)大多數(shù)工作AI會幫我們很好的完成，我們要做的不過是定義動畫和擺好各個圖形的關(guān)系而已念赶。這種給容器里加水的動效础钠，如果不借助，那么做變形動畫的時候還要精確計(jì)算邊緣叉谜，而利用蒙版旗吁，不但動態(tài)底圖繪制時無所畏忌，還可以實(shí)現(xiàn)多個不同容器同時加水的動畫停局，只要蒙版上多繪制幾個白色的容器形狀就可以了很钓。來點(diǎn)小小的改動，發(fā)揮一下SVG的優(yōu)勢董栽，來個大雜燴码倦，咖啡，紅酒锭碳，橙汁袁稽，我們只要改變定義的變形動畫的填充色，嗯擒抛，就這么簡單推汽。

三杯飲料~

3.文字蒙版

蒙版的強(qiáng)大，不僅僅在于支持圖形歧沪，同樣還支持文字歹撒，通過文字蒙版，還可以輕松實(shí)現(xiàn)填充變換的文字诊胞。比如我做了一個漸變的動態(tài)背景暖夭，這個用CSS3實(shí)現(xiàn)比用SVG更容易，不過我懶撵孤，就直接用SVG實(shí)現(xiàn)了迈着，而且用的是最不靠譜的方法，動態(tài)背景實(shí)現(xiàn)方法很多邪码，我是讓一個很大的漸變背景位移實(shí)現(xiàn)的寥假，沒用過SVG漸變填充的可以看一下，就是下面這種方法：

<svg width="800"  height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0px) translateY(0px)}
100% {transform: translateX(-3000px) translateY(-2000px)}}
rect{animation:animate 4s alternate infinite}
</style>
<defs>
<linearGradient id="dream" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="0%"   stop-color="#345ca5" />
<stop offset="20%" stop-color="#6134a5" />
<stop offset="40%" stop-color="#3479a5"/>
<stop offset="60%" stop-color="#2b008b"/>
<stop offset="80%" stop-color="#3DC4D0"/>
<stop offset="100%" stop-color="#5c2392"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)" />
</svg>

先定義一個傾斜線性漸變dream霞扬，一共6個透馊停靠點(diǎn)枫振，然后畫一個超大的矩形來使用這個漸變，并做位移動效萤彩，但由于尺寸是寫死的粪滤，所以你只能看到800*600的區(qū)域，從而實(shí)現(xiàn)了動態(tài)漸變效果雀扶。

動態(tài)漸變背景

那這個動態(tài)漸變?nèi)绾钨x給文本呢杖小？簡單，我只需要像如下定義一下文字蒙版就可以了

<mask id="shade"><text>生如夏花</text></mask><!--文本的位置大小字體填充色單獨(dú)定義-->
<g mask="url(#shade)">
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)"/>
</g>

我這里并沒有讓動態(tài)漸變的矩形去直接調(diào)用文字蒙版愚墓，而是外面單獨(dú)又套了一個<g>標(biāo)簽予权，是因?yàn)槲覄討B(tài)漸變的實(shí)現(xiàn)方式不好嘛，是移動實(shí)現(xiàn)的浪册，如果蒙版直接給這個矩形扫腺，意味著蒙版就跟著一起跑啦。

文字蒙版實(shí)現(xiàn)動態(tài)漸變填充

這種效果還有一個實(shí)現(xiàn)方法是可以把文字轉(zhuǎn)成路徑再導(dǎo)出村象，但若論起易用性笆环，自然文字蒙版更好一些，因?yàn)槲谋究梢噪S心所欲的修改厚者。如果你喜歡躁劣，你還可以把這種效果賦給描邊，不過這次描邊是白色库菲，填充時黑色账忘，會得到像下面這種：

文字蒙版實(shí)現(xiàn)的動態(tài)漸變描邊

4.帶透明度的蒙版

見識過文字蒙版之后，說一下帶透明度的蒙版熙宇，SVG的蒙版真真是和作圖工具中的蒙版一模一樣鳖擒，依然支持透明度，漸變奇颠，怎么都行败去，因?yàn)槲覜]想到太好的案例放航，所以還是拿我們上面的案例下刀吧烈拒。
我給文字蒙版的上面再加一個蒙版，蒙版添加方式如下：

再套一層蒙版

代碼如下：

<mask id="shade"> <text x="" y="" >生如夏花</text></mask>
<mask id="shade2"><!--由灰色矩形和白色矩形組成的蒙版-->
<rect fill="#969696" x="0" y="0" width="800" height="150"></rect>
<rect fill="#ffffff" x="0" y="150" width="800" height="300"></rect>
</mask>
<g mask="url(#shade2)"> <!--新加蒙版-->
<g mask="url(#shade)">
<rect x="0" y="0" width="3800" height="3600" fill="url(#dream)" id="aaa"/><!--由于新加蒙版使用了矩形广鳍，所以這里要給矩形背景一個id荆几，并修改CSS樣式。-->
</g>
</g>    

那效果是怎樣呢赊时？

水晶效果

新加的蒙版產(chǎn)生了水晶效果吨铸。
漸變的效果來看一下

加漸變蒙版后的效果

5.動態(tài)蒙版位移動畫

以上都是靜態(tài)蒙版的應(yīng)用诞吱，其作用就是重新生成一個視窗舟奠。下面，要開始動態(tài)蒙版的介紹了房维，等真正會用動態(tài)蒙版之后沼瘫，SVG動畫簡直可以發(fā)揮想象不到的強(qiáng)大。動態(tài)蒙版說白了和普通形狀的動效是一樣的咙俩，無非以蒙版效果展現(xiàn)而已耿戚，依舊從最簡單的入手，來一個日食的效果阿趁。
動畫思路理一下

日食過程

這個用蒙版似乎很簡單膜蛔。當(dāng)一個白色底色上黑色圓形組成的蒙版從左到右水平位移時，自然就會遮擋住太陽

代碼如下：

<svg width="800"  height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0)}
100% {transform: translateX(390px)}
}
#dog{animation:animate 4s ease 2s}
</style>
<mask id="shade"> <rect x="0" y="0" width="800" height="600" fill="#FFFFFF"/><circle cx="205" cy="200" r="95" fill="#000000" id="dog"/></mask>
<circle cx="400" cy="200"  r="100" fill="#ff7f00" mask="url(#shade)" />
</svg>

產(chǎn)生的動畫效果是下面這種

天狗吃月亮

可是我還想用黑色的部分來表示被侵吞的太陽脖阵，怎么辦呢皂股？再加一個黑色圓形同步位移肯定是不行的，會露出來独撇。靈機(jī)一動屑墨，沒錯，我們可以讓太陽所在的圓形區(qū)域作為靜態(tài)蒙版的白色部分纷铣，加在同步位移的黑色圓形上卵史。然后再加上一個隨著太陽被侵吞的變化背景，代碼如下：

<svg width="800"  height="600" >
<style>
@keyframes animate1{  /*定義變化的背景色*/
0% {fill:#c0f1ff;}
50% {fill:#1d3074;}
100% {fill:#c0f1ff;}
}
rect{animation:animate1 4s;fill:#c0f1ff;}
@keyframes animate2{
0% {transform: translateX(0)}
100% {transform: translateX(390px)}
}
#dog{animation:animate2 4s}
</style>
<rect width="800" height="600" /> <!--先繪制最下層的天空-->
<circle cx="400" cy="200"  r="100" fill="#ff7f00"  /><!--其次是完整的太陽-->
<mask id="shade"><circle cx="400" cy="200" r="100" fill="#FFFFFF" /></mask>
<g mask="url(#shade)">
<circle cx="205" cy="200" r="95" fill="#000000" fill-opacity="0.7" id="dog" />
</g>
</svg>

效果如下：

加上天空變化

機(jī)智的你一定會發(fā)現(xiàn)搜立，咦以躯，這不是用不著動態(tài)蒙版了嘛，沒有關(guān)系啄踊，萬一其他地方用得上呢忧设，比如想做個月圓月缺對吧。

寫到這里颠通，感覺又啰里啰嗦說了太多址晕，所以還有一部分還是放到下篇吧。