svg:使用raphaeljs绘制哆啦A梦并实现动画效果

 

网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画，点击观看演示，兼容性并不好，只有webkit支持动画，ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。 先来看下演示，目前知道的是ie6，7不支持动画，但是绘图还是没有问题的，ie6,7点击观看演示 最近对svg有些研究，先是使用svg代替css3实现qq空间关闭按钮旋转特效，然后是使用svg代替css3绘制opera图形，之前用css3实现的基本用svg都能实现。随着前端的发展，各种浏览器支持svg，svg的重要性会越来越大。 花了一天的时间写这些代码，注释都写在里面了。最后推荐一个很好用的工具aptana，javascipt代码提示很强，之前都是用dreamweaver，用来写html5和css3比较好用。

window.οnlοad=function(){
	var paper = Raphael(0,0, 1000, 1000);//画布大小
	var head=paper.ellipse(200,200,157,150);//绘制头部，长半径157，短半径150的椭圆
	head.attr({fill:"r(0.75, 0.10)#fff-#0BB0DA"});//渐变填充
	var face=paper.ellipse(200,230,133,101);//绘制脸部，长半径133，短半径101的椭圆
	face.attr({fill:"#fff"});
	var eye=paper.set();//绘制眼睛，长74，宽86，圆角37
	eye.push(
		paper.rect(126,94,74,86,37),
		paper.rect(200,94,74,86,37)
	);
	eye.attr({fill:"#fff"});
	var eye_left=paper.circle(180,160,7);//绘制眼珠，半径为7的圆
	var eye_right=paper.circle(220,160,7);
	eye_left.attr({fill:"#000"});
	eye_right.attr({fill:"#000"});
	eye_left.hover(function(){//经过左眼动画
		eye_left.animate({
		"20%":{cy:120,easing:"<>"},
		"40%":{cy:120,cx:150,easing:"<>"},
		"60%":{cy:160,cx:150,easing:"<>"},
		"80%":{cx:180,easing:"<>"},				
		},2000);
	})
	eye_right.hover(function(){//经过右眼动画
		eye_right.animate({
		"20%":{cy:120,easing:"<>"},
		"40%":{cy:120,cx:250,easing:"<>"},
		"60%":{cy:160,cx:250,easing:"<>"},
		"80%":{cx:220,easing:"<>"},					
		},2000);
	})				
	var nose=paper.circle(200,180,17);//绘制鼻子
	nose.attr({fill:"r(0.75,0.20)#fff-#C93E00"});
	nose.hover(function(){//经过鼻子上下移动
		nose.animate({cy:190},500,"bounce");
	},function(){
		nose.animate({cy:180},500,"bounce");
	})
	nose.click(function(){//点击鼻子胡须变长
		beard.animate({
		"50%":{scale:1.3,easing:"<>"},
		"100%":{scale:1,easing:"<>"},					
		},1000);
	})					
	var nose_line=paper.path("M200,200L200,287");//绘制鼻子下面的直线
	var beard=paper.set();//绘制6条胡须
	beard.push(
		paper.path("M160,200L100,180"),
		paper.path("M160,210L100,210"),
		paper.path("M160,220L100,240"),
		paper.path("M240,200L300,180"),
		paper.path("M240,210L300,210"),
		paper.path("M240,220L300,240")
	);				
	var mouse=paper.path("M100,250 Q200,327 300,250");//绘制嘴巴的曲线
	var hand_left=paper.set();//绘制左手
	hand_left.push(					
		paper.rect(58,340,50,70).rotate(50).attr({fill:"#0BB0DA"}),
		paper.circle(40,410,33).attr({fill:"#fff"})
	);
	var hand_right=paper.set();//绘制右手
	hand_right.push(					
		paper.rect(292,340,50,70).rotate(-50).attr({fill:"#0BB0DA"}),
		paper.circle(360,410,33).attr({fill:"#fff"})
	);
	hand_left.hover(function(){//经过左手左手上抬
		hand_left.animate({rotation:120,cy:350},500,"bounce")					
	},function(){
		hand_left.animate({rotation:50,cy:410},500,"bounce")
	})
	hand_right.hover(function(){//经过右手右手上抬
		hand_right.animate({rotation:-120,cy:350},500,"bounce")
	},function(){
		hand_right.animate({rotation:-50,cy:410},500,"bounce")
	})
	var body=paper.set();//绘制身体，用蓝色填充
	body.push(					
		paper.rect(90,338,220,158),
		paper.rect(89,338,2,62).attr({"stroke":"#0BB0DA"}),//使用两块蓝色的长方形覆盖交叉的直线
		paper.rect(309,338,2,62).attr({"stroke":"#0BB0DA"})
	);					
	body.attr({fill:"#0BB0DA"});
	var body_in=paper.circle(200,390,85);//绘制白色肚子
	body_in.attr({fill:"#fff"});				
	var pocket=paper.set();
	pocket.push(
		paper.circle(200,390,66),//绘制口袋，先画一个圆
		paper.rect(134,296,132,96).attr({fill:"#fff","stroke":"#fff"}),//再用白色的长方形盖住半个圆
		paper.path("M134,392L266,392")//最后画口袋的上边缘直线
	);
	pocket.mouseover(function(){//经过口袋双手摆动
		hand_left.animate({
		"25%":{rotation:120,cy:350,easing:"<>"},
		"50%":{rotation:50,cy:410,easing:"<>"},
		"75%":{rotation:120,cy:350,easing:"<>"},
		"100%":{rotation:50,cy:410,easing:"<>"},					
		},1000);
		hand_right.animate({
		"25%":{rotation:-120,cy:350,easing:"<>"},
		"50%":{rotation:-50,cy:410,easing:"<>"},
		"75%":{rotation:-120,cy:350,easing:"<>"},
		"100%":{rotation:-50,cy:410,easing:"<>"},					
		},1000);
	})
	var belt=paper.rect(82,314,236,24,8);//绘制红色的领带
	belt.attr({fill:"180-#fff-#AE2A00"});

	var bell=paper.set();//绘制铃铛
	bell.push(
		paper.circle(200,345,22).attr({fill:"r(0.85,0.20)#fff-#EDE51E"}),//黄色渐变填充大圆
		paper.circle(200,350,5).attr({fill:"#000"}),//黑色小圆
		paper.path("M180,335L220,335"),//铃铛里的线条
		paper.path("M180,340L220,340"),	
		paper.path("M200,355L200,367")
	);
	bell.hover(function(){//经过铃铛左右摆动
		bell.animate({translation :5},500,"bounce")
	},function(){
		bell.animate({translation :-5},500,"bounce")
	});				
	var foot=paper.set();//绘制两只脚
	foot.push(
		paper.circle(200,495,12),//首先绘制裆部的圆圈
		paper.rect(197,500,6,8).attr({stroke:"#fff"}),//然后绘制白色的长方形挡住半圆
		paper.rect(68,496,130,34,17),//接着绘制两只脚
		paper.rect(202,496,130,34,17)															
	);
	foot.attr({fill:"#fff"});
	foot.hover(function(){//经过脚左右摆动
		foot.animate({translation:10},500,"bounce")
	},function(){
		foot.animate({translation:-10},500,"bounce")
	})								
}

转载于:https://www.cnblogs.com/wenbinzhou/archive/2011/02/05/1949290.html