一、Snap.svg是什么

从主要功能上说，Snap.svg.js 是一个操纵 SVG 节点/制作 SVG 动画的框架，简单点理解可以看下面文字：

Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库

——译自官网

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ ) 来做对比最合适不过，很可能作者也是参考了 JQ 的 API 设计，那么它们的相似程度有多高呢？请看下面的对比表：

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中，可操作的最外层 DOM 边界是 document 。而在 Snap 的概念里，可操作的最外层的节点是 svg ，svg 节点的选择、事件绑定都需要在这个上下文里完成。

在上面的对比图可以看出很多 JQ 的影子，无论是选择器、事件绑定、节点操作等等，都是非常的类似 JQ ，有 JQ 基础的同学基本可以半天掌握 Snap 的全部 API。

二、Snap 的代码结构

笔者根据 Snap 的 API 制作了上面的图表，并且简单标注了注释方便大家理解，可以重点关注一下 Element 和 Paper 这两个类。

1. Element

这个部分是节点操作相关的方法集，也是该类库最基础的部分。

1
2
3
4
 
// 选择节点
var svg = Snap('#svg');
svg.select('circle'); // 选择
svg.select('.rect_01'); // 选择
 
1
2
3
4
5
 
// 事件绑定
var svg = Snap('#svg');
svg.select('circle').click(function() {
        
    // do something
});

更多方法请参考文后 API 资料。

2. Paper

这部分是画图相关的方法集，这是几乎每个动画框架都有的部分，类似于createjs的Graphics。

SVG 有6种基本图形：矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种：路径(path)，path 是最复杂的一种绘图方式，它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与 path 之间的转换，可以参考本站的另外一篇文章：聊聊 SVG 基本形状转换那些事。

Paper 方法集主要可以绘制6种基本图形（节点），以及文本（节点）、图片（节点）、渐变等。

1
2
3
4
5
6
7
8
9
10
11
 
// 画一个圆
var svg = Snap('#svg');
svg.paper.circle({
        
    cx: 100,
    cy: 100,
    r: 50,
    fill: '#f00'
});

// 创建一张图片
svg.paper.image('url.jpg', 0, 400, 300, 300);

3. Snap 工具方法

Snap下有不少实用工具，比如 Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。

1
2
3
4
5
6
 
// 扩展Snap，为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
        
    Snap.newmethod = function () {};
    Element.prototype.newmethod = function () {};
    Paper.prototype.newmethod = function () {};
});

三、用 Snap 制作动画

1. 制作动画的方法

Snap 的做动画主要有两种方式：

  • 使用 Element 里的 animate 方法，Element.animate(attrs, duration, [easing], [callback])
  • 使用 Snap 的静态方法，Snap.animate(from