Question

我希望在5秒内绘制一个形状，就像这样。我用raphael js库。但是如何在动画后绘制线条？（我的意思是绘制移动轨迹）。感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
    var r = Raphael(0, 0, 500, 600);
    var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100").attr({stroke: "none"}),
    e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"})
    e.attr({rx: 5, ry: 5}).animateAlong(p, 5000, true);
}
</script>
</head>
<body>
    <div id="stroke"></div>
</body>
</html>

Answer 1

您可以使用onAnimation动态更新路径。这是一种粗暴的方式

window.onload = function () {
    var r = Raphael(0, 0, 500, 600);
    var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100").attr({stroke: "none"});
    var p2 = r.path("M104 100");
    var e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"});
    e.attr({rx: 5, ry: 5}).animateAlong(p, 5000, true).onAnimation(function() {
        p2.attr("path", p2.attr("path").concat([["L", e.attr("cx"), e.attr("cy")]]));
    });
}

如何在raphael js库动画后绘制线条？

1 个答案: