D3 补间 - 暂停和恢复控件

Posted 2023-02-22

【中文标题】D3 补间 - 暂停和恢复控件

【英文标题】：D3 tween - pause and resume controls

【发布时间】：2015-04-26 07:20:32

【问题描述】：

我正在尝试编辑此d3 example。

更具体地说，我将尝试应用pause resume guide 的暂停-恢复控件以及我们在视频下的控制栏。最后我想有这样的东西：

如何在开始时应用暂停恢复控件？

【问题讨论】：

你实际尝试过什么代码？您可以编辑您的问题以添加代码 sn-ps。

好的。我会在回家时尝试上传。感谢您的关注。

这是最初的jsfiddle.net/805ewv19/2

【参考方案1】：

这是一个快速实现。暂停实质上取消了当前过渡，并且播放根据暂停的时间/位置恢复它：

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();

例如here。

【讨论】：

这个问题是当你在最后暂停/恢复它时。 t 将大于 1。它会影响动画的速度。而不是t += pauseValues.lastT 尝试类似time = pauseValues.lastT + (1 - pauseValues.lastT) * t 并稍后使用time 变量进行转换