沿着路径动画改变起点

Question

我有一个简单的路径元素，圆圈必须遵循使用D3.js.我发现了一个办法做到这一点，通过使用如本例中所述的SVG getTotalLength和getPointAtLength方法：

http://bl.ocks.org/mbostock/1705868

它工作正常，但问题是，我的圈子里开始底部向上如下行，我如何在动画中更改圆圈的起点，以便它从上到下？这里是我的代码：

我的路径元素：

<path id="testpath" style="fill:none;stroke:#FFFFFF;stroke-width:0.75;" d="M1312.193,1035.872l80.324-174.458l13.909-264.839l507.09-211.095 
     l8.667-248.405" /> 

的D3代码：

function followPath() 
    { 


    var circle = d3.select("svg").append("circle") 
            .attr("r", 6.5) 
            .attr("transform", "translate(0,0)") 
            .attr("class","circle"); 

    var path = d3.select("#testpath"); 

    function transition() 
    { 
     circle.transition() 
      .duration(10000) 
      .attrTween("transform", translateAlong(path.node())) 
      .each("end", transition); 
    } 

    function translateAlong(path) 
    { 
     var l = path.getTotalLength(); 
     return function (d, i, a) { 
      return function (t) { 
       var p = path.getPointAtLength(t * l); 
       return "translate(" + p.x + "," + p.y + ")"; 
      }; 
     }; 
    } 

    transition(); 
} 

我做了一个小提琴其中u可以看到它从底部到顶部（我知道视框大，这是一个更大的SVG图像的一部分）

http://jsfiddle.net/6286X/3/

Answer 1

动画将按照SVG中的定义从行的开头开始。为了使它在任意点开始，你必须相应地抵消它。为了得到与你的情况完全相反的结果，这种改变几乎是微不足道的 - 你只是从最后开始，然后开始。也就是说，你考虑1-t，而不是t “反转” 的转变：

return function (t) { 
    var p = path.getPointAtLength((1-t) * l); 
    return "translate(" + p.x + "," + p.y + ")"; 
}; 

完成演示here。