Question

我正在尝试使用d3js为一团圆圈制作动画。我想得到的是一个随机平滑的永久运动，其中所有的圆圈都“吸引”在他们的初始位置周围。

到目前为止，我得到了这个： http://jsfiddle.net/vnr1f9f8/6/

这里的问题是动作根本不平滑。然后圆圈移动然后停止并重新开始。

我该如何解决这个问题？

这是我使用的d3代码：

    var svg = d3.select('body').append('svg')
            .attr("width", 960)
            .attr("height", 480);

var circleContainer = [];

for (var i = 0; i < 10; i++) {
    var originX = 100 * (1 + 2.5 * Math.random()),
        originY = 80 * (1 + 2.5 * Math.random());

    circleContainer[i] = svg.append('circle')
            .attr('class', 'circle-' + i)
            .attr('cx', originX)
            .attr('cy', originY)
            .attr('originX', originX)
            .attr('originY', originY)
            .attr('r', 20)
            .attr('fill','red');
}


transition();

function transition() {
    for (var i = 0; i < 10; i++) {
        circleContainer[i].transition()
            .duration(1000)
            .attr('cx',  circleContainer[i].attr('originX') * (1 + Math.random()/10))
            .attr('cy',  circleContainer[i].attr('originY') * (1 + Math.random()/10))
            .each("end", transition)
            .ease("linear");
    }
}

Answer 1

您可以添加.ease("linear")以使其流畅。这是jsfiddle - http://jsfiddle.net/cuckovic/vnr1f9f8/3/

d3js - SVG以平滑的永动方式旋转

1 个答案: