Snap.svg 基本知識入門

fantix 發布于2019-08-20 11:11 / 3254人閱讀

摘要：因為的創造者正是的創造者，而也是用來操作的。它的主要一個功能是能使老版本的瀏覽器也能支持，比如等。首先準備一個基本開始骨架，基本的結構以及引入這個庫。是不是似增相識。首先我們來創建一個橢圓并放置在上組圖形的中間。

最近做了一個關于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

云服務器 GPU云服務器入門知識入門基礎知識服務器知識入門 nlp入門知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80439.html

SVG

摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。使用SVG + CSS實現動態霓虹燈文字效果早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

104828720 2019-08-29 14:00 評論0 收藏0
使用 Snap.svg 來實現一個具有 morphing 動畫效果的按鈕動效

摘要：今天這篇文章來講一個動畫在界面上一個具體的運用即具有動畫效果的播放按鈕。在后面實現動畫效果的時候要用到。下面來看下實現動畫效果核心代碼所謂動畫效果，就是從一個形狀變到另一個形狀。由于使用方法，它們之間的變化會有一個動畫效果即動畫效果。前面有專門寫過一篇morphing動畫基礎知識的文章，不了解的話可以去這里看看。今天這篇文章來講一個morphing動畫在UI界面上一個具體的運用即具...

jubincn 2019-08-21 14:29 評論0 收藏0
SVG基礎教程(超級詳細)

摘要：光滑三次貝塞爾曲線指令跟在指令或指令后面補刀，它會自動在基礎上生成一個對稱點，所以指令只需要兩個點就可以。二次貝塞爾曲線是控制點，表示的是曲線的終點。一、內置圖形: rect(矩形) circle(圓) ellipse(橢圓) line(直線) polyline(折線) polygon(多邊形) path(路徑) 二、內置圖形的html屬性或(css樣...

張憲坤 2019-08-21 17:42 評論0 收藏0
svg系列：1.svg基礎知識 & 不一樣的svg動畫世界

摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...

wwolf 2019-08-02 16:10 評論0 收藏0
svg系列：1.svg基礎知識 & 不一樣的svg動畫世界

摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...

DirtyMind 2019-08-23 16:30 評論0 收藏0