使用Raphael 绘制图形时，可以绘制一个圆点沿着指定线条路径进行移动，可以使用Raphael 的 Paper.customAttributes增加处理方法和animation进行动画定义。
只需要指定正确的raphael.js路径，以下代码就可以运行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël Animation·</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="raphael.js"></script>
</head>
<body>
<div id="wfpannel" style="background-color: #f0f0f0;"></div>
<script>
(function(){
var R;
this.R = Raphael("wfpannel", 2200, 1200);
this.R.customAttributes.AlongPath = function (v) {
return v;
};
this.R.customAttributes.along = function (v) {
var len = this.attr("AlongPath").getTotalLength();
var point = this.attr("AlongPath").getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
var ms = 5000;
var anim = Raphael.animation({ along: 1 }, ms);
var lines = [];
var line1 = this.R.path("M20 50L1200 50 ").attr("stroke-width", 1.5).attr("stroke", "#7d7d7d");
var line2 = this.R.path("M20 100L1200 100 ").attr("stroke-width", 1.5).attr("stroke", "#7d7d7d");
var line3 = this.R.path("M20 150L1200 150 ").attr("stroke-width", 1.5).attr("stroke", "#7d7d7d");
var line4 = this.R.path("M20 200L1200 200 ").attr("stroke-width", 1.5).attr("stroke", "#7d7d7d");
var line5 = this.R.path("M20 250L1200 250 C650 450L850,450").attr("stroke-width", 1.5).attr("stroke", "#7d7d7d");
lines.push(line1);
lines.push(line2);
lines.push(line3);
lines.push(line4);
lines.push(line5);
for (var i = 0; i < lines.length; i++) {
var myCircle = this.R.circle(0, 0, 4)
.attr("fill", "#FF0000")
.attr("stroke", "#FF0000");
myCircle.attr({ along: 0, AlongPath: lines[i] });
myCircle.animate(anim.repeat("Infinity"));
}
})();
</script>
</body>
</html>
转载请注明出处，谢谢。
标签：沿线,Rapha,attr,M20,lines,stroke,Animation,var,path From： https://www.cnblogs.com/smallangle/p/17273868.html