繼續(xù)上篇

6.動態(tài)蒙版位移的產(chǎn)生的掃描效果

這個算是上篇末尾的一點(diǎn)小改進(jìn)，單獨(dú)拿出來說，因?yàn)檫@種效果用的場景很多，關(guān)鍵還簡單，先看示意圖。

設(shè)想一下，給文本應(yīng)用一個蒙版，蒙版的白色部分從左向右移動，是不是就有一種文本逐漸顯示的效果。

<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>

這次，我把文本應(yīng)用蒙版寫到了css里mask:url(#shade) 效果是一樣的。

掃描效果

效果還不夠炫，但當(dāng)你把這個放到黑色背景上，再加個一個圓形外發(fā)光和照亮底色的效果就會改善了很多。這里注明一下，在html里用CSS3的box-shadow屬性就可以實(shí)現(xiàn)外發(fā)光了，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>

也能實(shí)現(xiàn)外發(fā)光，但邊緣實(shí)在太過鋸齒化，所以變通一下，把一個實(shí)色的圓形放到一個漸變的圓形上了。
這里沒有其他需要注意的了，主要把形狀的上下順序理清楚就行，我用代碼解釋一下：

<rect x="0" y="0" width="800" height="400"/><!--黑色矩形底色-->
<g id="scan"><!--移動的外發(fā)光&變亮底色的圓形-->
<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><!--應(yīng)用了蒙版的文本-->

瀏覽器先渲染黑色背景，然后依次是移動的圓形發(fā)光區(qū)，最后是同步顯示文本。

加了外發(fā)光光環(huán)的效果

逐幀播放的聚光燈效果

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

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

7.動態(tài)蒙版變形動畫

使用變形動畫后的蒙版基本就是獨(dú)步天下無人能擋了，只說一個簡單的應(yīng)用，來看一下到底有多強(qiáng)大。我想做一個角度逐漸增大的扇形。我們知道，circle并沒有允許隨便定義角度生成任意的扇形，當(dāng)然了，你可以設(shè)置三個點(diǎn)，一個是固定的圓心，一個是位于圓周的固定的起點(diǎn)，然后另外一點(diǎn)沿圓周運(yùn)動，再把兩個直線和一段變量圓弧相連，我就問你麻煩不麻煩？！而且對于UI設(shè)計(jì)師來說，沒有函數(shù)基礎(chǔ)，怎么搞，怎么搞。
讓蒙版來搞啊。我先用AI做一個漂亮的圓形底圖，想怎么漂亮就怎么漂亮，想多復(fù)雜就多復(fù)雜。像下面這種：

納尼，虛張聲勢了半天，搞出這個來。因?yàn)橛袧u變，所以導(dǎo)出的SVG各種亂，各種看不懂，不用管，瀏覽器能看懂就行。
我要實(shí)現(xiàn)的，就是這個圓形從0開始，角度逐漸增大到360°全部顯示的一個動態(tài)過程。
逐漸顯示這種東西，用蒙版最合適不過了，不過扇形蒙版？！不會！但我有個討巧的方法。
反正蒙版你又看不見對不對，反正你也只能看到蒙版下面的東西對不對，所以扇形不好做，我可以弄個三角形嘛。

扇形動畫實(shí)現(xiàn)方式

當(dāng)這個多邊形的坐標(biāo)我很容易獲得，當(dāng)這個三角形的其中一個點(diǎn)從A到B實(shí)現(xiàn)動態(tài)變形，自然下面的扇形就逐漸露出來了。輕松就能實(shí)現(xiàn)90度的效果，那剩下3/4怎么辦？多擺幾個就有了。
這里三角形的路徑我直接用手動寫，我的圓心坐標(biāo)和三角形的一個頂點(diǎn)重合(400,300)，圓的半徑是150，為了讓三角形蒙版越過圓弧，我定義的三角形略大一些，直角邊長250，起始點(diǎn)坐標(biāo)為(650,300)，終點(diǎn)坐標(biāo)為(400,50)，白色三角形蒙版的變形動畫如下：

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

看看這1/4扇形的效果

1/4扇形效果

把剩下3/4補(bǔ)齊了看一下

咔吧咔吧

效果倒是出來了，不夠絲滑。主要原因在于扇形角度的增加與路徑變形過程三角形邊長的增加不是等比例的。

8.雙重蒙版疊加實(shí)現(xiàn)的動效

上面那個咔吧咔吧逐漸顯示扇形的動畫效果，再換種思路，這次要實(shí)現(xiàn)旋轉(zhuǎn)蒙版和時間的雙重魔術(shù)。

蒙版旋轉(zhuǎn)實(shí)現(xiàn)

白色蒙版以底圖圓形中心點(diǎn)為旋轉(zhuǎn)中心點(diǎn)旋轉(zhuǎn)的過程就可以實(shí)現(xiàn)逐漸顯示的效果。

這里存在2個問題，前半程我需要遮蓋住多余的蒙版區(qū)域以及后半程我需要顯示上半部分固定的區(qū)域，依舊用蒙版疊蒙版來實(shí)現(xiàn)。

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

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

完美的扇形掃描效果

9.完全為我所用的動態(tài)蒙版

下面這個案例是想告訴設(shè)計(jì)師，你在AI（或ps）里怎么用蒙版，就可以把思路原樣復(fù)制到我們的動畫效果里來。比如UI設(shè)計(jì)師最愛用的布爾運(yùn)算，就可以轉(zhuǎn)換成有趣的動畫。

布爾運(yùn)算

得到動畫：

如果讓它旋轉(zhuǎn)起來，則看上去更動感一些：

加上旋轉(zhuǎn)效果

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