D3补间-暂停和继续控件 [英] D3 tween - pause and resume controls

问题描述

我正在尝试编辑 d3示例.

更具体地说，我将尝试应用暂停简历指南的暂停恢复控件.另外还有一个类似视频的控制栏.最后，我想像这样:

More specifically, I will try to apply the pause-resume controls of a pause resume guide in addition with a control bar like this we have under videos. At the end I imagine to have something like this:

如何在开始时应用暂停恢复控制?

How can apply the pause resume control in the beginning?

推荐答案

这是一个快速实现.暂停实际上会取消当前的转场，并且播放会根据暂停的时间/位置继续播放:

Here's a quick implementation. The pause essentially cancels the current transition and the play resumes it based on time/position it was paused:

var pauseValues = {
  lastT: 0,
  currentT: 0
};
function transition() {
  circle.transition()
      .duration(duration - (duration * pauseValues.lastT)) // take into account any pause
      .attrTween("transform", translateAlong(path.node()))
      .each("end", function(){
        pauseValues = {
          lastT: 0,
          currentT: 0
        };
        transition()
      });
}
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      t += pauseValues.lastT; // was it previously paused?
      var p = path.getPointAtLength(t * l);
      pauseValues.currentT = t; // just in case they pause it
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}
d3.select('button').on('click',function(d,i){
  var self = d3.select(this);
  if (self.text() == "Pause"){
    self.text('Play');
    circle.transition()
      .duration(0);
    setTimeout(function(){
      pauseValues.lastT = pauseValues.currentT; // give it a bit to stop the transition
    }, 100);
  }else{
    self.text('Pause');
    transition();
  }
});
transition();

示例此处.

这篇关于D3补间-暂停和继续控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！