网站开发的可行性,公司网站与营销网站区别,根路径 网站,搜狐新闻手机网这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效。该菜单按钮特效在用户点击汉堡包按钮时#xff0c;按钮会分割为多段#xff0c;并旋转变形为关闭按钮的状态。当再次点击该按钮时#xff0c;它会逆向变形为汉堡包图标。该特效是基于Segment.js插件(一款可以只…这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效。该菜单按钮特效在用户点击汉堡包按钮时按钮会分割为多段并旋转变形为关闭按钮的状态。当再次点击该按钮时它会逆向变形为汉堡包图标。该特效是基于Segment.js插件(一款可以只绘制和动画某一段SVG路径的js插件)来制作的。使用方法绘制SVG路径这是一个非常复杂的路径动画过程如果我们一帧帧的来分析动画就可以分别绘制出每一条路径。路径动画像下图的样子根据上面的图我们可以得到类似下面的SVG代码。为了便于为菜单按钮添加样式及在JavaScript中调用可以给SVG一个包裹元素并设置其class和ID。CSS样式// The wrapper was defined with a fixed width and height// Note, that the pointer-events property is set to none.// We dont 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 nextfunction inAC(s) { s.draw(80% - 24, 80%, 0.3, {delay: 0.1, callback: function(){ inAC2(s) }}); }// Elastic section, using elastic-out easing functionfunction inAC2(s) { s.draw(100% - 54.5, 100% - 30.5, 0.6, {easing: ease.ease(elastic-out, 1, 0.3)}); }// Running the animationsinAC(segmentA); // top barinAC(segmentC); // bottom bar对于中间的线条只需要重复以上步骤。// Initializevar pathB document.getElementById(pathB),segmentB new Segment(pathB, 8, 32);// Expand the bar a bitfunction inB(s) { s.draw(8 - 6, 32 6, 0.1, {callback: function(){ inB2(s) }}); }// Reduce with a bounce effectfunction inB2(s) { s.draw(8 12, 32 - 12, 0.3, {easing: ease.ease(bounce-out, 1, 0.3)}); }// Run the animationinB(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 animationsoutAC(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倍代码如下然后通过CSS来将SVG缩小10倍。.menu-icon-wrapper svg {transform: scale(0.1);transform-origin: 0 0;}
