阅读 1840

CSS3动画实战之多关键帧实现无限循环动效的时间间隔

题目有点绕,源起最近一个项目中所需的一枚loading图标。SVG+CSS3动画做了那么多,真正应用在项目中的机会少之又少,所以,抓住一切机会,即使loading也不能放过,用系统自带菊花有辱我这一年的修炼。在最后完美做成的过程中,解决了两个问题,第一,是非等粗交叉路径的描边动画实现,第二,是多个拼接动画的无限循环问题,后者困扰了许久,所以,当这个问题解决时,急于分享出来,便于其他的设计师小伙伴遇坑时一笑而过,也就是这篇文章的起因了。

1.如果只是简单的描边动画

是的,我是说如果只是如果。先看下要实现的动效。

左边是真身,很简单的一个企业的logo,因为是这种连笔式的,所以本能的反应适合描边动画,动态展示logo绘制过程。右边就是初步想法,绘制过程。看上去很简单,啊哈,来,透过现象看本质。如果这个图标是下面这种,对,就是我曾经的心头好,网易云音乐,因为随手用钢笔画的,没有用布尔运算,所以略显粗糙。这种来个描边动画,那简直是分分钟搞定的事情。

这种描边动效通过定义stroke-dashoffset属性来实现(from 0; to length),非常简单,以前的文章中也写过戳这里戳这里,此处略过。好了,为什么说这种好实现呢,因为描边只要定义三个样式的属性值stroke-linecapstroke-linejoinstroke-width就好。

好了,不说别人的logo描边动效多好实现了,来分析一下现在的案例,难度在哪里?非线性啊亲们。如果这个图标是下面这种的:

简单不简单,你就说简单不简单!当然,让甲方爸爸改图标是不现实,如果妥协做个神似形不似版的那还不如菊花了(转行做美工久了,没点强迫症还真是不行)。现在开始,找解决方法,突破,分析问题的能力还是有的。我想到的方法是万能的蒙版。蒙版是个好东西啊,能遮住所有你不想看到的,那直接给路径描边动画加个蒙版就好了呗。

白色蒙版是logo部分,其余黑色的部分遮住。之所以描边给了很粗,就是因为这个logo本身起点处较粗,需要加粗的描边路径经过所有的logo部分。那么,还以为这样就完了?

2.如果只是路径不重合的描边动画

是的,我是说如果只是如果。继续举个栗子,如果是下面这种logo,这事就又简单多了。这是个什么,鬼知道,我就随手搞了一个不等粗的描边而已。

看,上面分析的使用蒙版的思路也是对的吧?轻松实现了不等粗的logo描边效果。

那来看看真实案例,准备好,打脸( ̄ε(# ̄)☆╰╮( ̄▽ ̄///)。效果是这样的!!!

其实 也蛮好理解的,主要是交叉部分出了问题。当第一遍描边动画路过交叉点的时候,已经透过蒙版显示了与描边等宽的部分。

3.来吧,解决问题吧

当然,这点区区的小困难是不会让我放弃的。既然在交叉点那里纠缠不清,那就快刀斩乱麻,把路径剁开就好(暴露了暴力的本性)。

每段各司其职,定义好时间延迟,ok了。简单贴上点代码凑凑字数,CSS部分

	/* 定义一个统一的改变stroke-dashoffset值的动画属性*/
	@keyframes  dash{
	to {stroke-dashoffset: 0;}
    }
	@keyframes  dash{
	#MH_Path1{
	stroke-dasharray:705;  /* 705为第一段分段路径的长度*/
	stroke-dashoffset:705;     
	animation: dash 0.7s linear  forwards; /* 0s开始,持续0.7s*/
	}
	#MH_Path2{
	stroke-dasharray:645;  /* 645为第二段分段路径的长度*/
	stroke-dashoffset:645;
	animation: dash 0.6s linear  0.7s forwards;  /* 延迟0.7s开始,持续0.6s*/
	}
	#MH_Path3{
	stroke-dasharray:108;  /* 108为第三段分段路径的长度*/
	stroke-dashoffset:108;
	animation: dash 0.1s linear   1.3s forwards;   /* 延迟1.3s开始,持续0.1s*/
	}
复制代码

DOM部分,因为三部分蒙版图形要被复用一次作为浅灰色logo底图(或者也可以单独导出路径,但毕竟不是最优化的方法),所以我用<symbol>来定义三部分的图形。

	<symbol id="logo1">
	<path d="" /> <!-d值对应第一部分蒙版的路径-->
	</symbol>
	<symbol id="logo2">
	<path d="" /> <!-d值对应第二部分蒙版的路径-->
	</symbol>
	<symbol id="logo3">
	<path d="" /> <!-d值对应第三部分蒙版的路径-->
	</symbol>
	
	<!--定义三部分蒙版,用use标签去引用 -->
	<mask id="MH1"><use xlink:href="#logo1" /></mask>
	<mask id="MH2"><use xlink:href="#logo2" /></mask>
	<mask id="MH3"><use xlink:href="#logo3" /></mask>

	<!--底层浅灰色logo-->
	<g fill="#ede8e6">
	<use xlink:href="#logo1" />
	<use xlink:href="#logo2" />
	<use xlink:href="#logo3" />
	</g>
	
   <path  mask="url(#MH1)"  id="MH_Path1"    d="" /> <!-d值对应第一段分段路径-->
	<path  mask="url(#MH2)"  id="MH_Path2"    d="" /><!-d值对应第二段分段路径-->
	<path  mask="url(#MH3)"  id="MH_Path3"    d="" /><!-d值对应第三段分段路径-->
复制代码

经过路径和蒙版的剪切,得到了下面这枚半成品的loading logo。

4.或许,这里才是真正的干货

看起来似乎没有问题了,蒙版拼接+路径拼接,交叉点的问题已然解决。但这不过是SVG+CSS3动效的活学活用,这样的案例随随便便拿一个来都可以分析,不足以成文。

loading图标算是完成了,but just done ,not perfect。我们都知道,加载的时间是不可控的,那么,完成一次描边动画后,理论上应该开始下一轮,animation有个属性是animation-iteration-count,也就是动画播放次数,像我们转圈圈的菊花图标,一般都会定义值为infinite,也就是无限循环,那在这个案例中,问题出在什么地方呢?

再回过头看我们的描边动画属性的定义,我以最有代表性的第二段为例:animation: dash 0.6s linear 0.7s forwards,后面的0.7s是动画延迟开始的时间,在进行无缝拼接的时候,第二段描边动画开始的延迟时间就是第一段动画的时间,同理,第三段动画开始的延迟时间为动画一加动画二,当没有定义执行次数时,默认执行一次。那么,当我们加上这个无限循环的属性值之后,来看看动画变成了什么样子。

看上去乱七八糟,那是因为被切割的每段都在单独执行自己的循环,是的,动画执行的次数可以无限循环,但延迟只能被执行一次,并没有什么特殊的属性可以控制在每个循环开始之前都执行延迟。至少现在没有,但CSS3是不是可以考虑加上新的规范(又在浮想翩翩中,醒醒吧)。通过最常用的infinite属性来控制无限循环的泡沫已然破碎,但这个问题会是无解的么?(又在废话,无解的话这篇文章意义何在?)

现在来想一下,控制延迟时间,除了直接在animation属性中直接写时间值来定义,还有什么方法。对,就是关键帧@keyframes(嗯,俨然又开启了愉快的自问自答模式)。从现在开始,为了infinite属性可以发挥作用,我的三部分动画不再设任何延迟,共用相同的全程动画时间,取而代之通过@keyframes来控制开始和结束的时间。看一下下面这张图或许有助于理解:

下面,我要通过控制@keyframes的时间节点来控制每段动画的时间区间,至于为什么选择45%和90%作为节点,无他,只是估摸了一下每段动画的时间的比例,为了好计算而已。我把整个动画时间周期设计成了2s,DOM部分没有变化,但CSS部分需要完全重新定义。首先,通用的改变stroke-dashoffset值的动画属性的设置已经无用了,因为不是从0%到100%执行,而是打断了,具体的打断方法各个部分又有所不同。

	@keyframes  MH_Path1{
	0%{stroke-dashoffset:705;}
	45%, 100%{stroke-dashoffset: 0;}
	}
	/* 0s开始,持续0.9s,1.1s延迟*/

	#MH_Path1{
	stroke-dasharray:705;
	animation: MH_Path1 2s linear both infinite;
	}

	@keyframes  MH_Path2{
	0%, 45% {stroke-dashoffset: 645;}
	90%, 100%{stroke-dashoffset: 0;}
	}
	/* 0.9s开始,持续0.9s,0.2s延迟*/

	#MH_Path2{
	stroke-dasharray:645;
	animation: MH_Path2 2s linear both infinite;
	}

	@keyframes  MH_Path3{
	0%, 90% {stroke-dashoffset: 108;}
	100%{stroke-dashoffset: 0;}
	}
	/* 1.8s开始,持续0.2s*/

	#MH_Path3{
	stroke-dasharray:108;
	animation: MH_Path3 2s linear both infinite;
	}
复制代码

在第一段路径中,我在45%处即执行完成了整个描边动画过程,而剩下的从45%到100%部分,因为没有任何变化,所以自然而然的生成了延迟时间,对应定义45%, 100%{stroke-dashoffset:0;};第二段则需要同时控制开始和结束,同理,第三段则只需要控制开始时间。

是时候检验一下效果了:

如果是整个动画需要延迟开始,那就简单的多,只需要在每个animation属性中写入需要延迟的时间就可以了,三个不分彼此,相同的定义,完美共享。

在做这次案例的过程中,最大的收获就是通过定义关键帧实现了多个拼接的动画(或者称之为有延迟效果的动画)的无限循环问题,所以,你压轴!

codepen预览在这里,戳戳戳

关注下面的标签,发现更多相似文章
评论