一、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 |
// 选择节点 |
1 |
// 事件绑定 |
更多方法请参考文后 API 资料。
2. Paper
这部分是画图相关的方法集,这是几乎每个动画框架都有的部分,类似于createjs的Graphics。
SVG 有6种基本图形:矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种:路径(path),path 是最复杂的一种绘图方式,它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与 path 之间的转换,可以参考本站的另外一篇文章:聊聊 SVG 基本形状转换那些事。
Paper 方法集主要可以绘制6种基本图形(节点),以及文本(节点)、图片(节点)、渐变等。
1 |
// 画一个圆 |
3. Snap 工具方法
Snap下有不少实用工具,比如 Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。
1 |
// 扩展Snap,为其添加插件方法 |
三、用 Snap 制作动画
1. 制作动画的方法
Snap 的做动画主要有两种方式:
- 使用 Element 里的 animate 方法,Element.animate(attrs, duration, [easing], [callback])
- 使用 Snap 的静态方法,Snap.animate(from