Snap.svg 基本知识入门

最近作了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的能够去网站看看。

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

接下来以实际的例子来说解下Snap的使用方法。

Snap的那些事儿

提及Snap就不得不提Raphäel.js这个库。由于Snap的创造者正是Raphäel.js的创造者Dmitry Baranovskiy，而Raphäel.js也是用来操做svg的。它的主要一个功能是能使老版本的IE浏览器也能支持svg，好比ie6等。

而snap的出现，则是实现了svg中的一些高级特性的功能，好比蒙板、渐变、分组以及动画等高级特性，并且也再也不对老版本的不支持svg的浏览器进行兼容，大大减小了代码量更加能发挥svg的特性。

Snap能作些什么

从官方的文档API documentation能够看到，全部svg的特性咱们均可以使用Snap来操做，好比mask,group,gradient,filter,animate,
pattern等属性。

使用snap能帮助咱们建立svg格式的图形，固然也能基于现有的svg图形来进行操做。意味着咱们不必定要使用snap来建立图形，咱们能够先使用一些适量编辑软件如Adobe IIIustrator,Inkscape,或者是Sketch来制做svg图形，而后再使用snap来进行一些操做。

开始使用Snap

方便起见，咱们这里使用codepen来作一些demo。

首先准备一个基本开始骨架，基本的hmtl结构以及引入snapsvg.js这个库。

准备好后就能够开始编码啦。

其实它的使用方法跟jQuery差很少，开始以前须要初始化Snap，即便用Snap来制定咱们须要操做svg的节点并把它指定给一个变量。咱们这里就定义为s。

var s = Snap("#svg");

是否是似增相识。

如今咱们就可使用Snap提供的各类方法来操做s这个变量，好比圆或者是矩形。

• 圆，建立圆须要三个参数：X(x轴的坐标)，Y(y轴的坐标)，半径。具体能够参考文档circle API

• 矩形，须要四个参数：X，Y，宽，高。文档地址rect API

• 椭圆，须要四个参数：X，Y，horizontal radius(水平方向的半径)，vertical radius(垂直方向的半径)。文档地址ellipse API

咱们输入下面的js代码：

//建立床半径为80的圆
    var circle = s.circle(90,120,80);
    // 宽为210de的juxing
    var square = s.rect(210,40,160,160);
    //椭圆
    var ellipse = s.ellipse(460,120,50,80);

就会为咱们绘制下面这三个图形：

DEMO

从代码运行的结果来看，默认填充的颜色是黑色。下面咱们使用snap来设置一些样式，如填充、透明度、边框、边框的宽度等属性。具体能够去看看文档
SVG attributes。

circle.attr({
      fill: 'coral',
      stroke: 'coral',
      strokeOpacity: .3,
      strokeWidth: 10
    });
 
    square.attr({
      fill: 'lightblue',
      stroke: 'lightblue',
      strokeOpacity: .3,
      strokeWidth: 10
    });
 
    ellipse.attr({
      fill: 'mediumturquoise',
      stroke: 'mediumturquoise',
      strokeOpacity: .2,
      strokeWidth: 10
    });

这样咱们的图形看起来比前面就更漂亮来些！

DEMO

分组操做图形

Snap为咱们提供来分组操做group这一强大的功能，顾名思义，使用它咱们能够把多个图形编成一组，使之变为一个图形。

先来建立两个图形，而后把它们编成一组。再来操做它们的属性。

var circle_1 = s.circle(200, 200, 140);
    var circle_2 = s.circle(150, 200, 140);
 
    var circles = s.group(circle_1, circle_2);
 
    circles.attr({
      fill: 'coral',
      fillOpacity: .6
    });

结果以下：

DEMO

在文章开始部分，咱们说过会作一个眼睛的例子。须要用到svg中的蒙板属性mask。首先咱们来建立一个椭圆并放置在上组图形的中间。

var circle_1 = s.circle(300, 200, 140);
    var circle_2 = s.circle(250, 200, 140);
 
    var circles = s.group(circle_1, circle_2);
 
    var ellipse = s.ellipse(275, 220, 170, 90);
 
    circles.attr({
      fill: 'coral',
      fillOpacity: .6,
    });
 
    ellipse.attr({
      opacity: .4
    });

DEMO

如今咱们就以椭圆为蒙板来对图形进行剪裁，而且对椭圆填充为白色：

circles.attr({
      fill: 'coral',
      fillOpacity: .6,
      mask: ellipse
    })
 
    ellipse.attr({
      fill: '#fff',
      opacity: .8
    });

DEMO

让图形动起来

眼睛的形状就完成来，不过要是让眼睛动起来会更加有趣一点。使用Snap中的animate方法来实现动画效果很是方便。要使眼睛动起来，咱们只须要让椭圆的垂直的半径从1增长到90就能够了。

先来建立一个名为blink的动画函数：

function blink(){
        ellipse.animate({ry:1)},220,function(){
            ellipse.animate({ry:90},300);
            )}
    };

如今咱们可使用setInterval函数来循环执行blink动画，这样咱们的眼睛就会不停的运动。

setInterval(blink,3000);

最后完整的代码以下所示：

var circle_1 = s.circle(300, 200, 140);
    var circle_2 = s.circle(250, 200, 140);
 
    // 编组图形
 
    var circles = s.group(circle_1, circle_2);
 
    var ellipse = s.ellipse(275, 220, 170, 90);
 
    // 填充颜色并使用蒙版
    
    circles.attr({
      fill: 'coral',
      fillOpacity: .6,
      mask: ellipse
    });
 
    ellipse.attr({
      fill: '#fff',
      opacity: .8
    });
 
    // 眨眼动画让椭圆的垂直的半径从1增长到90
 
    function blink(){
      ellipse.animate({ry:1}, 220, function(){
    ellipse.animate({ry: 90}, 300);
      });
    };
 
    // 每三秒执行一次动画
 
    setInterval(blink, 3000);

效果以下：

DEMO

浏览器支持

要注意的使，Snap只支持IE9+,chrome,safari,firefox以及opera等现代浏览器。

开源

Snap.svg使开源的，意味着咱们能够无偿使用它来开发。

参考文章：

How to Manipulate and Animate SVG With Snap.svg