snap.svg.js学习------分类结构动画展示

wallimn

浏览: 5162113 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

javascript.snap.svg.js

wallimn原创，欢迎转载，原文地址：http://wallimn.iteye.com/blog/2373581

一、功能介绍：
　　功能很简单，就是一个支持炫酷动画效果的分类结构展示程序包，学习研究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，猛戳下载全部程序。

　　手机体验，请使用微信扫描下面二维码，不需关注、不需注册、不需下载：