接着上篇继续，上篇对于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动画的终极形式，其他的缩放也好、斜切也好、位移也好，等等，通过路径的变形都可以实现，只不过规则的动画效果用其他动画属性实现起来更简单而已。
所以，在做这类动画时，自主权一定要牢牢掌握在我们的手里，路径起点也好，方向也好，知道怎么调整，这样才能预知动画效果。

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