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');
    });
})();

​

Answer 1

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

我已经forked and updated your code让圆形元素按照您想要的方式遵循动画路径。 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');
    });
})();

​

PS。查看更多示例 over here .