转载

HTML5 SVG汉堡包菜单按钮分段动画特效

简要教程

这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效。该菜单按钮特效在用户点击汉堡包按钮时，按钮会分割为多段，并旋转变形为关闭按钮的状态。当再次点击该按钮时，它会逆向变形为汉堡包图标。

查看演示下载插件

该特效是基于Segment.js插件(一款可以只绘制和动画某一段SVG路径的js插件)来制作的。

使用方法

绘制SVG路径

这是一个非常复杂的路径动画过程，如果我们一帧帧的来分析动画，就可以分别绘制出每一条路径。路径动画像下图的样子：

HTML5 SVG汉堡包菜单按钮分段动画特效

根据上面的图我们可以得到类似下面的SVG代码。

<svg width="100px" height="100px">     <path d="M 30 40 L 70 40 C 90 40 90 75 60 85 A 40 40 0 0 1 20 20 L 80 80"></path>     <path d="M 30 50 L 70 50"></path>     <path d="M 70 60 L 30 60 C 10 60 10 20 40 15 A 40 38 0 1 1 20 80 L 80 20"></path> </svg>

为了便于为菜单按钮添加样式及在JavaScript中调用，可以给SVG一个包裹元素，并设置其class和ID。

<!-- Wrapper --> <div id="menu-icon-wrapper" class="menu-icon-wrapper">  <!-- SVG element with paths -->  <svg width="100px" height="100px">   <path id="pathA" d="M 30 40 L 70 40 C 90 40 90 75 60 85 A 40 40 0 0 1 20 20 L 80 80"/>   <path id="pathB" d="M 30 50 L 70 50"/>   <path id="pathC" d="M 70 60 L 30 60 C 10 60 10 20 40 15 A 40 38 0 1 1 20 80 L 80 20"/>  </svg>  <!-- Trigger to perform the animations -->  <button id="menu-icon-trigger" class="menu-icon-trigger"></button> </div>

CSS样式

// The wrapper was defined with a fixed width and height // Note, that the pointer-events property is set to 'none'.  // We don't need any pointer events in the entire element. .menu-icon-wrapper{  position: relative;  display: inline-block;  width: 34px;  height: 34px;  pointer-events: none;  transition: 0.1s; } // To perform the scaled transform for the second demo .menu-icon-wrapper.scaled{  transform: scale(0.5); } // Adjusting the position of the SVG element .menu-icon-wrapper svg{  position: absolute;  top: -33px;  left: -33px; } // Defining the styles for the path elements .menu-icon-wrapper svg path{  stroke: #fff;  stroke-width: 6px;  stroke-linecap: round;  fill: transparent; } // Setting the pointer-events property to 'auto',  // and allowing only events for the trigger element .menu-icon-wrapper .menu-icon-trigger{  position: relative;  width: 100%;  height: 100%;  cursor: pointer;  pointer-events: auto;  background: none;  border: none;  margin: 0;  padding: 0; }

SVG动画

为了使汉堡包图标的上下两条线产生动画效果，首先需要初始化它的begin和end值。关于Segment.js的用法可以参考这里。

var pathA = document.getElementById('pathA'),     pathC = document.getElementById('pathC'),     segmentA = new Segment(pathA, 8, 32),     segmentC = new Segment(pathC, 8, 32);

接下来是两个动画函数，它们用于上下两条线条的动画。第一个以线性方式动画路径，在其回调函数中调用第二个动画函数。

// Linear section, with a callback to the next function inAC(s) { s.draw('80% - 24', '80%', 0.3, {delay: 0.1, callback: function(){ inAC2(s) }}); }   // Elastic section, using elastic-out easing function function inAC2(s) { s.draw('100% - 54.5', '100% - 30.5', 0.6, {easing: ease.ease('elastic-out', 1, 0.3)}); }   // Running the animations inAC(segmentA); // top bar inAC(segmentC); // bottom bar

对于中间的线条只需要重复以上步骤。

// Initialize var pathB = document.getElementById('pathB'),     segmentB = new Segment(pathB, 8, 32);   // Expand the bar a bit function inB(s) { s.draw(8 - 6, 32 + 6, 0.1, {callback: function(){ inB2(s) }}); }   // Reduce with a bounce effect function inB2(s) { s.draw(8 + 12, 32 - 12, 0.3, {easing: ease.ease('bounce-out', 1, 0.3)}); }   // Run the animation inB(segmentB);

以下是将按钮恢复到汉堡包状态的代码。

function outAC(s) { s.draw('90% - 24', '90%', 0.1, {easing: ease.ease('elastic-in', 1, 0.3), callback: function(){ outAC2(s) }}); } function outAC2(s) { s.draw('20% - 24', '20%', 0.3, {callback: function(){ outAC3(s) }}); } function outAC3(s) { s.draw(8, 32, 0.7, {easing: ease.ease('elastic-out', 1, 0.3)}); }   function outB(s) { s.draw(8, 32, 0.7, {delay: 0.1, easing: ease.ease('elastic-out', 2, 0.4)}); }   // Run the animations outAC(segmentA); outB(segmentB); outAC(segmentC);

最后，为了在点击图标的时候开始执行动画，可以向下面这样设置事件监听。

var trigger = document.getElementById('menu-icon-trigger'),  toCloseIcon = true; trigger.onclick = function() {  if (toCloseIcon) {   inAC(segmentA);   inB(segmentB);   inAC(segmentC);  } else {   outAC(segmentA);   outB(segmentB);   outAC(segmentC);  }  toCloseIcon = !toCloseIcon; };

浏览器兼容

上面的代码可以非常好的完成SVG汉堡包图标的动画，但是它们在各个浏览器中的表现有一些不一致。为了解决这个问题，可以简单的将SVG放大10倍，代码如下：

<svg width="1000px" height="1000px">     <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>     <path id="pathB" d="M 300 500 L 700 500"></path>     <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> </svg>

然后通过CSS来将SVG缩小10倍。

.menu-icon-wrapper svg {     transform: scale(0.1);     transform-origin: 0 0; }

正文到此结束

所属分类：编程技术

本文标签： Document HTML js App ip 代码下载 java HTML5 http src Menu 缩小 CSS 插件 UI
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

HTML5 SVG汉堡包菜单按钮分段动画特效

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流