卡牌特效: 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>

<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兼容性 ]

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章