UI设计师SVG动画进阶篇——路径变形动画(中篇)

2,097 阅读7分钟

接着上篇 juejin.cn/post/684490…
继续,上篇对于UI来说,应该是小菜菜,因为毕竟都是以AI为出发点,所有的调整也都是在AI里来完成,从现在开始,继续深入下去,加大点难度。上篇称之为基础篇,这篇是进阶篇。

6.进阶3——调整闭合路径起点

上一篇的末尾留了个小尾巴,即闭合路径的起点的问题,为什么需要调整路径起点呢?从实例入手,我们来说一下。比如我想做下面这种变形:

需要变形的形状
需要变形的形状

有了上一篇的基础,这时按部就班,先查看锚点数,然后给锚点数少的图形打上几个点,然后调整手柄之类的就不说了。前面一直是两个图形的变形,那三个呢?定义两个动画?当然,不是不可以,但了解CSS3动画属性的UI知道我们可以再加一个关键帧,我把CSS3动画模板改成下面这种,中间加一帧,位置我定在60%吧,就是前2/5草变叶子,后3/5叶子变羽毛,羽毛的描边先不用理会。因为变形略复杂,我让动画时间变成6s。

<style>
@keyframes deform{
0% {d:path('');}
60% {d:path(''); }
100% {d:path(''); }
}
#animated {
animation: deform 6s ease;
}
</style>

保证每个锚点都有两个非对称手柄且路径方向保持一致后,就可以导出SVG了,另外我希望动画效果是在原来位置变形,所以记得在导出之前把三个图形叠合在一起,像下面这种:

调整位置
调整位置

那是否就能达到我们的初衷了呢?用效果说话:

变形效果
变形效果

看到这里,设计师小伙伴要愤怒了,什么?我这个那个都调整了,怎么还是这种“乱七八糟”变形效果,这骗人的教程,先莫摔鼠标,坚持一下,你离成功只有一步之遥,那就是路径起点(最后我会把操作过程全部理顺)。


我把这三个图形的起点和第一段路径(都已经统一成顺时针方向)用红色标出来,起点七零八落,那路径的变形过程必然支离破碎,如果我们能把起点位置统一一下就好了,那怎么人为控制起点方向呢?当然,如果你熟悉贝塞尔曲线的生成原理,就会知道小c绘制的曲线由于是针对前一个位置点相对位置,所以和起点坐标无关,也就是你可以随便去改M,但同时,你要去调整d值里面曲线段的顺序,能实现,但略麻烦,而且改来改去,说不定哪里就错了,那正解呢?
我们好好想一想,闭合路径不能随便控制,那我们把它搞成开放路径不就可以了,开放路径的点不就是路径的起点嘛,然后,继续,对了,AI里的剪刀工具,直接对着你想当做起点的锚点咔擦就是一剪子,好啦,闭合路径→开放路径,大家可以自己操作一下,导出SVG看一下,d值唯一的区别就是没有以z结尾,就是宣告“我是开放路径”的意思。
那我按照这个方法,把三个图形的的起点都统一到右下角那个位置(不用重合,靠得稍微近一些就可以)。
然后动画效果看一下如何:

自定义起点后的动画效果
自定义起点后的动画效果

也不够顺滑!!但和上面那个无序的对比,能明显看出似乎底部有个点让它们以此为基点进行变换,那就是我们定义的起点。这里我要给自己辩解一下了,因为我的这三个图形实在差别太大,但这个方法一定要掌握,因为能人为操纵路径起点在做一些变形动画时很有用处。
路径变形动画不同于其他动画,相对复杂,需要调节的地方很多,我把顺序理一遍。

1.加锚点——需要变形的图形要保证相同的锚点数。
2.调整手柄——确保每个锚点有两个非对称手柄
3.自定义起点——通过使用剪刀把闭合路径转化成开放路径
4.d值检查——导出的SVG按固定格式排列以便检查对比d值,目的1,确认路径方向,需要反向路径的转换成复合路径后进行反转路径操作(并非所有动画效果都需要保证同向,根据实际想得到的效果来);目的2,有个别非小c开头的找到对应路径,调整。
5.套用CSS代码模板——可调节参数或增加其他动画效果。

一般的路径变形动画需要的问题差不多就在这里了,有设计师如果亲测过程中遇到问题,可留言,包解决。

7.进阶4——开放路径变形动画

其实,上面我们把路径剪开后,闭合路径已经是开放路径了,不过是由于起点终点重合,视觉上是闭合的而已,但仍然把这个单独拿出来说,是因为路径变形动画实在是太太有用处了,就算我们拿一段两点组成的最简单的路径来说。还是我们的模板,其他部分不变,我改了一下运动速率的参数。

animation: deform 1s cubic-bezier(.75,0,1,.23) infinite alternate;

然后得到了一条触底反弹的绳子。

一条路径的动画
一条路径的动画

我们为什么要自主控制路径方向?
因为同样还是这根绳子,路径方向反向之后,效果就变成了下面这种:

改变路径方向之后的变形动画
改变路径方向之后的变形动画

还是这根绳子,我调整一下手柄变成一个波浪线,然后就能得到下面这种转来转去效果:

转来转去
转来转去

以及这种扭来扭曲的效果

扭来扭去
扭来扭去

还有走了走去的效果

走来走去
走来走去

前面说了那么多的目的,就是想让UI设计师以最快的方法掌握动画,摆上图形,然后搞定,剩下自动生成。比如我就那么随意摆上四根波浪线:

随便摆摆几根线
随便摆摆几根线

然后把对应的d值套用到我们动画代码里,当然了,四个不同的路径,中间再补充两个关键帧,然后得到了什么?就是下面这只疯狂的虫子:

疯狂的虫子
疯狂的虫子

而且,这还只有两个锚点,如果更多的锚点,会产生各种无限的可能,方法是固定的,剩下就是创意了。真正好的动效,不一定实现的技术多复杂,可能只是最基础的变化,我自己也很欠缺想法,也在努力改进中。
路径变形动画是CSS3动画的终极形式,其他的缩放也好、斜切也好、位移也好,等等,通过路径的变形都可以实现,只不过规则的动画效果用其他动画属性实现起来更简单而已。
所以,在做这类动画时,自主权一定要牢牢掌握在我们的手里,路径起点也好,方向也好,知道怎么调整,这样才能预知动画效果。

本来想这篇就结束,后来发现需要再补充两个高阶的,一个是镂空图形的变形动画,一个是一变多和多变一如何实现的,占用篇幅比较大,那这个更名为中篇,最后的放到下篇吧。