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

時間 2019-11-26

標籤前端技術 svg 簡介 snap.svg.js snap 開源項目使用欄目 JavaScript 简体版

原文原文鏈接

前言-爲何學習snap.svg.js

前陣子webAPP的技術羣裏有人感受到svg+animate的形式感受很炫，矢量圖任意放大且不須要下載圖片,而且在手機端效果流暢。php

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

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

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

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

仍是使用js封裝好的方法來操做更省時省事一些。web

而且移動端的火爆也致使svg這項技術也愈來愈多的運用在項目中。svg

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

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

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

如今咱們要作的就是分析這個效果的原理是什麼，不要畏懼，即使它看上去很兇（逃學習

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