SVG morphing 动画应用大盘点

html5

浏览数:2,504

2018-1-2

AD:资源代下载服务

背景

这篇文章主要是介绍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这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!

<

p class=”source”>原文链接:http://svgtrick.com/tricks/7f5bbc4a142e5a19c7d8c129d6a68d03