运用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

path2

获得path信息以后，接下来就是来完成动画结果来。

这里我们须要借助于一个小小的轻量级的js动画库anime，这个库异常的小，而且没有任何的依靠，才几百行。是一款功能强大的Javascript动画库插件。anime.js能够和CSS3属性，SVG，DOM元素和JS对象一同事情，制造出种种高性能，腻滑过渡的动画结果。

细致的运用要领就不细致引见，能够去官网看相干实例。

下面就针对SVG来引见下运用anime来完成Morphing动画。依据Morphing动画道理，我们现在是要完成从path1外形腻滑的过分到path2的动画结果。

anime api

猎取目的元素

在anime中要来编写动画结果，起首是挑选你要活动的元素，这里运用浏览器默许的要领来获得目的元素：

参数

这里简朴引见下，我们将要运用的一些参数

细致到我们这个结果，实在我们要转变的就是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方面的手艺知识能够去网站看看。