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

发布于 2024-10-08 13:47:35 字数 847 浏览 0 评论 0原文

我想在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>

原文

I want to draw a shape during 5 seconds, like this. I use raphael js library. But how to draw the line after animation? (I mean draw the moving trajectory). Thanks.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我喜欢麦丽素 2024-10-15 13:47:35

您可以使用 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")]]));
    });
}

You could use onAnimation to update a path dynamically. Here's a crude way

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")]]));
    });
}

回复收藏 0 原文

~没有更多了~