javascript - 如何使对象跟随路径的动画

Question

我设置了一个jsFiddle来说明我的问题。

我希望红色圆圈在动画期间保持在路径上。有没有“简单”的方法来做到这一点？

var r = Raphael(0, 0, "100%", "100%");

(function () {
    var el = r.path("M0 100L200 100").attr({fill: "none"}),
        elattrs = [{path: "M0 100L200 100"}, {path: "M0 100S100 150 200 100"}],
        now = 1;
    var set = r.set();
    set.push(
        el,
        r.circle(100, 100, 5).attr({fill: 'red'}),
        r.circle(50, 100, 5).attr({fill: 'red'}),
        r.circle(150, 100, 5).attr({fill: 'red'})
    );

    r.circle(40, 40, 20).attr({fill: 'blue'}).click(function () {
        el.stop().animate(elattrs[+(now = !now)], 1000, 'elastic');
    });
})();

​</p>

Answer 1

有一个很好的方法Element.getPointAtLength可用于此目的。

我已经分叉并更新了您的代码，让圆形元素按照您的意愿跟随动画路径。Stackoverflow 强迫我在这里粘贴代码，所以这里是：

var r = Raphael(0, 0, "100%", "100%");

(function () {
    var paths = ["M0 100 L200 100",
                 "M0 100 S100 150 200 100"];
    var line = r.path(paths[0]).attr({fill: "none"}),
        elattrs = [{path: paths[0]}, {path: paths[1]}],
        now = 1;
    var guide = r.path(paths[1]).attr({stroke : "none"});
    var c1 = r.circle(50, 100, 5).attr({fill: 'red'}),
        c2 = r.circle(100, 100, 5).attr({fill: 'red'}),
        c3 = r.circle(150, 100, 5).attr({fill: 'red'});

    r.circle(40, 40, 20).attr({fill: 'blue'}).click(function () {
        now = now ? 0 : 1;
        line.stop().animate(elattrs[now], 1000, 'elastic');
        c1.stop().animate({cy : (now ? guide.getPointAtLength(50).y  : 100)}, 1000, 'elastic');
        c2.stop().animate({cy : (now ? guide.getPointAtLength(100).y : 100)}, 1000, 'elastic');
        c3.stop().animate({cy : (now ? guide.getPointAtLength(150).y : 100)}, 1000, 'elastic');
    });
})();

​</h2>

PS。在此处查看更多示例。