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

以前分享了一些本身平时整理的能够通用的SVG动画的教程基本都是最基础的变化，旋转也好，缩放也好，沿路径运动也好，只须要定义CSS3的一些动画属性值或者SVG的动画属性标签，固然，运用得当的话，依靠这些也能作出不少超炫的效果，只要想象力足够，idear赛过方法。
本质上来说，各类动画原理都是相通的，包括AE，包括Macromedia Flash、包括ps自带的时间轴动画，包括SVG的动画属性和CSS3的动画属性，都须要定义关键帧，不过补间动画一个是软件生成，一个是浏览器来执行而已。以前作过flash动画的UI设计师们必定知道，动画最难的部分其中之一是变形动画，形状A→形状B无规律的变形才是最难掌握的部分。今天来分享一份全网独一无二（啊哈哈，有种要上天的感受）的SVG变形动画教程，让UI设计师华丽丽变身动画设计师，关键是，看完这篇文章后，你能够实现任意形状之间的变形动画，是的，你没有看错，任意！独家心得，高能预警。个人全部SVG动画重点部分，一直都是从UI设计师最擅长的AI工具入手，和SVG的参数如何相结合，不说了，快上车。
由于实在太长了，后面有进阶教程，因此分上下两个篇章吧。若是没有任何SVG基础的话，建议只看上篇。
先看下面一个动画效果，这是我初学AE时，跟着教程作的，作了多久呢？我记得是一上午/(ㄒoㄒ)/~~，自我辩解一下，不是学习能力差，而是当时那一丢丢的动画基础知识所有忘光光。如今这个动画若是用SVG来作，须要多久，二十分钟吧我猜，固然了，是在代码模板的基础上。

超超简单基础的AE作的动画效果

看到这里，熟练使用AE的设计师小伙伴或许不服气了，AE也能够，要SVG这劳什子做甚？来来来，你来告诉我AE生成的动画你来增长些交互，好比鼠标单击控制开始暂停结束？就算改改颜色和尺寸你都要去动源文件，而后从新生成的好吧？
另外补充一下，既然chrome声称要“抛弃”SMIL(不用担忧，一边喊着抛弃，一边继续支持)，那咱们之后全部的SVG动画尽可能都用CSS3动画属性来完成，SVG只用来绘图。

1.变形动画实现代码原理

若是用SMIL来实现变形动画，基础代码以下：

<svg width="" height="" >
<path> <animate attributeName="d" dur="" values=" ; "/> </path> </svg>复制代码

就是利用<path>的属性d的变化，value值用分号;隔开，先后分别对应两个形状的路径值。但咱们上面说过，要用CSS3来实现，那代码就变成了下面这种（之后就用这个模板啦）：

<svg height=" " width=" ">
<style> @keyframes deform{ 0% {d:path('');} 100% {d:path(''); } } #animated { animation: deform 2s; } </style>
<path id="animated" />
</svg>复制代码

哇，好简单，好清爽。经过定义一个名为deform的动画，而后设置开始和结束，进行绘制路径命令d:path(' ')，单引号里面就是对应的路径的d值；<path>标签直接调用这个动画就能够了。

2.最简单的普通形状的变形动画

有了上面的代码模板了，而后能够进行动画的真正制做了。从最简单的开始，根据最少三点组成一个形状，好比我在AI里面随手画了一个，叫它啥好呢，单峰山吧。

三个锚点获得的图形

把导出的SVG中 <path>标签的d值复制下来，放到模板里初始值0%对应的d:path(' ')里。
而后动动锚点的位置，拖拖手柄，获得下面这个，双峰山

变换后的图形

一样，获得d值放到结束100%对应的d:path(' ')里。好了，咱们作的第一个变形动画出来了。

变形动画

单峰山变双峰山了。
是否是感受很简单，别急，由于有可能，你的动画是下面这样的：

无变形效果

也是由单峰变双峰，but，那顺滑的过渡效果呢？
别急，咱们从SVG代码里找一下缘由，我把能变形和不能变形的 <path>标签的d值一并贴上，以下：

为了方便d值的解读，我从新组织了一下分行。关于M、C、c、S、z等等的含义，怕解释后UI设计师们看了后心烦意乱，你只须要知道的是，M对应起点，后面一组坐标即2个值，z表示路径闭合，C（大写）c（小写）S（大写）s（小写）都是表明曲线绘制方法，C（大小写）后面对应3组即6个值，S（大小写）对应2组即4个值。为了看起来不乱，我特地给每组坐标画了下划线。另外AI直接生成的SVG的 <path>的d值写法很不标准，它的原则是负数和负数之间不加逗号 ,隔开（狠狠吐槽），因此你看到数值中的那些短线好比0-77，不是区间，而是数字0和数字-77。
看到区别了吧？不能变形的山峰你会发现其d值最后是S不是C。对于这类变形动画，浏览器可不会解读C和S的区别，更况且对应的数组量不一样，这就是没有发生动画的缘由。
做为UI设计师的你，必定更迷糊了，这S怎么生成，怎么控制啊？我怎么知道AI会导出什么？秘密就是——
——
手柄！
没错，就是你用AI绘制曲线时离不开的好帮手。 当你使用锚点工具直接拖放同时操做两个手柄，而后再也不单独调整手柄时，导出d值中的就会有S。换句话说，一个锚点的两个手柄对称等长。具体的原理解释出来又是一大堆，因此，为了避免给本身添麻烦，建议变形时，除非你能确保同一个锚点都进行了这种同时拖放手柄的操做，不然一律动动其中一个手柄（放心，微调一下手柄几乎彻底不影响你的图形）。

3.最简单的多边形变形动画

仍是从最简单的三角形开始

好比我但愿从三角形1→三角形2。此次我用了描边，关于样式属性，放到CSS里或者 <path>里均可以。但对于这种多边形来讲，SVG对应的标签不是 <path>，而是 <polygon>，一样，没有d值而是point。那怎么套用呢？

方法1：改造point为d。

很简单，point对应值为点的坐标，咱们只须要给第一组值前面加上M，剩下的每组前面加L，最后z结束，就成功实现了point到d的转化。举例说明：
个人三角形1对应的代码以下：

<polygon points="148,288 350,134 390,299 "/>复制代码

那我要作的就是改为

d:path('M148,188L350,134L390,299z')复制代码

而后调用<path>标签。
那试一下套用效果如何：

变化的三角形

改形成功！

方法2：改造原图形

这个方法是我推荐的方法，我叫它视觉欺骗，哈哈。由于在AI里，我只要用锚点工具那么轻轻的拖一下，多边形就变身普通形状了。但从视觉上来看，它仍是一个三角形哦。

此时导出的就是 <path>而不是 <polygon>。因此，设计师小伙伴们感到本身的优越感了没？用工具，咱们能够赛过前端呐（某些方面~）。并且利用这个方法，你能够打破多边形与普通形状之间的障碍，想怎么变身就怎么变身。
由于若是三角形之间的这种变换，你用CSS3的变形属性旋转rotate、扭曲skew、缩放scale也能实现。
但好比下面这种，只有路径变形动画才能实现：

从视觉上看就是（伪）三角形变成“巫师帽”了对不对？

4.进阶1——任意形状的变形动画（本身变本身）

有了前面的基础，就能够玩点高级的玩意了。
下面这种：

我们先理一下思路，首先，锚点的数量不是问题，圆有4个，四叶草也是4个，但咱们知道圆形AI导出SVG的标签是 <circle>，不要紧，用咱们的“做弊手段”。
此处提供一个已踩过的坑，若是是在标准圆形的基础上不管怎么调整，最后输出的d值会有两段曲线使用了绝对位置大C，而普通图形只有最后一段曲线使用绝对位置，其他均为相对位置小c，虽然这两个能够计算互相转化，但毕竟也是麻烦的，独家秘笈就是 用椭圆工具来绘制，而后宽和高能够只差1px，最后视觉效果和标准圆形是无差的。而后再把椭圆的四个锚点都稍稍动一点手柄，此次我让变化后的四叶草与原来的圆形位置拉开一点距离，而且定义了运动速率曲线为ease（最经常使用的设置，尽可能不要用默认线性的匀速运动，太过生硬），即animation: deform ease 2s;就获得了下面这种效果：

圆形变成四叶草

5.进阶2——两个不一样图形的变形动画（图形A变图形B）

有了上面这个四个锚点变形的动画，那下面这个理解起来就方便多了。

锚点数量不一样

此次我不想在原有形状上变化，而是想完成这样一次变形，最大的问题出如今锚点数量不一样上，怎么办？聪明的设计师小伙伴必定能够想到，给锚点数量少的形状用钢笔工具添加锚点呗。（什么？颜色太难看？这但是我特地找的日本传统色的藤鼠和水浅葱啊，身为一名不合适的UI我会告诉你我根本不会配色嘛。）
除了改造左侧的图形，咱们还有一个工做，就是右边这盆小花花，花茎（3-4和8-9）是标准垂直直线，导出的d值对应的是L开头的一组数（至关于曲线绘制时没有严格按照开始手柄控制点，结束手柄控制点，结束点来完成）。
看到这里，可能会有设计师提出问题，我怎么知道哪些须要改哪些不须要？并且哪些改过哪些没改过？尤为是有些微调，根本看不出来。好了，你能够按照我下面这种方法来进行校验。

d值对比分析

那堆数不用管，咱们只看开头，对于两个图形来讲，只要是M开头，中间所有小c（咱们暂且称之为标准路径绘制）且数量保持一致，最后大C和z结尾，就绝对能实现动画效果。
我我的是很是建议在导出d值以后必定用这个方法先检查一遍。
那出现问题后怎么对症下药呢？
但当锚点数量很庞大的时候，正解是：（由于小c是相对位置，不能直观的看出对应的锚点） 先找到路径的起点，即M对应的坐标，而后根据第一组c值判断路径方向，每组开头的字母+数字对应一段路径，第几组出错就是该路径的起点或终点手柄出现问题。而且解决方法简化给为非标准路径（即不是小c开头的路径）两侧锚点都加上非对称手柄。由于你可能会碰到各类你不了解的字母开头的状况，因此索性把解决方法统一块儿来。
关于判断路径方向，由于咱们的例子恰巧我让第一组出现问题，因此拿修改以后标准小c来讲，咱们只看最后一组坐标，0,-42.5，由于是相对位置，因此表示该锚点相对于起点M水平方向位移0，垂直方向位移-42.5（向上位移42.5），这样就很容易判断对应的是哪一个点，也就看出路径方向了。
知道修改原则后，对设计师来讲应该不是什么难事。这里设计师们不要感受很麻烦，毕竟，作变形动画自己就是很费时间的一件事情，不是量产的工做类型，另外平时也不过是偶尔须要这种动画。举例说明，个人花花的d值是下面这种：

经过d值查找问题路径

经过M值我找到了花朵形状的路径起点，而后根据d值，判断出是第一段和第六段路径出了问题，而且确认了路径方向为逆时针，开始数数，对应图形上红线标出的路径。经过放大图形，找到缘由，以路径1为例，锚点A和锚点B只有一侧手柄，而后按咱们简单粗暴的解决方法，给A和B都加上很短的另外一侧手柄，同理修改路径6，再导出d值看一下。

解决问题方法

完美！

别急，来看动画效果：

花朵变形变色动画

（此处还有一个坑，若是设计师发现没有动画效果，不不不，是画面一片空白的时候，只须要把d值里的空格去掉就能够，这是语法问题，没法解释。）
哟哟，位置，颜色过渡什么的都没问题，可是，变形效果太过猛烈……中间那么翻转一会儿是闹哪样？
别急，全部的问题都是出如今d值上，咱们见招拆招。

判断路径方向

这里我只放上一部分d值，先找到起点，而后经过第一组c的最末一对相对坐标对应的锚点，获得的信息是向左11.5，向下37.7，因此，这个圆的路径方向是顺时针。方向我用线连起来10段路径对应的变化关系是下面这样的：

路径变化关系

纵横交错，真是头大啊。
这种状况只会出如今两个无关联的图形的变形动画，不会出如今由同一个图形修改生成的第二个图形（由于这种是变形动画的初衷）的状况，但咱们的目的偏偏就是想让现有的任意图形来完成动画。
那如何应对出现这种两个图形路径反向的状况？
解决方法——路径反转
咱们AI里有个神奇的功能，就是下面的反转路径方向。当你把路径变成复合路径（具体操做：对象-复合路径-创建-反向），而后属性面板里就会出现可用的反转路径方向操做项

反转路径方向

只需那么轻轻的一点，搞定，方便不？来，咱们经过真实数据来看一下是否是达到了目的。

上图的形状为顺时针路径，下图轻松变身逆时针路径。再看下应用翻转路径后的d值的动画效果。

顺滑变形的花朵

关于路径反转，你仔细看下代码会说，咦？怎么起点也发生了变化？咱们下篇揭晓如何任意控制起点位置。

提早预告，在下篇里，还将进阶一个图形如何变身两个图形，图形多合一，以及镂空图形的变形动画等。

向前端开发人员求JavaScript代码，由于两个任意图形之间的动画效果若是不去修改图形中的锚点的手柄，只要保证锚点数量一致，是能够经过js来把绘制贝塞尔曲线的S、L直线、V垂直直线、H水平直线、绝对位置大C等等通通转换成相对位置小c，达到一统江湖的目的。由于我js只是渣渣入门，勉强能看懂基础的，写不来。但可提供转换公式，有兴趣的可留言。这样借助js的话，工做就简化到只要“哒哒哒”给锚点数量少的图形任意补充上锚点就能够了。