2018正版葡京赌侠诗SVG多色描边变形动画实现流光溢彩图标

今在codepen看到一个作用如下:

认为非常好玩,作者是SVG结合canvas完成的,里面有着的门道有是SVG完成的,但动画效果是canvas完成的。canvas能看明白一抛丢,能更改一委丢,但未见面刻画(硬伤~),那即便因故极熟悉的SVG+CSS3看看能不能够成功了。

1.路线变形动画

事先来个拆分,动画是个别有的的结,流动的描边和变形动画。为了跟原作者有点区别,我准备召开四独模样的卡通片,哦吼吼,升级版本!在绘制时恍恍惚惚有种植小简笔画的觉得……

基本功图形变形过程

苟没其他的变形动画基础,请先走就三首文章,了解一下变形动画的贯彻原理与实操方法(自己推向自己之文章,我是欠来差不多脸皮厚呀):

https://juejin.im/post/591272f6da2f6000536f1aec
https://juejin.im/post/591514b2570c3500692d7235
https://juejin.im/post/59195c22a0bb9f005ff711b2

每当AI中哪些处理就在此处大概概括:
圈:闭合路径剪开(顶点),转成为开放路线,轻微拖动除由始锚点外的老三独锚点,消除导出路径<path>中小s的存在,使路径变成正规的小c开头的不二法门。
三角形:闭合路径剪开(顶点),转成开放路线,轻微拖动除由始锚点外之星星只锚点,使路径变成正规的小c开头的不二法门。(没错,我不怕是风传着之复读机君,我出什么艺术,处理方式满满的还是套路啊)
矩形:闭合路径剪开(左下角),转成开放路线,轻微拖动除由始锚点外之蝇头个锚点,使路径变成正规的小c开头的门路。(关于剪开路径的职务?这个嘛?没有干什么,我便想看有啊两样功效啊)
五边形:闭合路径剪开(左下角)……(此处省略重复步骤,巴拉巴拉……)

2.多边形<polygon>转成<path>小c标准路径

爆冷栽这么一截小直播,是我意识以这动画效果被,因为除此之外圆形,剩下的都是多方面形,其实<polygon points="X1,Y1 X2,Y2 …… "/>其一绘制方法是老大爱掌握的,都是多方面形顶点对应的绝对坐标,但为有周存在,我们无奈才要拿坏简短的作业复杂化,然后以AI里手柄拖来拖去的审好烦的好嘛,而且出或导出的SVG还有大C开头的,反反复复,不胜其烦,那么有没有发生同栽简易的办法可把这种多边形路线直接改动成小c绘制的科班路径的章程呢?有!
自己为五度形为例,图示一下:

多方形同路径的换

自身的五边形的五个顶坐标依次为X1,Y1 X2,Y2 X3,Y3 X4,Y4
X5,Y5,注意,这里说之坐标都是纯属坐标,即于AI中选中锚点之后的X值和Y值。关于具体的易,我以里面同样段路举例。我们事先看三坏贝塞尔曲线绘制路径的一声令下,也尽管是右绿色的曲线,每一样段落曲线都由起点与极端两个端点以及相应的少只控制点(也就算是咱AI中手柄的岗位)组成的,而当我们的支配点坐标越接近路径端点,曲线更平,当控制点与端点重合时,就收获了直线。
发生矣这概念基础,理解起来便便宜多矣,我要将<polygon>转换成<path>,首先,起点M的坐标(绝对坐标)显而易见就是多方面形顶点的坐标,当用绝对路径C表示路径1时常,起点A控制点坐标就是起点A坐标,终点B控制点坐标就是终点B坐标。这样还不够,我们用之是对立坐标表示方法的c指令,也就算是自家喜爱称“标准曲线”的东西。对于小c绘制方法指令而言,起点和极控制点的对立坐标最简便易行,就是0,0,但结尾一组相对坐标则要透过计量,B相对于A的位移距离,也不怕是终点B的断然坐标与起点A的对立坐标差。

自然了,如果您懒得看规律,觉得不行麻烦的说话,就得直接扣解决措施,即c0,0 0,0
X(终点-起点),Y(终点-起点)。坐标点可以以AI里面一直获取,但计算公式还是必要的。
因此,最终自的五边形成功的变成了<path d="MX1,Y1 c0,0 0,0 X2-X1,Y2-Y1 c0,0 0,0 X3-X2,Y3-Y2 c0,0 0,0 X4-X3,Y4-Y3 c0,0 0,0 X5-X4,Y5-Y4 c0,0 0,0 X5-X1,Y5-Y1">途径表示方法,这里说明一下,如果剪开路径时不易开,最后一段路是大C对应的绝对路径绘制方法,也便是CX5,Y5
X1,Y1 X1,Y1。

3.添加虚拟曲线

开得了上面的做事依旧没算了却,对于变形动画而言,曲线的多寡要当才会不负众望,而我辈的立刻四单图形,曲线数量分别是:圆→4,三角形→3,矩形→4,五边形→5,还好,没有选择最好复杂的图形,那就算被周和矩形加1个虚拟曲线,给三角形加两单虚拟曲线,大家全补给一起成5独了。(什么?你问问我呀是编造曲线?打滚……上面的章链接你未曾看,没看)
吓啊,加过亏心拟曲线,处理了的季独图形的<path>路线已经联合起来了,这样就得套用我们的变形动画了。
来拘禁一下变形动画的概念有:

@keyframes deform{
0% {d:path('');} /*圆形路径*/
25% {d:path('');}/*三角形路径*/
50% {d:path('');}/*矩形路径*/
75% {d:path('');}/*五边形路径*/
100%
}
#deform {animation:deform 3s ease infinite};

然后我们的<path>援这动画就吓了。就收获了变形动画:

仅的变形动画

哦,只是动了,但起来看上去不是老大炫,没事,go on。

4.流光溢彩动效

至于这种不同颜色沿着描边路径流动的意义,我打了个名让“流光溢彩”。先拿五止形为例,看一下单色流动动画的装置,之所以没有拿圆形举例,是胆战心惊您想就此旋转来促成啊:

<style>
@keyframes animate {
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:1356} /*五边形的周长*/
}

#animate{
animation:animate 2s linear infinite;
stroke-dasharray:678;  /*五边形1/2周长*/
}
</style>

得到效果如下:

单色描边动画

规律我概括解释一下,dashoffset为虚线偏移职,dasharray定义了虚线的体制,只生一个值的语,则代表线长和间隔等丰富,如下图示:

dasharray和dashoffset

当我们将stroke-dasharray定义成1/2周长时,相当给为图形实现了大体上描边效果,而CSS中stroke-dashoffset的价的扭转,则指向应生成了动效,定义差值为周长凡是为兑现首尾相接连绵不断的成效。注意一下,这里说差值为周长,也就是说要新始0%对应之
stroke-dashoffset如果无是0,
那了时100%遥相呼应之啊要扭转,这是咱们下面实现四独颜色流动的基础。
此地而将stroke-dashoffset的价值改成为等值负数,会拿走相反方向的动画片效果,感兴趣之话语可友善试一下。

好了,逐步推进,实现了单色流动,那双色怎么处置?要再次定义一个动态单色流动动画,然后开展叠加么,哎,我们这种懒人总是想尽偷懒,因为自己要被这个单色流动的动效的脚加一个均等路线实色描边,就赢得了这种效果:

双色描边动画

嗯,双色流动已经就(此为懒人法,非正解,无需掌握,看了算完)。
好了正规进阶开始了,上面偷懒法只会迎刃而解个别只颜色的问题,当我急需差不多单颜色,肿么办?
哦,乖乖的多定义几独描边动画设置,去形容CSS属性吧。因为每个<path>路只辨认一个描边效果,那这种多色的只能用多长长的相同路线叠加来落实了。我于是图示来代表一下:

多色拼接原理

本了,针对我们四个颜色,如果把同之五度形路线重复四全是灾难性的,这里我们好用<defs>要素或<symbol>素来定义需要再行的路,然后据此<use>要素来引用,推荐<symbol>,是由于<symbol>支持的性质更多,虽然以这案例被无法体现出来,但养成好习惯,需要用<defs>的且可就此<symbol>来代表。这里因dasharray的定义相同,所以集合到了路线内联属性里。
来看看代码有:

<svg>
<style>
@keyframes animate1 {
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:1356}/*1356是路径的长度*/
}
@keyframes animate2 {
0%{stroke-dashoffset:339}/*定义了四个颜色,所以339是1/4周长*/
100%{stroke-dashoffset:1695}/*需要dashoffset变化值是一个周长来实现首尾相接*/
}
@keyframes animate3 {
0%{stroke-dashoffset:678}
100%{stroke-dashoffset:2034}
}
@keyframes animate4 {
0%{stroke-dashoffset:1017}
100%{stroke-dashoffset:2373}
}
#animate1 {
animation:animate1 2s linear infinite;
stroke:#ffb850;
}
#animate2 {
animation:animate2 2s linear infinite;
stroke:#ff7e5d;
}
#animate3 {
animation:animate3 2s linear infinite;
stroke:#8cd2a4;
}
#animate4 {
animation:animate4 2s linear infinite;
stroke:#62adea;
} 
</style>
<symbol><!--用symbol来定义需要重复引用的相同路径-->
<path id="pentagon" d="" stroke-width="10" stroke-dasharray="339 1017" fill="none"/></symbol>
<use xlink:href="#pentagon" id="animate1"/>
<use xlink:href="#pentagon" id="animate2"/>  
<use xlink:href="#pentagon" id="animate3"/>
<use xlink:href="#pentagon" id="animate4"/>  
</svg>

尚算挺鲜明的,而且一旦因此五只颜色,那即便开始的dashoffset递增1/5周长,然后改成一下dasharray为线长1/5
间隔4/5 就好了。

获得的意义如下:

季种颜色流动

5.双效合

单身设计形状之间的变形动画与同一形状的不比颜色描边的动画都曾落实了,现在如果举行的饶是将立即半独功能合在一起了。在咱们地方实现“流光溢彩”动效时将要更定义之门道用<symbol>进行了定义,定义之<path>的id值不是被予以用了某属性,而是作为标签是,便于被<use xlink:href="#">勤引用,但当是效应使到变形动画中常,会发现<path>途径的id对应之是绘制路径的变形动画,那咱们来更换个思路,把当下四个路子当做独立的存在,每个路径在拓展变形动画的同时为当进展描边动画,此时咱们的SVG定义的变形动画deform的重要性帧不更换,四个不等颜色之描边动画的定义animate1-4的重中之重帧也无移,需要转移之是卡通片属性:

#animate1 {
animation:deform  4s ease  infinite, animate1 2s linear infinite;
stroke:#ffb850;
}
#animate2 {
animation:deform  4s ease  infinite, animate2 2s linear infinite;
stroke:#ff7e5d;
}
#animate3 {
animation:deform  4s ease  infinite, animate3 2s linear infinite;
stroke:#8cd2a4;
}
#animate4 {
animation:deform  4s ease  infinite, animate4 2s linear infinite;
stroke:#62adea;
} 

纵使每个路径的动画属性同时与了零星种植动效,一个凡变形的deform2018正版葡京赌侠诗动画,一个是相应的描边动画。
为了尽可能的优化代码,我把同定义之<path>性能统一定义及了CSS里面,如下:

path{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke-dasharray:339 1017;fill:none}

如此这般,我们的相应之季久路子的代码就简化成了如下:

<path id="animate1" />
<path id="animate2" />
<path id="animate3"/>
<path id="animate4"/>

这里而发好奇的伴儿可能会见提出疑问,我们的描边动画在概念时用底周长是五边形的周长,但这动画里之几独形象并无是当丰富,肿么办?
实在毫不理会,只要选择一个极丰富的路线进行定义就是好了。因为我们的不二法门是均等百年不遇叠加的,如果图形的周长比定义时选的紧缺,出现的结果就是是无与伦比顶层的路径会略长一些,但对这类似动画片而言,很不便看有差异。

双效合并动画

另外这里要对变形的职能不合意,可以自动调整路线的方向与起点位置,以前的篇章里都来详细的方,不再赘言。
本矣,手痒痒的自我还是移了转逐项参数,看了一下功能,比如自己定义了stroke-dasharry:100
300 (线长100
间距300之虚线),同时更改了其他的stroke-dashoffset的价值,依次差阶100,然后抱了一个力量:

再度定义虚线样式后底功力

不怕获了相要的卡通片效果,但主动努力追求上上之我倒是仍不合意啊,因为自怀念吃变形动画在成功一个变形后小发停留后重新拓展下一个换。而不是诸如现在这种唰唰唰一欺凌呵成,于是乎,我改进了瞬间,得到了脚这种作用:

修改重点帧之后动画效果

本身是为此了偷懒的成效,把变形动画的重要性帧改成为了底这种:

@keyframes deform{
0% {d:path('')} /*圆形路径*/
15% {d:path('')} /*三角形路径*/
25% {d:path('')} /*三角形路径*/
40% {d:path('')} /*矩形形路径*/
50% {d:path('')} /*矩形形路径*/
65% {d:path('')} /*五边形路径*/
75%{d:path('')} /*五边形路径*/
90% {d:path('')} /*圆形路径*/
100% {d:path('')} /*圆形路径*/
}

嗯,满意。
直白沾codepen的地方,
https://codepen.io/yangyangbeiqiu/pen/ayNGdW
伙伴等自行查看咯。

发表评论

电子邮件地址不会被公开。 必填项已用*标注