1. 程式人生 > >Raphael.js繪製迴圈動畫

Raphael.js繪製迴圈動畫

今天有人叫我幫看了一個程式;

需要實現的是點選按鈕,橢圓線段的一段移動到另外一端;橢圓所關聯的另一條線段路徑也隨之改變;再次點選按鈕,效果反之;

不多說了兩種程式碼;

第一種是我做的;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphael</title>
<script src="../js/jquery.js"></script>
<script src="../js/raphael.js"></script>
<script>
var paper;
var state = false;
var e;
$(function()
{
	paper = new Raphael("holder",640,480);	
	var path = paper.path("M 10,10 L 10,300");
	var over = paper.path("M 10 10 L 316 248").attr("stroke","red");
	var circle = paper.circle(316, 248, 5).attr({stroke : "none",fill : "red"});
	e = paper.ellipse(10, 10, 7, 3).attr({stroke : "none",fill : "red"});
	e.onAnimation(function() 
	{
		console.log(this)
		var x = this.attr("cx");
		var y = this.attr("cy");
		over.attr({path : "M 316,248L" +x+ "," +y+ "",stroke : "red"});
	});
})
function start()
{
	if(state)
	{
		e.animate({"cx":10,"cy":10},3000);
		state = false;
	}
	else
	{
		e.animate({"cx":10,"cy":300},3000);
		state = true;
	}
}
	  
</script>
</head>
<body>
	<div id="holder"></div>
	<input type="button"  value="click"  onclick="start()" >
</body>
</html>

第二種是他修改的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphael</title>
<script src="../js/raphael.js"></script>
<script>
	Raphael("holder", 640, 480, function() {
		var r = this, p = r.path("M10,10L10,300"), 
		flag = 0, over = r.path().attr({
			stroke : "#fff"
		}), len = p.getTotalLength(), e = r.ellipse(0, 0, 7, 3).attr({
			stroke : "none",
			fill : "red"
		}).onAnimation(function() {
			var t = this.attr("transform");
			over.attr({
				path : "M316,248L" + t[0][1] + "," + t[0][2] + "z",
				stroke : "red"
			});
		});
		r.circle(316, 248, 5).attr({
			stroke : "none",
			fill : "red"
		});
		r.customAttributes.along = function(v) {
			var point = p.getPointAtLength(v * len);
			return {
				transform : "t" + [ point.x, point.y ] + "r" + point.alpha
			};
		};
		e.attr({
			along : 0
		});

		pathButton = r.image("按鈕圖片地址", 510, 288, 50, 43).attr({
			cursor : "pointer",
			title : "xxx"
		}).click(function() {
			if (flag == 0) {
				e.animate({
					along : 1
				}, 2e4, function() {
					e.attr({
						along : 1
					});
				});
				flag = 1;
			} else {
				e.animate({
					along : 0
				}, 2e4, function() {
					e.attr({
						along : 0
					});
				});
				flag = 0;
			}

		});

	});
</script>
</head>
<body>
	<div id="holder"></div>
</body>
</html>

兩種都能實現

效果圖基本如下: