javascript - 暂停和恢复过渡

Question

我正在使用 setInterval，因此转换会在特定时间间隔后发生。是否可以使用 setInterval 暂停和恢复工作？

任何正确方向的建议/指示都会非常有帮助。

Answer 1

这个问题是在 D3 v3 是可用的最新版本时发布的。 5 年后 D3 v5 有了一些新方法，比如 selection.interrupt() , transition.on("interrupt"...)和 local variables ，这可以使任务更简单、更轻松。

那么，让我们假设一个简单的 cx 圆上的过渡:

const svg = d3.select("svg");
const circle = svg.append("circle")
  .attr("r", 15)
  .attr("cx", 20)
  .attr("cy", 50)
  .style("fill", "teal")
  .style("stroke", "black");
circle.transition()
  .duration(10000)
  .ease(d3.easeLinear)
  .attr("cx", 580);

svg {
  background-color: wheat;
  display: block;
};

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="600" height="100"></svg>

这个想法是在例如按下按钮时中断转换:

selection.interrupt();

然后，使用局部变量，使用 interrupt 的监听器来获取当前位置:

.on("interrupt", function() {
    local.set(this, +d3.select(this).attr("cx"))
}); 

最后，当再次按下按钮时，我们使用 local.get(this) 和一个简单的数学运算来获取剩余的 duration。

还值得一提的是，这适用于线性缓动；如果您有另一种缓动，例如默认的 d3.easeCubic，您将需要更复杂的代码。

这是演示:

const svg = d3.select("svg");
const local = d3.local();
const button = d3.select("button");
const circle = svg.append("circle")
  .attr("r", 15)
  .attr("cx", 20)
  .attr("cy", 50)
  .style("fill", "teal")
  .style("stroke", "black");
circle.transition()
  .duration(10000)
  .ease(d3.easeLinear)
  .attr("cx", 580)
  .on("interrupt", function() {
    local.set(this, +d3.select(this).attr("cx"))
  });
button.on("click", function() {
  if (d3.active(circle.node())) {
    circle.interrupt();
    this.textContent = "Resume";
  } else {
    circle.transition()
      .ease(d3.easeLinear)
      .duration(function() {
        return 10000 * (560 - local.get(this)) / 560;
      })
      .attr("cx", 580)
    this.textContent = "Stop";
  }
})

svg {
  background-color: wheat;
  display: block;
};

<script src="https://d3js.org/d3.v5.min.js"></script>
<button>Stop</button>
<svg width="600" height="100"></svg>