html5各种svg元素炫酷弹性动画特效

这是一款效果非常炫酷的html5 svg元素弹性动画特效。该svg特效是将svg元素集成到容器中，然后使它们以弹性的方式从一条路径运动到另一条路径。通过这种方法可以制作出许多有意思的菜单、按钮和其它元素。

为了使svg产生动画，我们使用了SVG的javascript库 Snap.svg 。

demo中使用的图标是Font Awesome字体图标。

在draggable & droppable elements 这个demo中使用了David DeSandro的Dragabilly插件。

HTML结构

下面是侧边栏弹性动画的demo的html结构：

<nav id="menu" class="menu">
    <button class="menu__handle"><span>Menu</span></button>
    <div class="menu__inner">
        <ul>
            <li><a href="#"><i class="fa fa-fw fa-home"></i><span>Home<span></a></li>
            <li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Favs<span></a></li>
            <li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Files<span></a></li>
            <li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Stats<span></a></li>
        </ul>
    </div>
    <div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
        <svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
            <path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
        </svg>
    </div>
</nav>
                

SVG被插入到内部菜单中，我们使用两个data attributes来存储路径信息。

SVG应该被放到菜单里面，并且保证在移动菜单两条边时有足够的空间使线条不被切断。注意：SVG通过设置宽和高100%来使其具有响应性。

.morph-shape {
    position: absolute;
    width: 240px;
    height: 100%;
    top: 0;
    right: 0;
}
 
.morph-shape svg path {
    stroke: #5f656f;
    stroke-width: 5px;
}
                

JAVASCRIPT

通过Snap.svg我们可以讲svg从一种形状变为另一种形状：

(function() {
 
    function SVGMenu( el, options ) {
        this.el = el;
        this.init();
    }
 
    SVGMenu.prototype.init = function() {
        this.trigger = this.el.querySelector( 'button.menu__handle' );
        this.shapeEl = this.el.querySelector( 'div.morph-shape' );
 
        var s = Snap( this.shapeEl.querySelector( 'svg' ) );
        this.pathEl = s.select( 'path' );
        this.paths = {
            reset : this.pathEl.attr( 'd' ),
            open : this.shapeEl.getAttribute( 'data-morph-open' ),
            close : this.shapeEl.getAttribute( 'data-morph-close' )
        };
 
        this.isOpen = false;
 
        this.initEvents();
    };
 
    SVGMenu.prototype.initEvents = function() {
        this.trigger.addEventListener( 'click', this.toggle.bind(this) );
    };
 
    SVGMenu.prototype.toggle = function() {
        var self = this;
 
        if( this.isOpen ) {
            classie.remove( self.el, 'menu--anim' );
            setTimeout( function() { classie.remove( self.el, 'menu--open' );   }, 250 );
        }
        else {
            classie.add( self.el, 'menu--anim' );
            setTimeout( function() { classie.add( self.el, 'menu--open' );  }, 250 );
        }
        this.pathEl.stop().animate( { 'path' : this.isOpen ? this.paths.close : this.paths.open }, 350, mina.easeout, function() {
            self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic );
        } );
         
        this.isOpen = !this.isOpen;
    };
 
    new SVGMenu( document.getElementById( 'menu' ) );
 
})();