前面有特地写过一篇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方面的手艺知识能够去网站看看。