导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞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>   <rect       x="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等属性

<svg   xmlns: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%" />     <circle       cx="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"     >       <animate         attributeType="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兼容性 ]

文章来源于腾讯云开发者社区,点击查看原文