這是一款效果非常炫酷的HTML5 SVG漢堡包菜單按鈕分段動(dòng)畫特效。該菜單按鈕特效在用戶點(diǎn)擊漢堡包按鈕時(shí)，按鈕會(huì)分割為多段，并旋轉(zhuǎn)變形為關(guān)閉按鈕的狀態(tài)。當(dāng)再次點(diǎn)擊該按鈕時(shí)，它會(huì)逆向變形為漢堡包圖標(biāo)。

該特效是基于Segment.js插件(一款可以只繪制和動(dòng)畫某一段SVG路徑的js插件)來制作的。

使用方法

繪制SVG路徑

這是一個(gè)非常復(fù)雜的路徑動(dòng)畫過程，如果我們一幀幀的來分析動(dòng)畫，就可以分別繪制出每一條路徑。路徑動(dòng)畫像下圖的樣子：

根據(jù)上面的圖我們可以得到類似下面的SVG代碼。

為了便于為菜單按鈕添加樣式及在JavaScript中調(diào)用，可以給SVG一個(gè)包裹元素，并設(shè)置其class和ID。

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動(dòng)畫

為了使?jié)h堡包圖標(biāo)的上下兩條線產(chǎn)生動(dòng)畫效果，首先需要初始化它的begin和end值。關(guān)于Segment.js的用法可以參考這里。

var pathA = document.getElementById('pathA'),

pathC = document.getElementById('pathC'),

segmentA = new Segment(pathA, 8, 32),

segmentC = new Segment(pathC, 8, 32);

接下來是兩個(gè)動(dòng)畫函數(shù)，它們用于上下兩條線條的動(dòng)畫。第一個(gè)以線性方式動(dòng)畫路徑，在其回調(diào)函數(shù)中調(diào)用第二個(gè)動(dòng)畫函數(shù)。

// 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

對(duì)于中間的線條只需要重復(fù)以上步驟。

// 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);

以下是將按鈕恢復(fù)到漢堡包狀態(tài)的代碼。

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);

最后，為了在點(diǎn)擊圖標(biāo)的時(shí)候開始執(zhí)行動(dòng)畫，可以向下面這樣設(shè)置事件監(jiān)聽。

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漢堡包圖標(biāo)的動(dòng)畫，但是它們?cè)诟鱾€(gè)瀏覽器中的表現(xiàn)有一些不一致。為了解決這個(gè)問題，可以簡(jiǎn)單的將SVG放大10倍，代碼如下：

然后通過CSS來將SVG縮小10倍。

.menu-icon-wrapper svg {

transform: scale(0.1);

transform-origin: 0 0;

}

總結(jié)

以上是生活随笔為你收集整理的html5列表菜单特效,HTML5 SVG汉堡包菜单按钮分段动画特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。