使用 Snap.svg 來實現一個具備 morphing 動畫效果的按鈕動效

前面有專門寫過一篇morphing動畫基礎知識的文章，不瞭解的話能夠去這裏看看。

今天這篇文章來說一個morphing動畫在UI界面上一個具體的運用即具備morphing動畫效果的播放按鈕。開始以前能夠去YouTube網站上看看，它的播放和暫停按鈕不是簡單的切換，而是有一個過渡的動畫效果，即morphing動畫效果。以下圖所示：

經過上面能夠看出，播放與暫停之間的按鈕是用一個morphing過渡的動畫效果。固然像這麼簡單的效果使用CSS也能夠實現。

可是若是有大量的相似的morphing按鈕動畫效果，使用SVG無疑會更加簡單方便，實現效率也更高。下面就一步一步來完成這個morphing動畫效果，這裏會使用到snap svg 這個js庫來做爲基礎的SVG操做庫，它的做用就至關於jquery，提供了一整套的SVG解決方案，功能很是強大，詳細的使用方法能夠官方的文檔地址看看。

具體實現的效果以下圖所示：

準備工做

首先是在矢量設計軟件中設計好播放與暫停兩個按鈕，而後導出path（路徑），以下所示：

暫停按鈕的path：

<svg width="288" height="288" viewbox="0 0 72 72">
 <path d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" />
</svg>

播放按鈕的path：

<svg width="288" height="288" viewbox="0 0 72 72">
 <path d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" />
</svg>

由於咱們這裏會是在播放與暫停兩個狀態之間不停的切換，因此咱們這裏會使用SVG中的use來引用按鈕。即先把兩個按鈕定義在defs標籤中，而後經過use來引用具體的按鈕。以下代碼所示：

<div class="container">
    <button class="button js-button">
        <svg width="100%" height="100%" viewBox="0 0 36 36" id="svgicon" >
            <defs>
                <path id="pause-icon" data-state="playing" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" />
                <path id="play-icon"  data-state="paused"  d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" />
            </defs>
            <use xlink:href="#play-icon" />
        </svg>
    </button>
</div>

在defs元素中，咱們不但定義了播放和暫停兩個按鈕，還分別定義了自定義屬性data-state即表示當前按鈕的下一個狀態，好比暫停按鈕的下一個狀態是播放(playing)。在後面實現morphing動畫效果的時候要用到。

添加一些基本的樣式：

.container {
    width: 500px;
    margin: 0 auto;
}
.button {
    padding: 0;
    width: 500px;
    height: 500px;
    border: 0;
    background-color: white;
    outline: none;
}

運行效果以下圖所示：

javascript編碼實現morphing動畫效果

首先在頁面中引入Snap.svg文件：

https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js

js準備

先定義一個基本的方法：

var playButton = {};

獲取基本的元素以及一些初始狀態方法：

var playButton = {
    
      el: document.querySelector(".js-button"),
      
      //獲取兩個按鈕
    iconEls: {
        playing: document.querySelector("#pause-icon"),
        paused:  document.querySelector("#play-icon")
    },
    
    //用來存儲按鈕的兩個狀態
    nextState: {
        playing: "paused",
        paused:  "playing"
    },
    
    //初始方法
    init: function () {
        this.setInitialState();
        this.replaceUseEl();
        this.el.addEventListener("click", this.toggle.bind(this));
    }

}

這裏來解釋下初始方法：

• setInitialState() 方法是用來獲取當前按鈕下一個的狀態(data-state)屬性的值的。

• replaceUseEl() 方法是用來重置按鈕的。由於要實現SVG Morphing動畫效果，須要在path之間變換，因此須要在初始化的時候來使用path來代替use標籤。而初始使用use標籤是爲了照顧頁面在剛開始渲染的時候js還沒加載完的時候能正常顯示。

這兩個方法都使用到了Snap.svg中的一些基本方法，好比新建一個SVG元素(path)，就可使用paper方法：

Snap("svgicon").paper.path();

上面的代碼表示在ID爲svgicon這個SVG標籤中建立一個path元素。

一些初始化設置好後，接下來就是編寫點擊效果即點擊的時候在播放和暫停之間切換而且帶有Morphing動畫效果。這裏要使用到Snap.svg中animate方法：

Element.animate(attrs, duration, [easing], [callback])

參數

• attrs 對象，描述屬性的鍵值對。

• duration 數值，動畫持續的時間，單位是毫秒。

• easing 函數，自定義的或者mina提供的緩動函數。

• callback 函數，動畫結束時候的回調。

下面來看下實現Morphing動畫效果核心代碼：

toggle: function () {
        var path = Snap.select('.js-icon');
        this.goToNextState();
        path.animate({
            d:this.stateIconPath()
        },500,mina.linear);
    },
goToNextState: function () {
        this.state = this.nextState[this.state];
    },
stateIconPath: function () {
        return this.iconEls[this.state].getAttribute("d");
    }

所謂Morphing動畫效果，就是從一個形狀變到另外一個形狀。具體到咱們這裏就是在播放與暫停兩個狀態之間切換，因爲按鈕是path元素，因此只須要改變path元素中切換播放與暫停按鈕中path元素中的d的值就能夠了。

在toggle方法中，首先經過goToNextState()方法來獲取當前按鈕的下一個狀態；經過stateIconPath()方法來獲取當前按鈕下一個狀態的path屬性中d的值，而後在animate方法中改變當前的path中的d的值即下一個按鈕狀態path中的d的值。因爲使用animate方法，它們之間的變化會有一個動畫效果即Morphing動畫效果。

詳細的代碼能夠去這裏查看。

最近作了一個關於SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這裏來，更多的關於SVG方面的技術知識能夠去網站看看。