这是一款效果非常炫酷的液态环形按钮菜单jQuery特效。该特效使用GSAP来制作圆形按钮的变形动画，当用户点击主按钮时，按钮会像液体一样变形，并分离出3个子菜单按钮。
使用方法
使用该液态环形按钮菜单特效需要在页面中引入jQuery和TweenMax.min.js以及font-awesome字体图标文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
HTML结构
该液态环形按钮菜单的HTML结构非常简单，子菜单使用的是一个无序列表，每个列表项中是一个按钮元素以及一个用于制作弹性效果的div层。主菜单按钮就是一个按钮元素。
<div class='content'>
<div class='menu'>
<div class='menu-wrapper'>
<ul class='menu-items'>
<li class='menu-item'>
<button class='menu-item-button'>
<i class='fa fa-reply-all'></i>
</button>
<div class='menu-item-bounce'></div>
</li>
<li class='menu-item'>
<button class='menu-item-button'>
<i class='fa fa-inbox'></i>
</button>
<div class='menu-item-bounce'></div>
</li>
<li class='menu-item'>
<button class='menu-item-button'>
<i class='fa fa-trash'></i>
</button>
<div class='menu-item-bounce'></div>
</li>
</ul>
<button class='menu-toggle-button'>
<i class='fa fa-plus menu-toggle-icon'></i>
</button>
</div>
</div>
</div>
CSS样式
为菜单添加下面的一些简单的CSS样式。
.menu {
width: 300px;
height: 200px;
margin: 0 auto 100px;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.menu-wrapper {
position: absolute;
left: 50%;
bottom: 10px;
}
.menu-toggle-button, .menu-item-bounce, .menu-item-button {
background: #4f4f64;
border-radius: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
height: 80px;
color: #fff;
border: none;
outline: none;
position: relative;
}
.menu-toggle-button {
background: transparent;
position: absolute;
top: 0;
left: 0;
}
.menu-toggle-icon {
font-size: 30px;
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
line-height: 80px;
}
.menu-items {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.menu-item {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.menu-item-bounce {
position: absolute;
top: 0;
left: 0;
}
.menu-item-button {
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
position: absolute;
top: 0;
left: 0;
color: #AD4C4C;
}
.menu-item-button .fa {
font-size: 1.5rem;
color: #fff;
}
.menu-item-button .fa-inbox {
transform: rotate(182deg);
}
.menu-item-button .fa-reply-all {
transform: rotate(-120deg);
}
.menu-item-button .fa-trash {
transform: rotate(120deg);
}
JavaScript
该液态环形按钮菜单使用GSAP来制作按钮的动画效果。其中openMenu()函数为打开菜单，closeMenu()函数为关闭菜单。
$(document).ready(function(){
var menuItemNum=$(".menu-item").length;
var angle=120;
var distance=90;
var startingAngle=180+(-angle/2);
var slice=angle/(menuItemNum-1);
TweenMax.globalTimeScale(0.8);
$(".menu-item").each(function(i){
var angle=startingAngle+(slice*i);
$(this).css({
transform:"rotate("+(angle)+"deg)"
})
$(this).find(".menu-item-icon").css({
transform:"rotate("+(-angle)+"deg)"
})
})
var on=false;
$(".menu-toggle-button").mousedown(function(){
TweenMax.to($(".menu-toggle-icon"),0.1,{
scale:0.65
})
})
$(document).mouseup(function(){
TweenMax.to($(".menu-toggle-icon"),0.1,{
scale:1
})
});
$(document).on("touchend",function(){
$(document).trigger("mouseup")
})
$(".menu-toggle-button").on("mousedown",pressHandler);
$(".menu-toggle-button").on("touchstart",function(event){
$(this).trigger("mousedown");
event.preventDefault();
event.stopPropagation();
});
function pressHandler(event){
on=!on;
TweenMax.to($(this).children('.menu-toggle-icon'),0.4,{
rotation:on?45:0,
ease:Quint.easeInOut,
force3D:true
});
on?openMenu():closeMenu();
}
function openMenu(){
$(".menu-item").each(function(i){
var delay=i*0.08;
var $bounce=$(this).children(".menu-item-bounce");
TweenMax.fromTo($bounce,0.2,{
transformOrigin:"50% 50%"
},{
delay:delay,
scaleX:0.8,
scaleY:1.2,
force3D:true,
ease:Quad.easeInOut,
onComplete:function(){
TweenMax.to($bounce,0.15,{
// scaleX:1.2,
scaleY:0.7,
force3D:true,
ease:Quad.easeInOut,
onComplete:function(){
TweenMax.to($bounce,3,{
// scaleX:1,
scaleY:0.8,
force3D:true,
ease:Elastic.easeOut,
easeParams:[1.1,0.12]
})
}
})
}
});
TweenMax.to($(this).children(".menu-item-button"),0.5,{
delay:delay,
y:distance,
force3D:true,
ease:Quint.easeInOut
});
})
}
function closeMenu(){
$(".menu-item").each(function(i){
var delay=i*0.08;
var $bounce=$(this).children(".menu-item-bounce");
TweenMax.fromTo($bounce,0.2,{
transformOrigin:"50% 50%"
},{
delay:delay,
scaleX:1,
scaleY:0.8,
force3D:true,
ease:Quad.easeInOut,
onComplete:function(){
TweenMax.to($bounce,0.15,{
// scaleX:1.2,
scaleY:1.2,
force3D:true,
ease:Quad.easeInOut,
onComplete:function(){
TweenMax.to($bounce,3,{
// scaleX:1,
scaleY:1,
force3D:true,
ease:Elastic.easeOut,
easeParams:[1.1,0.12]
})
}
})
}
});
TweenMax.to($(this).children(".menu-item-button"),0.3,{
delay:delay,
y:0,
force3D:true,
ease:Quint.easeIn
});
})
}
})
