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();
}

我做了一个小提琴，你可以看到它从下到上（我知道视图很大，它是一个更大的SVG图像的一部分）

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

Answer 1

动画将从行的开头开始，如SVG中所定义。要使它从任意点开始，您必须相应地抵消它。为了得到与你的情况完全相反的情况，这种变化几乎是微不足道的 - 你只是从最后开始并走向开始。也就是说，你＆＃34;反转＆＃34;通过考虑1-t而不是t进行转换：

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

完整演示here。

更改沿路径动画的起点

1 个答案: