更改aroundPath动画的起点 [英] Change starting point of alongPath animation

问题描述

我有一个简单的path元素，使用D3.js必须遵循一个圆.我找到了一种通过在SVG上使用getTotalLength和getPointAtLength方法来执行此操作的方法，如本示例中所述:

I have a simple path element that a circle has to follow using D3.js. I found a way to do this through using getTotalLength and getPointAtLength methods on SVG as described in this example:

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

它工作正常，但问题是我的圆圈从底部开始并沿直线向上，我如何更改动画中圆圈的起点，使其从上到下?这是我的代码:

It works fine but the problem is that my circle starts at the bottom and follows the line upwards, how do i change the starting point of the circle in the animation so it goes from top to bottom? Here's my code:

我的路径元素:

<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图像的一部分)

I made a fiddle where u can see it going from bottom to top(i know the viewbox is big, it's part of a much bigger SVG image)

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

推荐答案

动画将在SVG中定义的行的开头开始.要使其从任意点开始，您必须相应地使其偏移.为了与您的情况完全相反，更改几乎是微不足道的-您只是从头开始，然后就开始了.也就是说，您通过考虑使用1-t而不是t来反转"转换:

The animation will start at the start of the line, as defined in the SVG. To make it start at an arbitrary point, you have to offset it accordingly. To get the exact opposite as in your case, the change is almost trivial though -- you just start at the end and move towards the beginning. That is, you "invert" the transition by considering 1-t instead of t:

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

完整演示此处.

这篇关于更改aroundPath动画的起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！