Snap.svg 基本知識入門

時間 2019-11-10

標籤 snap.svg snap svg 基本知識入門简体版

原文原文鏈接

最近作了一個關於SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這裏來，更多的能夠去網站看看。javascript

工欲善其事，必先利其器。要用svg製做複雜或者是高級的動畫效果，javascript就必不可少來。今天咱們就來學習下svg中的jQuery庫Snap.svg這一js庫，它的功能跟jQuery在dom的做用差很少，只不過它是專門用來操做svg的。有了它，咱們就能夠輕鬆的使用javascript和svg打交道了。java

接下來以實際的例子來說解下Snap的使用方法。web

Snap的那些事兒

提及Snap就不得不提Raphäel.js這個庫。由於Snap的創造者正是Raphäel.js的創造者Dmitry Baranovskiy，而Raphäel.js也是用來操做svg的。它的主要一個功能是能使老版本的IE瀏覽器也能支持svg，好比ie6等。chrome

而snap的出現，則是實現了svg中的一些高級特性的功能，好比蒙板、漸變、分組以及動畫等高級特性，並且也再也不對老版本的不支持svg的瀏覽器進行兼容，大大減小了代碼量更加能發揮svg的特性。瀏覽器

Snap能作些什麼

從官方的文檔API documentation能夠看到，全部svg的特性咱們均可以使用Snap來操做，好比mask,group,gradient,filter,animate,
pattern等屬性。dom

使用snap能幫助咱們建立svg格式的圖形，固然也能基於現有的svg圖形來進行操做。意味着咱們不必定要使用snap來建立圖形，咱們能夠先使用一些適量編輯軟件如Adobe IIIustrator,Inkscape,或者是Sketch來製做svg圖形，而後再使用snap來進行一些操做。svg

開始使用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