Question

如何在同一组上进行并发动画？

例如，我有一个包含大量矩形的组，并且有一个动画可以选择该组并为其设置动画。但我也有一个按钮，可以选择相同的矩形组并为矩形设置动画。我的问题是，当第一个动画发生时，我按下按钮仍然在运行时，按钮组动画取消了上一个动画，前一个动画没有完全执行。

    //Contains lots of rects
    var group = canvas.append("g") 
    //Animation 1 - slowly changes rects width to be wider
    group.selectAll("rect").transition().duration(2000).attr(width, 5000);
    //Animation 2 - slowly changes colour of rect to blue
    //Happens on button click
    group.selectAll("rect").transition().duration(2000).style("fill","blue")

有没有办法让两个动画同时发生，以便第二个动画不会停止第一个动画？

Answer 1

一种可能的解决方案是为'rect'的宽度设置动画，然后在按钮点击时为'g'的填充设置动画。

d3.selectAll("rect").transition().duration(2000).attr("width", 5000);

d3.select("button").on("click", function() { 
        d3.select("g").transition().duration(2000).style("fill", "blue");
});

View example on jsfiddle

d3如何做并发动画？

1 个答案: