Raphael 개체가 경로를 따라 올바르게 애니메이션되지 않습니다.

Question

그래서 경로를 그리는 함수가 있습니다. 원형을 올바른 위치 (경로의 첫 번째 지점)에서 시작하는 동안 경로를 따라 애니메이션을 만들려고하면 다른 경로를 따라 원을 애니메이션화하고 싶습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

여기 jsfiddle 또는 내 코드를 볼 수 있습니다 :이 옛날 엉덩이 질문이다하지만 난 당신이 의미 당신의 변환 문자열에서 소문자 "t"를 사용했기 때문에 그것의 추측하고있어

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 반환 절대 좌표? 그렇다면 대문자 "T"를 사용하여 요소를 절대 좌표로 이동해야합니다.