Snap.svg 基本知識入門

fantix 發(fā)布于2019-08-20 11:11 / 3252人閱讀

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

最近做了一個關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會同步一些文章到這里來，更多的可以去網(wǎng)站看看。

工欲善其事，必先利其器。要用svg制作復(fù)雜或者是高級的動畫效果，javascript就必不可少來。今天我們就來學(xué)習(xí)下svg中的jQuery庫Snap.svg這一js庫，它的功能跟jQuery在dom的作用差不多，只不過它是專門用來操作svg的。有了它，我們就可以輕松的使用javascript和svg打交道了。

接下來以實(shí)際的例子來講解下Snap的使用方法。

Snap的那些事兒

說起Snap就不得不提Raph?el.js這個庫。因?yàn)镾nap的創(chuàng)造者正是Raph?el.js的創(chuàng)造者Dmitry Baranovskiy，而Raph?el.js也是用來操作svg的。它的主要一個功能是能使老版本的IE瀏覽器也能支持svg，比如ie6等。

而snap的出現(xiàn)，則是實(shí)現(xiàn)了svg中的一些高級特性的功能，比如蒙板、漸變、分組以及動畫等高級特性，而且也不再對老版本的不支持svg的瀏覽器進(jìn)行兼容，大大減少了代碼量更加能發(fā)揮svg的特性。

Snap能做些什么

從官方的文檔API documentation可以看到，所有svg的特性我們都可以使用Snap來操作，比如mask,group,gradient,filter,animate,
pattern等屬性。

使用snap能幫助我們創(chuàng)建svg格式的圖形，當(dāng)然也能基于現(xiàn)有的svg圖形來進(jìn)行操作。意味著我們不一定要使用snap來創(chuàng)建圖形，我們可以先使用一些適量編輯軟件如Adobe IIIustrator,Inkscape,或者是Sketch來制作svg圖形，然后再使用snap來進(jìn)行一些操作。

開始使用Snap

方便起見，我們這里使用codepen來做一些demo。

首先準(zhǔn)備一個基本開始骨架，基本的hmtl結(jié)構(gòu)以及引入snapsvg.js這個庫。

準(zhǔn)備好后就可以開始編碼啦。

其實(shí)它的使用方法跟jQuery差不多，開始之前需要初始化Snap，即使用Snap來制定我們需要操作svg的節(jié)點(diǎn)并把它指定給一個變量。我們這里就定義為s。

var s = Snap("#svg");

是不是似增相識。

現(xiàn)在我們就可以使用Snap提供的各種方法來操作s這個變量，比如圓或者是矩形。

圓，創(chuàng)建圓需要三個參數(shù)：X(x軸的坐標(biāo))，Y(y軸的坐標(biāo))，半徑。具體可以參考文檔circle API

矩形，需要四個參數(shù)：X，Y，寬，高。文檔地址rect API

橢圓，需要四個參數(shù)：X，Y，horizontal radius(水平方向的半徑)，vertical radius(垂直方向的半徑)。文檔地址ellipse API

我們輸入下面的js代碼：

    //創(chuàng)建床半徑為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

從代碼運(yùn)行的結(jié)果來看，默認(rèn)填充的顏色是黑色。下面我們使用snap來設(shè)置一些樣式，如填充、透明度、邊框、邊框的寬度等屬性。具體可以去看看文檔
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這一強(qiáng)大的功能，顧名思義，使用它我們可以把多個圖形編成一組，使之變?yōu)橐粋€圖形。

先來創(chuàng)建兩個圖形，然后把它們編成一組。再來操作它們的屬性。

    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
    });

結(jié)果如下：

DEMO

在文章開始部分，我們說過會做一個眼睛的例子。需要用到svg中的蒙板屬性mask。首先我們來創(chuàng)建一個橢圓并放置在上組圖形的中間。

    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

現(xiàn)在我們就以橢圓為蒙板來對圖形進(jìn)行剪裁，并且對橢圓填充為白色：

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

DEMO

讓圖形動起來

眼睛的形狀就完成來，不過要是讓眼睛動起來會更加有趣一點(diǎn)。使用Snap中的animate方法來實(shí)現(xiàn)動畫效果非常方便。要使眼睛動起來，我們只需要讓橢圓的垂直的半徑從1增加到90就可以了。

先來創(chuàng)建一個名為blink的動畫函數(shù)：

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

現(xiàn)在我們可以使用setInterval函數(shù)來循環(huán)執(zhí)行blink動畫，這樣我們的眼睛就會不停的運(yùn)動。

    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);
      });
    };
 
    // 每三秒執(zhí)行一次動畫
 
    setInterval(blink, 3000);

效果如下：

DEMO

瀏覽器支持

要注意的使，Snap只支持IE9+,chrome,safari,firefox以及opera等現(xiàn)代瀏覽器。

開源

Snap.svg使開源的，意味著我們可以免費(fèi)使用它來開發(fā)。

參考文章：

How to Manipulate and Animate SVG With Snap.svg

云服務(wù)器 GPU云服務(wù)器入門知識入門基礎(chǔ)知識服務(wù)器知識入門 nlp入門知識

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80439.html

發(fā)表評論

登陸后可評論

0條評論

fantix

男|高級講師

我要關(guān)注我要私信

TA的文章

使用 docker + verdaccio 搭建npm私有倉庫

閱讀 3052·2021-11-19 11:31
再談C++中的構(gòu)造函數(shù)，深入理解構(gòu)造函數(shù)(上篇)

閱讀 3140·2021-09-02 15:15
【每日一包0016】striptags

閱讀 994·2019-08-29 17:22
Chrome 調(diào)試技巧

閱讀 1064·2019-08-29 16:38
#javascript# window.onload 和 $(document).ready()

閱讀 2469·2019-08-26 13:56
websocket學(xué)習(xí)和群聊實(shí)現(xiàn)

閱讀 840·2019-08-26 12:16
那些原生JavaScript

閱讀 1441·2019-08-26 11:29
h5 與 RN 交互文檔

閱讀 937·2019-08-26 10:12

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Snap.svg 基本知識入門

相關(guān)文章

SVG

**使用 Snap.svg 來實(shí)現(xiàn)一個具有 morphing 動畫效果的按鈕動效**

SVG基礎(chǔ)教程(超級詳細(xì))

svg系列：1.svg基礎(chǔ)知識 & 不一樣的svg動畫世界

svg系列：1.svg基礎(chǔ)知識 & 不一樣的svg動畫世界

發(fā)表評論

0條評論

fantix

男|高級講師

TA的文章

使用 docker + verdaccio 搭建npm私有倉庫

再談C++中的構(gòu)造函數(shù)，深入理解構(gòu)造函數(shù)(上篇)

【每日一包0016】striptags

Chrome 調(diào)試技巧

#javascript# window.onload 和 $(document).ready()

websocket學(xué)習(xí)和群聊實(shí)現(xiàn)

那些原生JavaScript

h5 與 RN 交互文檔

最新活動