有过设计基础的同学应该明白上面代码的含义，就是将所有锚点转换成平滑，然后再更改手柄的位置。形状没变，虽然代码多了不少，但是把绘制命令都变成了 S ，这样三条路径就只有数值之间的不同了。而动画的过程就是数值之间的转换。
第三步：Timing
这一步就是设定动画的时间点和 timing function 。时间点比较好说，A-B 和 B-C 我设置的分别是300毫秒和400毫秒。
timing function 就是我们在做 CSS 动画中运用到的 animation-timing-function 属性，比较常见的有 ease、linear、easein，我们也可以用贝塞尔曲线自己定制。但是CSS的 timing function 比较简单，只能定义一条均匀的曲线，A-B 转换用到的 ease-out，但是 B-C 为了体现弹动的效果，所用到的 timing-function 就不是一条均匀曲线这么简单了。
上面列出了一些比较常用的 timing-function ，其中大概分为 ease、bounce、elastic 三类。ease 一般用作减速或者加速动效。bounce如同他的曲线图一样，一般用作小球落地那种动效。而 elastic 一般用在如琴弦一样的动效上，这种动效一个特点就是有部分偏移到负坐标上了，而 B-C 用到的就是这个,如下图。
根据上面已经画出来的路径，结合动画，代码就出来了：
复制代码 代码如下:
var svg=Snap("#svg");
var pathes=[
"M37.5,37.5S87.5,37.5,87.5,37.5S137.5,37.5,137.5,37.5S137.5,87.5,137.5,87.5 S137.5,137.5,137.5,137.5S87.5,137.5,87.5,137.5S37.5,137.5,37.5,137.5S37.5,87.5,37.5,87.5S37.5,37.5,37.5,37.5z",
"M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5 S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5 S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z",
"M12.5,12.5S87.5,12.5,87.5,12.5S162.5,12.5,162.5,12.5S162.5,87.5,162.5,87.5S162.5,162.5,162.5,162.5S87.5,162.5,87.5,162.5S12.5,162.5,12.5,162.5S12.5,127.5,12.5,127.5S12.5,12.5,12.5,12.5z"
];
var path=svg.path(pathes[0]);
path.attr({
fill:"#2E70FF"
});
function animateIn(callback){
path.animate({
d:pathes[1]
},300,mina.easeout,function(){
path.animate({
d:pathes[0]
},400,mina.elastic,callback)
});
};
function animateOut(callback){
path.animate({
d:pathes[1]
},300,mina.easeout,function(){
path.animate({
d:pathes[2]
},400,mina.elastic,callback)
});
};
Snap 是 Adobe 出品处理 SVG 的库，mina是 Snap 自带的一个动画工具集，其中有很多预设的动画。
结语
用 Snap 制作的动画可以兼容 IE9 ，而且速度也不错，自定义功能很强大。相信不久的将来还会有更多狂拽酷炫屌炸天的动效会用 Snap 制作出来。
如果想学习动效的话，可以先看一下 TED 一集关于动效的视频
您可能感兴趣的文章: