蒙版對於ui設計師來說，太熟悉不過了，當然了，可能ps裡面用的多一些，ai裡面用的少一些，svg同樣支援蒙版，而且借助蒙版，能完成很多神奇的效果。我喜歡稱蒙版動畫為一種魔術，這是真正的「障眼法」，它只讓你看到想要看到的部分。
前面svg的動畫效果裡，有兩次用過了蒙版，乙個是在路徑動畫中（juejin.im/post/590941… 這篇文章的結尾），利用蒙版的路徑描邊動畫，逐漸畫出白色的螺旋線，從而動態顯示底部的小豆豆組成的路徑，達到飛機撒播小豆的效果。
還有一次是在路徑變形動畫中（juejin.im/post/59195c… 第9部分的內容），利用蒙版的路徑變形動畫來實現鏤空圖形的變形動畫。這還只是蒙版動畫的冰山一角，下面會介紹幾個有代表性的應用，掌握了蒙版動畫之後，嗯，你會開啟一扇全新的門。
先簡單說一下svg蒙版的基本語法，給沒有svg基礎的ui設計師入入門。
"shade">"50" cy="50" r="30" />
"url(#shade)"/>複製**
這個嚴格來說不是蒙版動畫，而是蒙版下的動畫，還記得馮老闆的新電影《我不是潘金蓮》裡面獨特的表現手法吧，所有畫面集中於乙個圓形的視窗裡，那用蒙版來實現的話，就是黑色底上放乙個白色的圓形。下面就來模擬一下這種效果。這是我做的乙個水波紋的動態效果
（實現方法可以參考以前發過的路徑變形動畫）。
水波紋動態效果
一開始說過預設的蒙版是全黑的，這樣我們只需要加白色乙個圓形就可以實現圓形的視窗了。
蒙版動畫原理
簡化**及注釋如下：
複製**動態漸變背景
那這個動態漸變如何賦給文字呢？簡單，我只需要像如下定義一下文字蒙版就可以了
"shade">生如夏花
"url(#shade)">
"0" y="0" width="3800" height="3600" fill="url(#dream)"/>
複製**
文字蒙版實現動態漸變填充
文字蒙版實現的動態漸變描邊
見識過文字蒙版之後，說一下帶透明度的蒙版，svg的蒙版真真是和作圖工具中的蒙版一模一樣，依然支援透明度，漸變，怎麼都行，因為我沒想到太好的案例，所以還是拿我們上面的案例下刀吧。
我給文字蒙版的上面再加乙個蒙版，蒙版新增方式如下：
再套一層蒙版
**如下：
"shade"> "" y="" >生如夏花
"shade2">
"#969696" x="0" y="0" width="800" height="150">
"#ffffff" x="0" y="150" width="800" height="300">
"url(#shade2)">
"url(#shade)">
"0" y="0" width="3800" height="3600" fill="url(#dream)" id="aaa"/>
複製**
水晶效果
新加的蒙版產生了水晶效果。
漸變的效果來看一下
加漸變蒙版後的效果
雖然不及上面那個效果明顯，但還是可以看出來蒙版發揮的作用。以上都是靜態蒙版的應用，其作用就是重新生成乙個視窗。下面，要開始動態蒙版的介紹了，等真正會用動態蒙版之後，svg動畫簡直可以發揮想象不到的強大。動態蒙版說白了和普通形狀的動效是一樣的，無非以蒙版效果展現而已，依舊從最簡單的入手，來乙個日食的效果。
動畫思路理一下
日食過程
這個用蒙版似乎很簡單。當乙個白色底色上黑色圓形組成的蒙版從左到右水平位移時，自然就會遮擋住太陽
**如下：
複製**天狗吃月亮
可是我還想用黑色的部分來表示被侵吞的太陽，怎麼辦呢？再加乙個黑色圓形同步位移肯定是不行的，會露出來。靈機一動，沒錯，我們可以讓太陽所在的圓形區域作為靜態蒙版的白色部分，加在同步位移的黑色圓形上。然後再加上乙個隨著太陽被侵吞的變化背景，**如下：
複製**加上天空變化
機智的你一定會發現，咦，這不是用不著動態蒙版了嘛，沒有關係，萬一其他地方用得上呢，比如想做個月圓月缺對吧。
寫到這裡，感覺又囉裡囉嗦說了太多，所以還有一部分還是放到下篇吧。
ui設計師技能， 熟練的ui設計師
ui設計師技能，熟練的ui設計師。作為乙個ui設計師，到底應該具備什麼技能，是不是只要可以熟練的應用軟體或者只要具備一定的思維就可以成為乙個優秀的ui設計師呢?很顯然不是，那麼ui設計師應該具備怎麼樣的技能呢，今天就跟我一起來了解了解吧！1 軟體工具的熟練 首先是ps軟體，不管我們是做ui介面還是運...
UI設計師前景
ui大時代 ui設計概述 前言 近幾年，有乙個新興的詞在設計領域誕生，這個詞就是 ui 在短短的幾年裡ui設計師越來越多，設立ui部門的企業越來普遍，各大院校也出現了和ui相關的專業，ui 設計的組織和 層出不窮。這一切都預示著乙個 ui 大時代已經到來。到底什麼叫ui設計，什麼是ui設計師，ui設...
採訪UI設計師Kiro
採訪ui設計師kiro 曾子鋒 網名 kiro來自團隊 eicostudio eicostudio的採訪 2s space 所獲獎項 2006 gui國際冠軍賽最佳易用性圖示 金獎 之後，就把他當成努力的目標。2s space是我和coffee一起創立的乙個ui設計工作室。早期我們只建立了乙個名為2...