一、功能介绍：
功能很简单，就是一个支持炫酷动画效果的分类结构展示程序包，学习研究snap.svg.js的成果。纯javascript程序，可以html5网页中运行。不支持ie8及以下浏览器，手机运行效果更佳。依赖jQuery。
二、程序界面：
三、工具包代码：
function Snapcat(paper,data,options){
this.options={
centerX:100,
centerY:100,
bigRadius:70,
smallRadius:40,
leafClickHandler:function(json){
alert("id="+json.id+", data="+json.data);
},
colors:["#fa3e3e","#fa9c3e","#fafa3e","#9cfa3e","#3efa3e","#3efa9c","#3efafa","#3e9cfa","#3e3efa","#9c3efa"]
};
if(options){
jQuery.extend(this.options,options);
}
this.paper = paper;
this.data = data;
var exitPathDef = "M"+this.options.centerX+","+this.options.centerY+" Q"+this.options.centerX+" 0,0 0";
var enterPathDef="M0 0,Q0 "+this.options.centerY+","+this.options.centerX+" "+this.options.centerY;
//退出路径，内部变量
this.exitPath = paper.path(exitPathDef).attr({fill:'none'});
//进行路径，内部变量
this.enterPath = paper.path(enterPathDef).attr({fill:'none'});
this.getLevelColor=function(level){
if(level>=this.options.colors.length)return "#f00";
else return this.options.colors[level];
};
//根据ID获取数据
this.getDataById=function (id){
for(var i=0; i<this.data.length; i++){
if(this.data[i].id==id)return this.data[i];
}
return null;
};
this.getDataByPid=function(id){
var result=[];
for(var i=0; i<this.data.length; i++){
if(this.data[i].pid==id)result.push(this.data[i]);
}
return result;
};
this.getLevel=function(id){
var level = 0;
var data = this.getDataById(id);
if(!data)return level;
while(data.pid!=0){
level++;
data = this.getDataById(data.pid);
}
return level;
};
//内部私用函数
function drawMainCat(cx,cy,r,id,millisec){
var result = {};
var data = this.getDataById(id);
var level = this.getLevel(id);
result.circle=this.paper.circle(cx,cy,r).attr({
fill:this.getLevelColor(level),
stroke:this.getLevelColor(level),
strokeOpacity:0.75,
r:0,
"data-id":data.id,
"data-pid":data.pid,
strokeWidth:8
});
result.text = paper.text(cx,cy,data.label)
.attr({"opacity":0,"data-id":data.id,"data-pid":data.pid});
var bbox = result.text.getBBox();
var matrix = new Snap.Matrix();
matrix.translate(-bbox.width/2, bbox.height/2);
result.text.transform(matrix);
if(millisec){
result.circle.animate({r:r},millisec*9/10,mina.bounce,function(){
result.text.animate({opacity:1},millisec/10,mina.bounce,function(){
});
});
}
else{
result.circle.attr({r:r});
result.text.attr({opacity:1});
}
return result;
}
//绘制子类
function drawSubCat(cx,cy,r1,r2,id,timeOutMillisec,dualMillisec){
var self = this;//在内部函数中使用
//显示子类
var data = this.getDataByPid(id);
var level = this.getLevel(id);
if(!data || data.length==0)return;
var x,y;
var distance=r1+r2+10;
var subcircles = this.paper.group();
var subcircle,subtext,matrix;
var datalen = data.length;
var result = [];
for(var i=0; i<datalen; i++){
x = distance*Math.sin(360*i*Math.PI/180/datalen)+this.options.centerX;
y = distance*Math.cos(360*i*Math.PI/180/datalen)+this.options.centerY;
subcircle=paper.circle(x,y,0).attr({"data-id":data[i].id,"data-pid":data[i].pid,"data-idx":i,"data-data":data[i].data});
subcircles.add(subcircle);
subtext = paper.text(x,y,data[i].label).attr({"data-id":data[i].id,"data-pid":data[i].pid,"data-data":data[i].data,opacity:0,"data-idx":i});
bbox = subtext.getBBox();
matrix = new Snap.Matrix();
matrix.translate(-bbox.width/2,bbox.height/2);
subtext.transform(matrix);
result.push({circle:subcircle,text:subtext});
}
subcircles.attr({
fill:this.getLevelColor(level+1),
stroke:this.getLevelColor(level+1),
strokeOpacity:0.75,
strokeWidth:8
});
if(timeOutMillisec && dualMillisec){
setTimeout(function(){
var circle,text;
for(var i=0; i<datalen; i++){
Snap($("circle[data-id="+data[i].id+"]")[0]).animate({r:r2},dualMillisec*9/10,mina.bounce,function(){
var id = this.node.getAttribute("data-id");
Snap($("text[data-id="+id+"]")[0]).animate({opacity:1},dualMillisec/10,mina.bounce);
});
}
},timeOutMillisec);
}
else{
for(var i=0; i<datalen; i++){
Snap($("circle[data-id="+data[i].id+"]")[0]).attr({r:r2});
Snap($("text[data-id="+data[i].id+"]")[0]).attr({opacity:1});
}
}
//设置事件
var clickHandler = function(){
var idx = this.node.getAttribute("data-idx");
var pid = this.node.getAttribute("data-pid");
var id = this.node.getAttribute("data-id");
var catdata = this.node.getAttribute("data-data");
if(self.getDataByPid(id).length==0){
self.options.leafClickHandler({id:id,data:catdata});
return;
}
$("circle[data-idx!="+idx+"][data-pid="+pid+"]").remove();
$("text[data-idx!="+idx+"][data-pid="+pid+"]").remove();
//paper.selectAll("circle[data-id="+pid+"],text[data-id="+pid+"]").remove();
var length = Snap.path.getTotalLength(self.exitPath);
var circle = Snap($("circle[data-id="+pid+"]")[0]);
var text = Snap($("text[data-id="+pid+"]")[0]);
//移走大圆
Snap.animate(0,length,function(val){
var point = Snap.path.getPointAtLength(self.exitPath,val);
circle.attr({cx:point.x,cy:point.y});
text.attr({x:point.x,y:point.y});
},timeOutMillisec,mina.easeout);
//移动上左上角后，增加事件，负责移回大圆
circle.click(function(){
var id = this.node.getAttribute("data-id");
$("circle[data-id!="+id+"]").remove();
$("text[data-id!="+id+"]").remove();
var length = Snap.path.getTotalLength(self.enterPath);
var circle=Snap($('circle[data-id='+id+']')[0]);
var text=Snap($('text[data-id='+id+']')[0]);
//移回大圆
Snap.animate(0,length,
function(val){
var point = Snap.path.getPointAtLength(self.enterPath,val);
circle.attr({cx:point.x,cy:point.y});
text.attr({x:point.x,y:point.y});
},
timeOutMillisec,
function(){
circle.unclick();
});
drawSubCat.bind(self)(cx,cy,r1,r2,id,timeOutMillisec,dualMillisec);
});
var subCircle = Snap($("circle[data-id="+id+"]")[0]) ;
var subText = Snap($("text[data-id="+id+"]")[0]) ;
var subPathDef = "M"+subCircle.attr("cx")+" "+subCircle.attr("cy")+" L"+self.options.centerX+" "+self.options.centerY;
var subPath = paper.path(subPathDef);
length = Snap.path.getTotalLength(subPath);
//放大小圆
Snap.animate(self.options.smallRadius,self.options.bigRadius,
function(val){
subCircle.attr({r:val});
},
dualMillisec,mina.easeout
);
subText.unclick();
subCircle.unclick();
//小圆移到中心
Snap.animate(0,length,function(val){
var point = Snap.path.getPointAtLength(subPath,val);
subCircle.attr({cx:point.x,cy:point.y});
subText.attr({x:point.x,y:point.y});
},
dualMillisec,mina.easeout,
function(){
drawSubCat.bind(self)(cx,cy,r1,r2,id,dualMillisec,dualMillisec);
}
);
};//end of click event
for(var i=0; i<result.length;i++){
result[i].text.click(clickHandler);
result[i].circle.click(clickHandler);
}//end of for
return result;
}
this.drawCat=function(){
var millsec=600;
drawMainCat.bind(this)(this.options.centerX,this.options.centerY,this.options.bigRadius,1,millsec);
drawSubCat.bind(this)(this.options.centerX,this.options.centerY,this.options.bigRadius,this.options.smallRadius,1,millsec,400);
}
}//end of Snapcat
四、应用示例：
<!DOCTYPE html>
<!--
作者: wallimn, http://wallimn.iteye.com
时间:2017年5月7日
功能：很酷的分类动画展示包
-->
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>酷炫分类-wallimn</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
#svg {
margin:0;
position:relative;
top:50%;
border-radius:5px;
border:1px solid #efefef;
}
text{
font-size:14px;
}
</style>
</head>
<body>
<svg id='paper'></svg>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/snap.svg-min.js"></script>
<script type="text/javascript" src="js/snapcat.js"></script>
<script type="text/javascript">
$(function(){
var clientWidth=document.body.clientWidth;
var clientHeight=document.body.clientHeight;
$("#paper").css("width",clientWidth+"px").css("height",clientHeight+"px");
var minsize = Math.min(clientWidth,clientHeight);
var paper = Snap("#paper");
//创建床半径为80的圆
var centerX=clientWidth/2, centerY=clientHeight/2 ;
var data = [
{id:1,pid:0,label:'知识体系',data:null},
{id:2,pid:1,label:'产品',data:null},
{id:3,pid:1,label:'运营',data:null},
{id:4,pid:1,label:'规划',data:null},
{id:5,pid:1,label:'创意',data:null},
{id:6,pid:1,label:'战略',data:null},
{id:9,pid:2,label:'产品-子类1',data:'A001'},
{id:10,pid:2,label:'产品-子类2',data:'A002'},
{id:31,pid:2,label:'产品-子类3',data:'A001'},
{id:32,pid:2,label:'产品-子类4',data:'A002'},
{id:11,pid:3,label:'运营-子类1',data:'A003'},
{id:12,pid:3,label:'运营-子类2',data:'A004'},
{id:13,pid:3,label:'运营-子类3',data:'A005'},
{id:14,pid:4,label:'规划-子类1',data:'A006'},
{id:15,pid:4,label:'规划-子类2',data:'A007'},
{id:16,pid:4,label:'规划-子类3',data:'A008'},
{id:17,pid:4,label:'规划-子类4',data:'A009'},
{id:18,pid:5,label:'创意-子类1',data:'A010'},
{id:18,pid:5,label:'创意-子类2',data:'A011'},
{id:20,pid:6,label:'战略-子类1',data:'A012'},
{id:21,pid:6,label:'战略-子类2',data:'A013'},
{id:22,pid:6,label:'战略-子类3',data:'A014'},
{id:23,pid:6,label:'战略-子类4',data:'A012'},
{id:24,pid:6,label:'战略-子类5',data:'A013'},
{id:25,pid:6,label:'战略-子类6',data:'A014'},
];
var snapcat = new Snapcat(paper,data,{centerX:centerX,centerY:centerY});
snapcat.drawCat();
});
</script>
</body>
</html>
五、代码仓库：
代码上传到github.com，访问地址： https://github.com/wallimn/snapcat，猛戳下载全部程序。
手机体验，请使用微信扫描下面二维码，不需关注、不需注册、不需下载：
