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蒙版动画暂且告一段落，有其余简单易用有趣的效果，再更新。