卡牌特效: svg不规则倒计时动效
导语：直播过程中，往往会有各种动画特效增强直播效果，近期需求中，设计要求在企鹅电竞PC官网上实现一种卡牌效果，在不规则图片上叠加倒计时效果。前端项目中，往往使用css来完成动画，像倒计时效果也可以使用css完成，但是相对来说css实现方案比较复杂，层次嵌套较多。倒计时动效要求覆盖图片的倒计时阴影为非规则且半透明的。在日常的圆环动画中，也会有类似的倒计时效果，只不过圆环是规则的，实现起来比较简单。但是基于圆环效果，再加上svg的mask特性，就可以实现此类特殊效果。
[ 实现动态图]
css的mask属性可以切割图形，实现不规则图形，但是css mask属性兼容性比较差。canvas基于像素绘制，上下文占用内存大，多次切换上下文会造成内存释放慢，影响到页面的流畅度。而svg的兼容性好，基于XML，比较轻量，而且当前特效的XML结构比较简单，不会影响页面性能，鉴于当前页面已经有多处特效使用canvas绘制，基于性能考虑，本次方案不采用canvas实现。综合对比后决定用svg来实现这个效果。
实现方式 | 兼容性 | 性能（小规模） |
|---|---|---|
css(mask) | 差 | 一般 |
canvas | 好 | 一般 |
svg | 好 | 好 |
效果分为两部分，下层部分是一张静态图，上层部分是倒计时效果。实现难点在倒计时效果上，而倒计时效果又可以分为几部分：
1、实现半透明倒计时图层，且时间可随意设置；
2、实现切割半透明倒计时蒙版；
3、把蒙版作用在倒计时图层，并覆盖在静态图上；
4、组件化，可实现各种不规则图形的效果；
SVG半透明倒计时图层
1. 圆环效果
在一些页面中，经常可以看到一些圆环进度条，因为svg实现简单，所以这些基本上都是用svg的实现，svg circle是svg绘制圆形矢量图的属性，它支持设置以下属性：
cx，cy：坐标位置
r：半径
stroke-width：填充宽度
fill：填充内容
stroke-dasharray：虚线宽度
transform：变换
下面用几行代码演示svg圆环图：
<svg xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg"width="200" height="200"><circle cx="50%" cy="50%" r="40%" stroke-width="20%" stroke="#D1D3D7" fill="none"></circle><circle class="transformNe90" cx="50%" cy="50%" r="40%" stroke-width="20%" stroke="#00A5E0" fill="none" stroke-dasharray="100 502.7"></circle></svg>
[ svg圆环图 ]
2. 虚线效果
实现这个效果的重点在circle的stroke-dasharray属性，stroke-dasharray在SVG中表示的是描边虚线。需要传入两个值，第一个是虚线的宽度，第二个是虚线之间的间距stroke-dashoffset，下面看一下用stroke-dasharray实现的虚线效果：
<svg width="200" height="200" viewPort="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"><line stroke-width="2" stroke-dasharray="5, 5" stroke="black" x1="10" y1="10" x2="190" y2="10"></line><line stroke-width="2" stroke-dasharray="5, 10" stroke="black" x1="10" y1="30" x2="190" y2="30"></line><line stroke-width="2" stroke-dasharray="10, 5" stroke="black" x1="10" y1="50" x2="190" y2="50"></line><line stroke-width="2" stroke-dasharray="5, 1" stroke="black" x1="10" y1="70" x2="190" y2="70"></line><line stroke-width="2" stroke-dasharray="1, 5" stroke="black" x1="10" y1="90" x2="190" y2="90"></line><line stroke-width="2" stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110"></line><line stroke-width="2" stroke-dasharray="15, 10, 5" stroke="black" x1="10" y1="130" x2="190" y2="130"></line><line stroke-width="2" stroke-dasharray="15, 10, 5, 10" stroke="black" x1="10" y1="150" x2="190" y2="150"></line><line stroke-width="2" stroke-dasharray="15, 10, 5, 10, 15" stroke="black" x1="10" y1="170" x2="190"y2="170"></line><line stroke-width="2" stroke-dasharray="5, 5, 1, 5" stroke="black" x1="10" y1="190" x2="190" y2="190"></line></svg>
[ svg虚线图 ]
3. 实现圆环
从上面的虚线图可以看出，stroke-width表示虚线的“高度”，虚线的宽度是stroke-dasharray的第一个参数值，虚线间隔是stroke-dasharray的第二个参数值。
在实现圆环效果时，也是这个原理，stroke-width表示圆环的边框宽度，stroke-dasharray的第一个参数为圆环边框的可见长度，stroke-dasharray的第二个参数为圆环边框的非可见长度。
如果把stroke-dasharray设置为"0 a"，其中a大于等于圆环的周长时。此时整个圆环的可见长度为0，非可见长度为a，整个圆环不可见，表现为圆环进度条为0，若增大可见长度，便可以看到圆环进度条增长了。
[ 可见长度为0 ]
[ 可见长度为10% ]
[ 可见长度为100% ]
4. 圆环动画
svg的animate属性可以实现svg动画，它支持设置以下属性：
attributeName：要变化的元素属性名称
attributeType：CSS | XML | auto
begin，end：开始结束时间，可以是单时间或分号隔开的时间列表，常见单位有 “h”|”min”|”s”|”ms”
from, to, by, values 开始结束点
fill：表示动画间隙的填充方式。支持参数有：freeze | remove. 其中remove是默认值，表示动画结束直接回到开始的地方。freeze“冻结”表示动画结束后像是被冻住了，元素保持了动画结束之后的状态。
repeatCount：动画执行次数
repeatDur：定义重复动画的总时间
当stroke-dasharray的可见长度等于圆环的周长，此时可见长度刚好覆盖了整个圆环，基于以上的实现，再加上动画，就可以实现圆环动画了
<svg xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg"width="200" height="200"><circle cx="50%" cy="50%" r="40%" stroke-width="30" stroke="#D1D3D7" fill="none"></circle><circle cx="50%" cy="50%" r="40%" stroke-width="30" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="0 502.7"><animate attributeType="XML" attributeName="stroke-dasharray" from="0" to="502.7" dur="10s" fill="freeze" repeatCount="10"></animate></circle></svg>
[ 动态圆环 ]
5. 实心环形动画
接下来就是要把圆环动画扩宽到实心环形动画。那么若增大storke-width，会发现圆宽度会向内外扩展
[ stroke-width等于半径 ]
继续增大stroke-width，使得stoken-width等于圆的直径，因为设置r=”40%”,所以stroke-width=”80%”。此时填充的位置刚好覆盖到圆的中心
这里需要注意的是stroke-dasharray的起始位置在右侧，而不是上方，因此，需要使用transform逆时针旋转90°，所以通过添加class="transformNe90"旋转整个circle动画
<svg xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg"width="200" height="200"><circle cx="50%" cy="50%" r="40%" stroke-width="80%" stroke="#D1D3D7" fill="none"></circle><circle class="transformNe90" cx="50%" cy="50%" r="40%" stroke-width="80%" stroke="#00A5E0" fill="none" stroke-dasharray="0 502.7"><animate attributeType="XML" attributeName="stroke-dasharray" from="0" to="502.7" dur="10s" fill="freeze" repeatCount="10"></animate></circle></svg><style>.transformNe90 {transform: rotate(-90deg);transform-origin: center center;}</style>
[ stroke-width等于直径 ]
此时倒计时效果刚好覆盖了整个圆，填充的倒计时效果完成。
实现切割半透明倒计时蒙版
1. css遮罩层
了解svg蒙版，先了解一下css的遮罩mask属性，css mask遮罩属性是一个很古老的属性，它的原理是黑透白不透，它是基于图像的alpha计算遮罩程度的，颜色越深透过遮罩层的可见视图就越多，如果是全黑就会全透，同理全白就会透不过，看起来就像把白色区域的图形给切掉了。它支持在样式中设置以下几种属性：
mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite
mask-image指遮罩使用的图片资源，所支持的图片类型非常的广泛，可以是url()静态图片资源，格式包括JPG，PNG以及SVG，使用mask-image我们可以遮罩出任意我们想要的图形，非常强大。下面看一个用css mask实现的遮罩效果：
<style>.mask-image {width: 200px; height: 200px;-webkit-mask-image: url(http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png);mask-image: url(http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png);}</style><div style="width: 200px;height: 200px; background: #00A5E0" class="mask-image"></div>
[ css mask]
2. svg蒙版
从上面这个的例子，我们可以看出，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。同比，我们在svg中也使用svg的蒙版属性mask来实现遮罩。
<svg xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg"width="200" height="200"><mask id="maskId" patternUnits="userSpaceOnUse" ><image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png" width="100%" height="100%" /></mask><rectx="0"y="0"width="100%"height="100%"fill="#00A5E0"mask="url(#maskId)"/></svg>
[ svg mask ]
3. svg的蒙版mask-type
可以看到，基于svg 的mask属性，可以生成一块用于切割倒计时动画的遮罩层。但是有些地方是半透明的是怎么回事，实际上svg的mask属性，其遮罩类型是luminance，也就是基于亮度来进行遮罩的。因此只需要把mask的mask-type设置为基于透明度就可以了mask-type='alpha'：
<mask id="maskId" patternUnits="userSpaceOnUse" mask-type="alpha"><image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/pkcard_placeholder.png" width="100%" height="100%" /></mask>
[ mask-type='alpha' ]
被遮罩的倒计时效果
基于以上的倒计时效果和蒙版遮罩层，再设置circle上面的stroke属性的颜色值为rgba(0,0,0,.5)，就可以实现半透明的遮罩层。综合上面的倒计时效果，就可以实现想要的半透明不规则倒计时效果。
由于为了把circle的倒计时起点设置为顶部，加了类transformNe90旋转了90度，因此在图形遮罩层上，需要设置类transform90实现反方向90度的旋转：
<svg xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg"width="200" height="200"><mask id="maskId" patternUnits="userSpaceOnUse" mask-type="alpha"><image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/fushenka2.png" width="100%" height="100%" class="transform90"/></mask><image x="0" y="0" xlink:href="http://imgcache.gtimg.cn/club/pgg/ams/img/fushenka2.png" width="100%" height="100%"/><circle class="transformNe90" cx="50%" cy="50%" r="50%" stroke-width="100%" stroke="rgba(0,0,0,.5)" fill="none" stroke-dasharray="628.32 628.32" mask="url(#maskId)"><animate attributeType="XML" attributeName="stroke-dasharray" from="0" to="628.3" dur="10s" fill="freeze" repeatCount="10"></animate></circle></svg><style>.transform90 {transform: rotate(90deg);transform-origin: center center;}.transformNe90 {transform: rotate(-90deg);transform-origin: center center;}</style>
[ 不规则倒计时动效 ]
组件化，实现各种不规则图形的倒计时效果
基于以上的实现，已经实现了一个固定长宽，固定图，固定透明度的不规则倒计时效果，但是在实际的应用中，我们需要兼容各种不同尺寸的图形，因此需要把它抽象成组件，支持设置image的src、height、width以及circle的dur、from等属性
<svgxmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg":width="width":height="height":viewbox="'0 0 ' + width + ' ' + height"class="pk-countdown"><defs><mask :id="maskId" patternUnits="userSpaceOnUse"><image x="0" y="0" width="100%" height="100%" class="transform90" :xlink:href="src" /></mask></defs><image x="0" y="0" :xlink:href="src" width="100%" height="100%" /><circlecx="50%"cy="50%"r="50%"stroke-width="100%":stroke="'rgba(0,0,0,' + opacity + ')'"fill="none":stroke-dasharray="'0 ' + circle":mask="'url(#'+maskId+')'"class="transformNe90"><animateattributeType="XML"attributeName="stroke-dasharray":from="circleStart":to="circle":dur="duration + 's'"fill="freeze":repeatCount="repeatCount"/></circle></svg>...circleStart() {return (this.process / this.duration) * this.circle},circle() {return (Math.PI * 2 * Math.max(this.width, this.height)) / 2}
这样就可以通过父组件传递属性，控制倒计时效果的各种属性，实现通用的不规则倒计时效果。
总结
svg是一个很强大的矢量图绘制工具，可以直接内嵌到网页的dom中，并且可以通过css设置svg的各种属性，相对于canvas，它的操作更加灵活，实现更加简单。结合svg的mask和filter等属性，可以实现很多酷炫的效果。而且它的兼容性好，基本主流的浏览器都支持，还兼容到IE9，对于需要用css实现的复杂效果，都可以考虑用svg实现。
附图：
[ svg兼容性 ]