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>