简而言之，就是不同形状之间能平滑的转换。这个用SVG来做羹适合不过了，因为SVG本身的形状就是有各种不同坐标之间的线段绘制而成的。从形状到另外一个形状的转化就是移动坐标点而已。

在我网站svgtrick开一个新系列，主要是使用GreenSock来编写和实现动画效果，通过实际的效果来熟悉GreenSock的各个方法和技巧。 关于GreenSock的基础知识，可以看看我整理的GreenSock简明教程。 这个效果也是在codepen上看到的，拿来分析下实现思路，顺便熟悉下GreenSock的一些API的使用方法。 先来看看要实现的效果： 这...

最近从Dribbble shot 看到@thorstenbeeck发布的一个设计效果图得到灵感。根据这个设计，使用GreenSock这个动画平台实现了一个SVG的动画效果，下面就来聊聊我是怎么实现这个动画效果的。

最近把GreenSock的一些知识以及一些开发技巧使用gitbook整理了一本在线的电子书，GreenSock电子书可以去看看，下面是一个基本入门的简化版本，更详细的可以去看在线的版本，里面有详细的介绍以及一些高级应用技巧，GreenSock电子书

今天这篇文章来讲一个morphing动画在UI界面上一个具体的运用即具有morphing动画效果的播放按钮。开始之前可以去YouTube网站上看看，它的播放和暂停按钮不是简单的切换，而是有一个过渡的动画效果，即morphing动画效果。如下图所示：

工欲善其事，必先利其器。要用svg制作复杂或者是高级的动画效果，javascript就必不可少来。今天我们就来学习下svg中的jQuery库Snap.svg这一js库，它的功能跟jQuery在dom的作用差不多，只不过它是专门用来操作svg的。有了它，我们就可以轻松的使用javascript和svg打交道了。

开始之前，先来了解下什么是Morphing动画。所谓Morphing动画是表示，同一个模型，从一个形状变到另一个形状。如下图所示，从形状1渐变到形状2，再从形状2渐变到形状3，最后从形状3渐变到形状1，以此循环往复。