Объект Raphael не будет анимировать вдоль пути правильно

Question

Итак, у меня есть функция, которая рисует дорожки. Я хотел бы анимировать некоторые круги по этим различным путям, в то время как круги начинаются в правильном месте (в первой точке пути), когда я пытаюсь оживить их по пути, они сходят с ума. Что я делаю не так?

вы можете увидеть мой код на jsfiddle или здесь:

function commerce() { 
    Raphael("commercebounce", function() { 
     var r = this; 
     function pathfade() { 
     var a = .1, 
      b = .4, 
      c = [0, 2], 
      d = [50, 300], 
      e = [150, 800], 
      fz = [150, 350], 
      g = d[0] + Math.random() * (d[1] - d[0]), 
      h = e[0] + Math.random() * (e[1] - e[0]), 
      i = fz[0] + Math.random() * (fz[1] - fz[0]), 
      colours = ["215,10,45", "115,115,115"], 
      stroke = ["", "- "]; 
      opacity = a + Math.random() * (b - a), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = c[Math.round(Math.random())]; 
      j = r.path("M 0 " + g + " C 0 " + g + " " + (h - 100) + " " + g + " " + h + " 400 M " + h + " 400 C " + h + " 400 " + (h + 100) + " " + g + " 960 " + i).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"stroke-opacity": .1}); 
      return j 
      } 
     ja = pathfade(); 
     jb = pathfade(); 
     jc = pathfade(); 
     jd = pathfade(); 
     je = pathfade(); 
     jf = pathfade(); 
     jg = pathfade(); 
     jh = pathfade(); 
     ji = pathfade(); 
     jj = pathfade(); 
     function bowlball(x) { 
      leng = x.getTotalLength(), 
      a = .1, 
      b = .4, 
      c = [0, 2], 
      opacity = a + Math.random() * (b - a), 
      strokeW = c[Math.round(Math.random())], 
      colours = ["215,10,45", "115,115,115"], 
      colour = "rgb(" + colours[Math.round(Math.random())] + ")"; 
      h = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() { 
      var t01 = this.attr("transform")}) 
      r.customAttributes.along1 = function (v) { 
       var point = x.getPointAtLength(v * leng); 
       return { 
        transform: "t01" + [point.x, point.y] + "r" + point.alpha 
        } 
      }; 
      return h.attr({along1:0}), h;   
     } 
     ha = bowlball(ja); 
     hb = bowlball(jb); 
     hc = bowlball(jc); 
     hd = bowlball(jd); 
     he = bowlball(je); 
     hf = bowlball(jf); 
     hg = bowlball(jg); 
     hh = bowlball(jh); 
     hi = bowlball(ji); 
     hj = bowlball(jj); 
     ha.animate({along1:.02},5000); //animation fail 
    }); 
}; 

Answer 1

это старый осел вопрос, но я предполагаю, что это потому, что вы использовали строчные буквы «т» в вашем преобразовании строки, что означает его относительное преобразование. Но не возвращает ли getPointAtLength абсолютные координаты? Если это так, вы должны использовать прописные буквы «Т», чтобы переместить элемент в эти абсолютные координаты.