snap.svg入门篇

前言：

要用svg制作复杂或者是高级的动画效果，javascript就必不可少来。今天我们就来学习下svg中的jQuery库Snap.svg这一js库，它的功能跟jQuery在dom的作用差不多，只不过它是专门用来操作svg的。

简介：

Snap.svg.js 是一个操纵 SVG 节点/制作 SVG 动画的框架

Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ ) 来做对比最合适不过对比表：

 

/	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 节点的选择、事件绑定都需要在这个上下文里完成。

Element：

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

// 选择节点
let svg = Snap("#svg");
svg.select("circle").attr({
    fill: "#f00"                      
});

let svg = Snap('#svg');
svg.select('circle').click(function() {
    // do something
});

基础语法：http://snapsvg.io/docs/   https://www.zhangxinxu.com/github/demo-Snap.svg/demo/basic/Element.add.php（自行查阅，非常完善）

 Paper：

这部分是画SVG图形相关的方法集，这是几乎每个动画框架都有的部分。

SVG 有6种 基本图形 ：矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种：路径(path)，path 是最复杂的一种绘图方式，它可以绘制复杂的图形。

SVG入门笔记：https://www.cnblogs.com/zigood/p/16045973.html

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

let svg = Snap("#svg");
svg.paper.circle(50, 50, 40);

let g3 = svg.paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
svg.paper.circle(50, 50, 40).attr({
    fill: g3
});

用 Snap 制作动画

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

1. 使用 Element 里的 animate 方法，Element.animate(attrs, duration, [easing], [callback])
2. 使用 Snap 的静态方法，Snap.animate(from, to, setter, duration, [easing], [callback])，这种方法更通用也更强大，指定开始结束值，setter里面可以放置多个节点的动画

// 动画样例1
let svg = Snap('#svg');
svg.select('circle').animate({r: 100}, 1000, mina.easeout(), function() {
    console.log('animation end');
});

// 动画样例2
let svg = Snap('#svg');
let circle = svg.select('circle');
let rect = svg.select('rect');
Snap.animate(0, 100, function(val) {
    circle.attr({r: val});
    rect.attr({x: val});
}, 1000, mina.easeout(), function() {
    console.log('animation end');
});