使用 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方面的技术知识可以去网站看看。