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

接着上篇 juejin.im/post/591272…
继续，上篇对于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动画的终极形式，其余的缩放也好、斜切也好、位移也好，等等，经过路径的变形均可以实现，只不过规则的动画效果用其余动画属性实现起来更简单而已。
因此，在作这类动画时，自主权必定要紧紧掌握在咱们的手里，路径起点也好，方向也好，知道怎么调整，这样才能预知动画效果。

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