背景

这篇文章主要是介绍SVG morph动画的应用，主要是介绍一些SVG在morphing动画的一些实例和它的实现方式。

开始之前，先来介绍下何为morphing动画？在维基百科上是这样解释的，影像变形（Morphing），是由一张图像流畅地变成另一张图像的视觉效果，最常见的应用是由一张人脸影像变化到另一张人脸影像。在web最常见的应用是由一个形状变化到另一个形状。

morphing动画效果在上世纪90年代应用的非常广泛，当然主要是在电影等影视作品中应用的非常广泛，最出名的一个例子是在Michael Jackson的音乐电影Black and White中使用，看过这个音乐电影应该对其中的一个脸部的morphing效果印象深刻。关于Michael Jackson的音乐电影Black and White可以去这篇文章详细了解相关的信息。

morphing不止于此

我非常喜欢SVG morphing。在我的博客中也写了多篇关于SVG morphing的文章，它至少为动画开发提供了更多的可能性。当然，使用CSS提供的transition和transform也可以做出很多的动画效果。不过，使用CSS提供的这些方法很难对形状做morphing动画。

而使用SVG morphing的能力再结合其它的CSS提供的动画方法，可以做出更多有趣的动画效果。比如，同时使用morphing和translate可以同时改变一个元素的颜色和形状，就可以实现一些有趣的动画效果，能限制你的就是你的想象力。

morphing实现技术

在web开发中，我使用 anime-js 这个动画库来编写morphing动画效果。当然，它可能不是最好的选择，这里的选择纯粹是个人的喜好。现在市面上有很多已经存在的实现morphing动画效果的库类存在，选择还是很多的。使用anime-js虽然还是要做很多的代码编写，但是它提供了非常友好的语法，而且还允许和其它的动画类型结合起来做复合的动画效果。在选择动画库的时候，是否简单，依赖是否轻量，是我选择的一个标准。所以，我还是推荐使用anime-js。

说了这么多，下面就一起来看看morphing的实例吧。

菜单应用

SVG morphing一个非常有用的用法就是用它来对一个元素进行缩放。比如，当我们需要对一个有多个形状构成的元素进行缩放时，你会怎么办？如果，直接使用transform提供的scale方法对它进行缩放的话，可能会在细节上有模糊的问题。

SVG Morphing则可以避免这个问题，因为SVG是一种矢量图形，它可以无损的对SVG图形进行缩放。比如，对一个圆，矩形或者是其它的形状任意进行缩放。下面的这个实例，就使用了SVG来进行缩放。这个例子中的菜单中，正常有三个点，当点击激活的时候，它会从无到有出现一个工具栏的二级菜单。每个点移动到对应的位置，并且变为对应位置的工具栏的图标。这种缩放的动画，特别适合于移动端这种小空间的展示。

demo地址

形状应用

SVG morphing是由一个形状变化到另一个形状，那如果同时对多个形状进行变化呢？会产生什么样有趣的应用呢？下面的实例就是多个形状同时变化的一个应用。

这个例子主要的灵感是来自于在艺术界经常运用多边形得到的。这些形状通常都是由标准的直线、矩形等几何图形组成的复合形状。艺术家在绘制几何图形的时候通常在比例等方面有严格要求和标准。经过一番折腾，发现使用几何形状来绘制一些动物的形状非常有趣。

这些动物的形状通常是由大小不一的三角形组成的，看到这里，马上就想到它非常适合用SVG morphing来表现。我决定使用兔子和鹿来实现一个SVG morphing的动画。选择它们主要是两个原因：第一个是它们非常漂亮；第二个是它们有一样的数量的三角形组成的。

SVG morphing并不新鲜，重要的是你用什么样的方法去实现有趣的效果。所以，需要不停的迭代才能实现你最终想要的效果。比如，怎么提高工作效率。我写了一个Gulp的脚本来把SVG文件转换成JavaScript数组，然后，再使用anime-js来实现morphing动画效果。通过这些，可以实现一个简单自动化的工作流程来提高工作效率。接下来，我们就可以使用矢量设计软件来设计图形导出为SVG格式，然后通过自动化的脚本来处理SVG文件：

1、Gulp会监听SVG图形文件的变动。

2、当发现SVG有变动的时候，会自动调用事先编写好的脚本。

3、脚本会解析SVG文件，并创建两个对应鹿和兔子形状的类似贝塞尔曲线类型的数组。

4、然后，浏览器监听文件改变，自动刷新浏览器。

5、自动刷新浏览器后，动画也会自动改变。

有了上面自动的工作流程，我们只需要使用矢量编辑器设计好形状就好了，其它的交给自动化的脚本来处理就好了，可以大大提高工作效率。

demo地址

地标应用

使用SVG来实现世界各地的地标建筑的morphing动画也非常方便。在下面的例子中，将选取几座非常著名的地标建筑来实现一个morphing动画。使用SVG形状来做morphing动画一个重要的点是节点的之间的变化。SVG morphing主要是对path元素中的d属性的数据进行变化。path元素可以描绘任意的形状，比如，直线、矩形、贝塞尔曲线等形状。路径，就像我们使用笔在纸张上画画的时候，一般也都是由各种各样的形状组成的。

为了达到理想的形状变化，需要使用相同的方法绘制各个地标。从左下脚顺时针开始来绘制，并且要保证各个地标建筑图形都是一样数量的节点（136个节点）。节点的顺序同样非常重要，第一个形状的第一个节点平移到第二个形状的第一个节点。如果不保持这样的节点顺序，那个形状之间的过渡效果会显的不是很平滑。

demo地址

下拉刷新

这个实例是下拉刷新的微动画，微动画现在应用的也越来越广泛来。微动画一般在用户需要反馈的交互中应用的非常多。更多关于微动画可以去这篇文章看看。

在这个实例中，在用户的下拉中，箭头将会变成一个圆圈来表示数据正在加载，加载完后变成一个勾，表示加载完毕。使用morphing来做这个变化，可以使动画变的更加顺滑自然。在用户体验上也会更加的舒服自然。

demo地址

现代复古-IBM Think

我一直是艺术极简主义的粉丝，特别是上世纪60年代的。而在这几年，也流行极简的设计风格。Isabella Carvalho 在这篇文章就很好的对这种极简的艺术风格进行阐述。这也促使我在web设计中更多的尝试不同的颜色混合模式来进行设计。在CSS中刚好也提供了颜色混合（mix-blend-mode）这个属性来实现不同的颜色混合创建不一样的颜色效果。特别是配合动画来使用，能达到意想不到的效果。这种使用颜色混合模式的视觉效果在IBM Think的海报中也有使用，更多的关于颜色混合的使用可以去看看这篇文章。

下面这个SVG morphing实例，元素之间并不都是path元素，有些是圆形等元素。严格意义上来说，并不是一个真正的morphing动画效果，不过至少在视觉上看起来，差不多。

demo地址

想了解更多的关于anime-js的使用方法，可以去看看之前翻译的也是作者的两篇文章，anime.js 实战：使用 SVG 实现一个带有描边动画效果的复选框和anime.js 实战：使用 SVG 实现一个 Twitter 赞的动画效果。

在写这篇文章的时候，我编写了一些morphing的demo：

Morphing loader spinner

Geometrical Birds — slideshow

Mozilla blend morph

Morphing loader spinner — part II

Codepen create

本文主要是从Metamorphosis: morphing SVGs这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！