沿着路徑動畫改變起點

我有一個簡單的路徑元素，圓圈必須遵循使用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/

來源

2014-11-04 Dries Crauwels

動畫將按照SVG中的定義從行的開頭開始。爲了使它在任意點開始，你必須相應地抵消它。爲了得到與你的情況完全相反的結果，這種改變幾乎是微不足道的 - 你只是從最後開始，然後開始。也就是說，你考慮1-t，而不是t 「反轉」的轉變：

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

完成演示here。

來源

2014-11-04 20:19:24

我知道這只是顛倒了一些東西，只是無法弄清楚每個函數的參數是什麼。非常感謝！ – 2014-11-05 00:07:49

沿着路徑動畫改變起點

回答

相關問題