前端技術-svg簡介與snap.svg.js開源項目的使用

前言-為什么學習snap.svg.js

前陣子webAPP的技術群里有人感覺到svg+animate的形式感覺很炫，矢量圖任意放大且不需要下載圖片,並且在手機端效果流暢。

（矢量圖與位圖最大的區別是，它不受分辨率的影響。可以任意放大或縮小圖形而不會影響出圖的清晰度，

可以按最高分辨率顯示到輸出設備上,位圖即相機拍出來的，由像素塊組成的圖片。

svg代碼可使用Adobe公司的AI軟件導出，該Snap.svg也是Adobe的開源項目）

 

雖然svg、animate並不新鮮，但由於svg的代碼是由PC計算出來的，操縱它放大或縮小翻轉等更加炫酷的效果。

還是使用js封裝好的方法來操作更省時省事一些。

並且移動端的火爆也導致svg這項技術也越來越多的運用在項目中。

 

言歸正傳-會用jquery就會用snap.svg.js

先點擊看個Demo讓您感興趣。

直接在演示頁面看那個鱷魚頭就好了，鼠標移動過去會有交互式的動畫。

 

現在我們要做的就是分析這個效果的原理是什么，不要畏懼，即便它看上去很凶（逃

開啟F12選擇元素 對准那個會動的上顎點擊一下看看代碼：

這時候我們可以看下點擊該元素的代碼中有一大堆好像前端從來都不需要用到的標簽..（起碼我一開始接觸svg是這樣認為的）

那我們就需要知道這些標簽的作用，才能靈活的運用它們。為了通俗易懂，我只簡介demo中的標簽，想知道更詳細的請去查下資料。

<g></g>   ：理解為一個塊，即那個鱷魚並不是一張圖片，是由N個g（塊）組成的,就跟平時重構一樣，無數個div嵌套，分離，把它看作一個容器，我們需要操縱容器來進行動畫。

<polygon> ：標簽用來創建含有不少於三個邊的圖形。

<line>        ：標簽用來創建線條。

 

接下來看下源碼是什么樣的

我們把F12窗口縮小點放在一邊，當鼠標移動到上顎的時候，觀察下F12中上顎部分的這段代碼，見圖。

可以看到id="upper-jaw"的g標簽中 transform=matrix(1,0,0,1,0,0)這六個數值在不斷的變化，也就是我們所見到的動畫效果。（matrix()資料我會貼在文章尾部，現在不需要去理解，比較費勁）

上面說過了，會用jquery就會用snap.svg.js,真的很簡單，下面我貼代碼讓我們來look look，別忘了在此之前引入snap.svg.js。(下載snap,要在wamp環境下運行)

        window.onload = function () {

            var croc = Snap.select("#crocodile"),
                head = croc.select("#upper-head"),
                jaw = croc.select("#upper-jaw"),//獲取到了鱷魚的上顎
                symbol = croc.select("#symbol"),
                timer;
                
            var pivots = [
                [44, 147],//matrix動畫效果的值
                [92, 126]
            ];

            //鼠標離開時觸發的函數-即合上大嘴
            function close() {
                clearTimeout(timer);

                head.animate({ 
                    transform: "r" + [8, pivots[0]]
                }, 500, mina.backin);
                
                jaw.animate({
                    transform: "r" + [37, pivots[1]]
                }, 500, mina.backin);

                timer = setTimeout(function () {
                    symbol.animate({
                        transform: "t-70,40r40"
                    }, 100);
                }, 400);
            }

            //鼠標hover時觸發的函數-即合上大嘴
            function open() {
                clearTimeout(timer);

                head.animate({ 
                    transform: "r" + [0, pivots[0]]
                }, 700, mina.elastic);
                
                jaw.animate({
                    transform: "r" + [0, [92, 200]]
                }, 700, mina.elastic);

                symbol.animate({
                    transform: "t0,0r0"
                }, 500, mina.elastic);
            }

            timer = setTimeout(close, 50);

            //定義事件觸發條件
            croc.hover(open, 
                function () {
                    timer = setTimeout(close, 200);
                }
            );
        };

我相信會jquery的肯定一看就懂了，無非就是獲取元素，調用封裝好的方法來達到效果。

篇幅原因（或者是我餓了？感覺有些地方可能沒講細，留言我會及時回復的。

接下來我們需要做的是了解Snap.svg.js的API，我剩下要做的也就是留下一堆資料地址，兩袖清風了（淚..

Snap.svg.js中文API

理解CSS3 transform中的Matrix(矩陣)

最后感謝張鑫旭博客的資料。

 

------------------------------最后的最后（吐個槽-----------------------------------------------

我本來想貼個天鱷食月的效果。。但是沒找到CDN，沒貼上來，我也懶得整了..放在電腦里自己欣賞吧。。

最后..(沒完了沒完了

下星期三就要入職了，昨天剛拿到離職證明，離開第一家公司還是比較懷念的，雖然有點坑吧，但還是挺美好的回憶啊 ~ 感嘆下(￣︶￣)↗ 漲