Как нарисовать линию после анимации библиотеки Raphael JS? - PullRequest
Новая
       3

Как нарисовать линию после анимации библиотеки Raphael JS?

0 голосов
/ 23 декабря 2010

Я хочу нарисовать фигуру в течение 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>

1 Ответ

0 голосов
/ 28 декабря 2010

Вы можете использовать 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")]]));
    });
}
...