526互联

Raphaël 使用 Animation 绘制沿线条移动的圆

发布时间 2023-03-30 18:05:25作者: 小Angel

使用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>

 

转载请注明出处，谢谢。