繼續上篇
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扇形的效果
把剩下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蒙版動畫暫且告一段落，有其他簡單易用有趣的效果，再更新。