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

2019-10-10 16:19:46 作者: 大梦 浏览: 47 [百度已收录] [搜狗已收录] [360已收录]

简要教程

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

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

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

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

HTML结构

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

id="menu" class="menu">
    Menu
    
    

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

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

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' ) );
  
})();


版权免责声明 1、本网站名称:罗网云集-支付之家!
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站Potato土豆群:请先加好友啦你进群:dizhus —potato是一款不用翻墙的聊天软件
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的