UI 设计师 SVG 动画进阶篇——蒙版动画（下）-CSDN博客

继续上篇

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>复制代码