使用 SVG 来制做 Morphing 动画效果

何为Morphing动画

开始以前，先来了解下什么是Morphing动画。所谓Morphing动画是表示，同一个模型，从一个形状变到另外一个形状。以下图所示，从形状1渐变到形状2，再从形状2渐变到形状3，最后从形状3渐变到形状1，以此循环往复。

从上图能够看到像这样的Morphing动画简直是为SVG量身定制的，由于SVG中的路径本来就是由不少的坐标点构成的（点连成线），作一些形状变化只要移动坐标点就能够了。

简单的来讲，在SVG要实现Morphing动画，主要是靠移动形状路径上的坐标点从而达到从一个形状变到另外一个形状的动画效果。而且因为这个形状是从一个形状变化而来，因此路径上的坐标数量要彻底相同，不一样的只是坐标的位置不一样而已。

如何制做Morphing动画

要制做Morphing动画，首先得用矢量编辑软件好比Adobe Illustrator或者是Inscape来设计好相关的形状并获得相关路径（path）的数据信息。

好比，若是你要作以下图所示的两个形状之间变化的Morphing动画，就须要在设计软件中先设计好两个形状。固然这里要注意一点的事是，两个图形的坐标数量要同样，只是位置不一样而已。了解
Adobe Illustrator的应该会明白，通常在设计好基本的形状的时候，使用贝赛尔曲线工具，能够作不少的变化，从而使用一个基本的形状能够作出不一样形状的变化。

实战Morphing动画

下面咱们来小小的练习一下，实现上图中的效果。

首先在设计软件中，这里使用的是Adobe Illustrator来设计一个基本的形状，以下图所示：

而后复制一份新建一个文档，在它基础上使用贝赛尔曲线工具，稍微对几个坐标点作下变化获得下面的图形：

这就获得了两个矢量图形，而后分别导出SVG格式，获得Path的信息：

path1

<path d="M200,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,200,51.75Z" />

path2

<path d="M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z" />

获得path信息以后，接下来就是来实现动画效果来。

这里咱们须要借助于一个小小的轻量级的js动画库anime，这个库很是的小，并且没有任何的依赖，才几百行。是一款功能强大的Javascript动画库插件。anime.js能够和CSS3属性，SVG，DOM元素和JS对象一块儿工做，制做出各类高性能，平滑过渡的动画效果。

具体的使用方法就不详细介绍，能够去官网看相关实例。

下面就针对SVG来介绍下使用anime来实现Morphing动画。根据Morphing动画原理，咱们如今是要实现从path1形状平滑的过分到path2的动画效果。

anime api

获取目标元素

在anime中要来编写动画效果，首先是选择你要运动的元素，这里使用浏览器默认的方法来获得目标元素：

选择器	示例
DOM元素	document.getElementsByTagName("path")[0]]

参数

这里简单介绍下，咱们将要使用的一些参数

名字	默认值	类型
delay(动画延迟)	0	数字
duration(动画运行时间)	1000	数字
autoplay(是否自动开始)	ture	布尔值
easing(缓动曲线)	easeOutElastic	使用console log anime.easings能够输出它支持的一些欢动曲线方法
loop(是否循环播放)	false	布尔值或者是具体的整数

具体到咱们这个效果，其实咱们要改变的就是SVG中Path路径的值，使用anime结合上面介绍的方法能够很轻松的来实现这个效果，以下代码所示：

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

上面的代码中，d就是咱们要改变的属性的值。这里注意下duration这个参数，它是用来指定动画运行的方向的，主要是三个值normal、reverse和alternate，这里选择是alternate即动画动画轮流反向播放。

OK，就这么简单咱们就实现了一个简单Morphing动画。充分发挥你的想象力，咱们能够实现更有趣的Morphing动画。

最近作了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的关于SVG方面的技术知识能够去网站看看。