快捷導(dǎo)航

前端必備神器 Snap.svg 彈動(dòng)效果

更新時(shí)間：2014年11月10日 10:57:53 投稿：hebedich

SVG(可縮放矢量圖形)是基于可擴(kuò)展標(biāo)記語(yǔ)言（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定，是一個(gè)開(kāi)放標(biāo)準(zhǔn)。

有人說(shuō)不會(huì) SVG 的前端開(kāi)發(fā)者不叫開(kāi)發(fā)者，而叫愛(ài)好者。前端不光是 Angularjs 了，這時(shí)候再不學(xué) SVG 就晚了?。ㄈ绻阒粫?huì) jQuery 就當(dāng)我沒(méi)說(shuō)。。。）這里我就給大家分享一個(gè)前幾天在別處看到的一個(gè)高大上的 SVG 效果，左邊菜單彈出來(lái)會(huì)動(dòng)動(dòng)彈的說(shuō)，鏈接點(diǎn)這里。

當(dāng)時(shí)我就震驚了，今天抽空搞清了源碼，然后下面是我潛心研究后做出來(lái)的 Demo，雖然比較粗糙，但還是很洋氣的感覺(jué)呢。下面我就這個(gè) DEMO 跟大家分享一下。

http://jsfiddle.net/windwhinny/n6w1ur5k/3/

本案例需要有些 PS 或者 AI 中路徑的知識(shí)，下面是本例中運(yùn)涉及到的知識(shí)點(diǎn)和工具：

snap.svg
svg path data
Adobe Illustrator
animation timing

先給出原理：根據(jù)時(shí)間變換坐標(biāo)。如下圖所示，本例其實(shí)就是 A、B、C 三條線(xiàn)之間的轉(zhuǎn)換，A 是初始狀態(tài)，點(diǎn)擊后經(jīng)過(guò) B 最后形成 C。其中有兩次動(dòng)畫(huà)，分別是 A-B 和 B-C，而這兩次動(dòng)畫(huà)的 timing function 和時(shí)間都是不同的。

第一步：畫(huà)草稿

做動(dòng)畫(huà)前第一步就是畫(huà)草稿（如上圖），我一般用 AI 來(lái)畫(huà)，因?yàn)?AI 可以精確的控制元素尺寸和位置，而且其原理和 SVG 是一樣的。

然后有的同學(xué)就會(huì)說(shuō)，“老濕，是不是要保存為 SVG 格式的，然后做修改啊？”

錯(cuò)

畫(huà)草稿圖的目的只是為了方便的確定每個(gè)點(diǎn)的坐標(biāo)，自己算太麻煩了，而且還容易出錯(cuò)。除此之外 AI 沒(méi)有任何作用。AI 生成的 SVG 文件在此例中根本不能拿來(lái)用，因?yàn)槠渲械穆穭劈c(diǎn)太混亂了，下面會(huì)詳說(shuō)。

什么？你不會(huì)用 AI ？

如果你還想在前端這條路上走下去的話(huà)，那現(xiàn)在就去學(xué)吧。（在這里我想吐槽一下，PS 是用來(lái)處理點(diǎn)陣圖片的，根本不適合拿來(lái)做設(shè)計(jì)圖。相比之下 AI 才是做這個(gè)的，google 給出的 metrial design 布局模板全都是 AI 格式的。但國(guó)內(nèi)不管是什么企業(yè)，用 PS 都好像很開(kāi)心的樣子，不知道為什么。）

第二步：計(jì)算路徑

這一步就比較復(fù)雜了，上面說(shuō)過(guò)了，這個(gè)動(dòng)畫(huà)其實(shí)就是坐標(biāo)之間轉(zhuǎn)換。而從四邊形到圓弧之間的轉(zhuǎn)換不光是坐標(biāo)位移而已，還有曲線(xiàn)弧度的轉(zhuǎn)換。上面的設(shè)計(jì)圖直接保存為 SVG 后代碼如下：

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="圖層_1" xmlns="      viewBox="0 0 175 175" enable-background="new 0 0 175 175" xml:space="preserve">

<path fill="none" stroke="#BF3A41" stroke-miterlimit="10" d="
    M12.5,12.5
    h75
    h75
    v75
    v75
    h-75
    h-75
    v-35
    V12.5z"/>

<path fill="none" stroke="#0000FF" stroke-miterlimit="10" d="
    M37.5,37.5
    c0,0,10-25,50-25
    s50,25,50,25
    s25,10,25,50
    s-25,50-25,50
    s-10,25-50,25
    s-50-25-50-25
    s-25.1-10-25.1-50
    S37.5,37.5,37.5,37.5z"/>

<path fill="none" stroke="#000000" stroke-miterlimit="10" d="
    M37.5,37.5
    h50
    h50
    v50
    v50
    h-50
    h-50
    v-50
    V37.5z"/>
</svg>

我們只需要關(guān)注路徑的 d 屬性就行了，可以看出，AB 兩個(gè)路徑之間還是可以互相轉(zhuǎn)換的，但他們和 C 路徑（有弧線(xiàn)的路徑）之間就不能轉(zhuǎn)換了。他們所用到的繪圖命令都不同，AB 兩個(gè)都是矩形，繪圖時(shí)用到的都是 h、v，也就是橫縱之間的位移，畫(huà)出來(lái)的都是橫豎線(xiàn)。而 C 路勁用到的都是 s、c這些命令，畫(huà)出來(lái)的都是曲線(xiàn)。所以 AI 給出來(lái)的圖我們不能用，要自己根據(jù) svg path data 重新繪制一遍。

下面我參照 AI 設(shè)計(jì)圖重新繪制的三條路徑：

復(fù)制代碼代碼如下:

<!-- 路徑 A -->

<path d="

    M37.5,37.5

    S87.5,37.5,87.5,37.5

    S137.5,37.5,137.5,37.5

    S137.5,87.5,137.5,87.5

    S137.5,137.5,137.5,137.5

    S87.5,137.5,87.5,137.5

    S37.5,137.5,37.5,137.5

    S37.5,87.5,37.5,87.5

    S37.5,37.5,37.5,37.5z">

<!-- 路徑 B -->

<path d="

    M 37.5,37.5

    S47.5,12.5,87.5,12.5

    S127.5,25,137.5,37.5

    S162.5,47.5,162.5,87.5

    S150,127.5,137.5,137.5

    S127.5,162.5,87.5,162.5

    S47.5,150,37.5,137.5

    S12.5,127.5,12.5,87.5

    S25,47.5,37.5,37.5z">

<!-- 路徑 C -->

<path d="

    M12.5,12.5

    S87.5,12.5,87.5,12.5

    S162.5,12.5,162.5,12.5

    S162.5,87.5,162.5,87.5

    S162.5,162.5,162.5,162.5

    S87.5,162.5,87.5,162.5

    S12.5,162.5,12.5,162.5

    S12.5,127.5,12.5,127.5

    S12.5,12.5,12.5,12.5z">

有過(guò)設(shè)計(jì)基礎(chǔ)的同學(xué)應(yīng)該明白上面代碼的含義，就是將所有錨點(diǎn)轉(zhuǎn)換成平滑，然后再更改手柄的位置。形狀沒(méi)變，雖然代碼多了不少，但是把繪制命令都變成了 S ，這樣三條路徑就只有數(shù)值之間的不同了。而動(dòng)畫(huà)的過(guò)程就是數(shù)值之間的轉(zhuǎn)換。

第三步：Timing

這一步就是設(shè)定動(dòng)畫(huà)的時(shí)間點(diǎn)和 timing function 。時(shí)間點(diǎn)比較好說(shuō)，A-B 和 B-C 我設(shè)置的分別是300毫秒和400毫秒。

timing function 就是我們?cè)谧?CSS 動(dòng)畫(huà)中運(yùn)用到的 animation-timing-function 屬性，比較常見(jiàn)的有 ease、linear、easein，我們也可以用貝塞爾曲線(xiàn)自己定制。但是CSS的 timing function 比較簡(jiǎn)單，只能定義一條均勻的曲線(xiàn)，A-B 轉(zhuǎn)換用到的 ease-out，但是 B-C 為了體現(xiàn)彈動(dòng)的效果，所用到的 timing-function 就不是一條均勻曲線(xiàn)這么簡(jiǎn)單了。

上面列出了一些比較常用的 timing-function ，其中大概分為 ease、bounce、elastic 三類(lèi)。ease 一般用作減速或者加速動(dòng)效。bounce如同他的曲線(xiàn)圖一樣，一般用作小球落地那種動(dòng)效。而 elastic 一般用在如琴弦一樣的動(dòng)效上，這種動(dòng)效一個(gè)特點(diǎn)就是有部分偏移到負(fù)坐標(biāo)上了，而 B-C 用到的就是這個(gè),如下圖。

根據(jù)上面已經(jīng)畫(huà)出來(lái)的路徑，結(jié)合動(dòng)畫(huà)，代碼就出來(lái)了：

復(fù)制代碼代碼如下:

var svg=Snap("#svg");
var pathes=[
    "M37.5,37.5S87.5,37.5,87.5,37.5S137.5,37.5,137.5,37.5S137.5,87.5,137.5,87.5 S137.5,137.5,137.5,137.5S87.5,137.5,87.5,137.5S37.5,137.5,37.5,137.5S37.5,87.5,37.5,87.5S37.5,37.5,37.5,37.5z",
    "M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5 S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5 S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z",
    "M12.5,12.5S87.5,12.5,87.5,12.5S162.5,12.5,162.5,12.5S162.5,87.5,162.5,87.5S162.5,162.5,162.5,162.5S87.5,162.5,87.5,162.5S12.5,162.5,12.5,162.5S12.5,127.5,12.5,127.5S12.5,12.5,12.5,12.5z"
];

var path=svg.path(pathes[0]);

path.attr({
fill:"#2E70FF"
});

function animateIn(callback){
    path.animate({
        d:pathes[1]
    },300,mina.easeout,function(){
        path.animate({
            d:pathes[0]
        },400,mina.elastic,callback)
    });
};

function animateOut(callback){
    path.animate({
        d:pathes[1]
    },300,mina.easeout,function(){
        path.animate({
            d:pathes[2]
        },400,mina.elastic,callback)
    });
};

Snap 是 Adobe 出品處理 SVG 的庫(kù)，mina是 Snap 自帶的一個(gè)動(dòng)畫(huà)工具集，其中有很多預(yù)設(shè)的動(dòng)畫(huà)。

結(jié)語(yǔ)

用 Snap 制作的動(dòng)畫(huà)可以兼容 IE9 ，而且速度也不錯(cuò)，自定義功能很強(qiáng)大。相信不久的將來(lái)還會(huì)有更多狂拽酷炫屌炸天的動(dòng)效會(huì)用 Snap 制作出來(lái)。

如果想學(xué)習(xí)動(dòng)效的話(huà)，可以先看一下 TED 一集關(guān)于動(dòng)效的視頻

您可能感興趣的文章: