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;
} 

即每个路径的卡通片属性同时授予了二种动效,一个是变形的deform动画,一个是相应的描边动画。
为了尽可能的优化代码,我把相同定义的<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
伙伴们自行查看咯。

相关文章