UI 設計師 SVG 動畫進階篇——蒙版動畫（下）

繼續上篇

6.動態蒙版位移的產生的掃描效果

這個算是上篇末尾的一點小改進，單獨拿出來講，由於這種效果用的場景不少，關鍵還簡單，先看示意圖。

設想一下，給文本應用一個蒙版，蒙版的白色部分從左向右移動，是否是就有一種文本逐漸顯示的效果。

<svg  width="800"  height="600" >
<style>
@keyframes animate{
0% {transform: translateX(0)}
100% {transform: translateX(800px)}
}
#scan{animation:animate 4s ease alternate infinite}
text{mask:url(#shade);text-anchor:middle;}
</style>
<mask id="shade"><circle cx="-40" cy="130" r="40" fill="#ffffff" id="scan"/></mask>
<text x="400" y="150">Vincent Willem Van Gogh</text>
</svg>複製代碼

此次，我把文本應用蒙版寫到了css裏mask:url(#shade) 效果是同樣的。

掃描效果

效果還不夠炫，但當你把這個放到黑色背景上，再加個一個圓形外發光和照亮底色的效果就會改善了不少。這裏註明一下，在html裏用CSS3的box-shadow屬性就能夠實現外發光了，SVG略麻煩一些，要定義一個徑向漸變。
我試了一下，若是把徑向漸變定義成這樣：

<radialGradient id="glow" fx="50%" fy="50%" cx="50%" cy="50%" r="50%"> 
<stop offset="80%" stop-opacity="0"/> 
<stop offset="80%" stop-color="#ffd800" stop-opacity="0.8"/> 
<stop offset="100%" stop-color="#ffd800" stop-opacity="0" /> 
</radialGradient>複製代碼

也能實現外發光，但邊緣實在太過鋸齒化，因此變通一下，把一個實色的圓形放到一個漸變的圓形上了。
這裏沒有其餘須要注意的了，主要把形狀的上下順序理清楚就行，我用代碼解釋一下：

<rect x="0" y="0" width="800" height="400"/><!--黑色矩形底色-->
<g id="scan"><!--移動的外發光&變亮底色的圓形-->
<circle cx="-40" cy="130" r="55"   fill="url(#glow)" />
<circle cx="-40" cy="130" r="40"   fill="#322518" />
</g>
<text x="400" y="150">Vincent Willem Van Gogh</text><!--應用了蒙版的文本-->複製代碼

瀏覽器先渲染黑色背景，而後依次是移動的圓形發光區，最後是同步顯示文本。

加了外發光光環的效果

這裏插入一個小的知識點，關於CSS動畫運動速率那裏，有一個有趣的設置， steps()，前面咱們的運動都是連續的，關鍵幀以前自動生成補間動畫，這個呢，就是裏面的異類，取消補間，讓動畫逐幀播放產生卡頓效果。應用在這個動畫案例裏，我先把文本換成我博大精深的中文。而後舞臺聚光燈效果走起來！

逐幀播放的聚光燈效果

因爲CSS動畫屬性並無找到像SMIL的 accumlate:sum（結束後從結束狀態開始）的屬性定義，爲了達到這個效果，我把動畫屬性設置爲 animation:animate 4s steps(7,start)，再就是文字，爲了方便計算位移，我定義了 letter-spacing的值

@keyframes animate{
0%{transform: translateX(0)}
100%{transform: translateX(700px)}
}
#scan{animation:animate 4s steps(7, start)}複製代碼

解釋起來很簡單，就是整個動畫我分紅7段，不要補間動畫效果。

7.動態蒙版變形動畫

使用變形動畫後的蒙版基本就是獨步天下無人能擋了，只說一個簡單的應用，來看一下到底有多強大。我想作一個角度逐漸增大的扇形。咱們知道，circle並無容許隨便定義角度生成任意的扇形，固然了，你能夠設置三個點，一個是固定的圓心，一個是位於圓周的固定的起點，而後另一點沿圓周運動，再把兩個直線和一段變量圓弧相連，我就問你麻煩不麻煩？！並且對於UI設計師來講，沒有函數基礎，怎麼搞，怎麼搞。
讓蒙版來搞啊。我先用AI作一個漂亮的圓形底圖，想怎麼漂亮就怎麼漂亮，想多複雜就多複雜。像下面這種：

納尼，虛張聲勢了半天，搞出這個來。由於有漸變，因此導出的SVG各類亂，各類看不懂，不用管，瀏覽器能看懂就行。
我要實現的，就是這個圓形從0開始，角度逐漸增大到360°所有顯示的一個動態過程。
逐漸顯示這種東西，用蒙版最合適不過了，不過扇形蒙版？！不會！但我有個討巧的方法。
反正蒙版你又看不見對不對，反正你也只能看到蒙版下面的東西對不對，因此扇形很差作，我能夠弄個三角形嘛。

扇形動畫實現方式

當這個多邊形的座標我很容易得到，當這個三角形的其中一個點從A到B實現動態變形，天然下面的扇形就逐漸露出來了。輕鬆就能實現90度的效果，那剩下3/4怎麼辦？多擺幾個就有了。
這裏三角形的路徑我直接用手動寫，個人圓心座標和三角形的一個頂點重合(400,300)，圓的半徑是150，爲了讓三角形蒙版越過圓弧，我定義的三角形略大一些，直角邊長250，起始點座標爲(650,300)，終點座標爲(400,50)，白色三角形蒙版的變形動畫以下：

@keyframes deform{
0% {d:path('M400,300L650,300L650,300z')} /*變形前的三角形兩個點重合*/
100% {d:path('M400,300L400,50L600,300z')}
}
#animate{animation:deform 2s;fill:#FFFFFF}複製代碼

看看這1/4扇形的效果

1/4扇形效果

把剩下3/4補齊了看一下

咔吧咔吧

效果卻是出來了，不夠絲滑。主要緣由在於扇形角度的增長與路徑變形過程三角形邊長的增長不是等比例的。

8.雙重蒙版疊加實現的動效

上面那個咔吧咔吧逐漸顯示扇形的動畫效果，再換種思路，此次要實現旋轉蒙版和時間的雙重魔術。

蒙版旋轉實現

白色蒙版以底圖圓形中心點爲旋轉中心點旋轉的過程就能夠實現逐漸顯示的效果。

這裏存在2個問題，前半程我須要遮蓋住多餘的蒙版區域以及後半程我須要顯示上半部分固定的區域，依舊用蒙版疊蒙版來實現。

相對而言，旋轉的蒙版只要定義一個 transform:rotate就能夠實現了，那兩個固定蒙版有出場順序，反而要麻煩一些，實現方法有多種，我只說我選用的一個吧，仍是利用了step-start（等同於steps(1,start)）屬性。
個人實現方法是動畫一共定義兩幀，一幀爲填充色（黑色）位置（下方），在旋轉動畫完成一半時直接跳轉到填充色（白色）位置（上方）。

<style>
@keyframes rotate{
0% {fill:#FFFFFF;transform:rotate(0deg);transform-origin:400px 300px}
100% {fill:#FFFFFF;transform:rotate(-360deg);transform-origin:400px 300px}
}/*定義旋轉動畫*/
#animate{animation:rotate 2s linear ;fill:#FFFFFF}
@keyframes fix{
50% {fill:#000000;transform:translateY(0)}
100% {fill:#ffffff;transform:translateY(-300px)}
}/*定義跳轉動畫*/
#animate2{animation:fix 2s step-start;}
</style>
<rect x="0" y="0" width="800" height="600"/>
<mask id="shade">
<rect x="0" y="300" width="800" height="300" id="animate"/><!--先繪製白色旋轉蒙版-->
<rect x="0" y="300" width="800" height="300" id="animate2"/><!--再繪製黑變白&下變上蒙版-->
</mask>
<g mask="url(#shade)">…若干底圖圓形代碼…</g>複製代碼

就獲得了下面這種絲滑無比的扇形掃描效果

完美的扇形掃描效果

9.徹底爲我所用的動態蒙版

下面這個案例是想告訴設計師，你在AI（或ps）裏怎麼用蒙版，就能夠把思路原樣複製到咱們的動畫效果裏來。好比UI設計師最愛用的布爾運算，就能夠轉換成有趣的動畫。

布爾運算

獲得動畫：

若是讓它旋轉起來，則看上去更動感一些：

加上旋轉效果

SVG蒙版動畫暫且告一段落，有其餘簡單易用有趣的效果，再更新。