您的位置：首页 > Web前端 > JavaScript

Raphael.js绘制循环动画

2014-12-11 11:58 369 查看

今天有人叫我帮看了一个程序；

需要实现的是点击按钮，椭圆线段的一段移动到另外一端；椭圆所关联的另一条线段路径也随之改变；再次点击按钮，效果反之；

不多说了两种代码；

第一种是我做的；

<!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>

两种都能实现
效果图基本如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航