使用 SVG 来制作 Morphing 动画效果

janily — Mon, 19 Sep 2016 12:46:48 +0800

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

ArgumentError in Static_pages#home

janily — Fri, 14 Jun 2013 11:09:53 +0800

这段时间在看 Ruby on Rails Tutorial 这本书在学习 rails，今天在照第五章的例子做的时候，报错如图所示不是道是啥原因还请各位解答一下，谢谢~~！