Question

我正在开发一项允许自定义转换暂停和恢复的功能。我的策略是使用过去的＆＃39;值（在0和1之间）并在那恢复。

// start transition
 startPoint = 0;
 element.transition()
       .duration(duration)
       .attrTween('transform', customTween(waypoints.node(), element, startPoint))

// pause transition
 book.transition().duration(0);

// resume 
  startPoint = element.elapsed;
  duration = duration * (1 - element.elapsed);
  book.transition()
      .duration(duration)
      .attrTween('transform', customTween(waypoints.node(), element, startPoint))

// tween 
var customTween(path, element, startPoint) {
  return function() {
     return function(t) { // <- ** custom interpolator**
       var p;

       t = startPoint + (1 - startPoint) * t; // compute t relative to last-pause value
       element.elapsed = t;                   // regularly save elapsed value for next pause

       p = path.getPointAtLength(t * path.getTotalLength());

       return 'translate(' + p.x + ',' + p.y + ') ';
     }
  }
}

我遇到的问题是我无法控制传递给自定义插补器的't'元素。根据我的发现，对于每次创建的转换，值't'是一系列从0到1的值，如下所示：

start -> slow -> faster -> fastest -> slowing down -> slow-> stop
0.0 , 0.01, 0.05, 0.1, 0.2, 0.4, 0.6, 0.8, 0.9, 0.95, 0.99, 1.0

让我们说，当我的第一次转换被中断时，最后的已知值是0.4。当我开始恢复＆＃39;转换，有没有一种方法，我的插补器功能可以得到下一个't's这样：

fastest -> slowing down -> slow-> stop
0.4, 0.6, 0.8, 0.9, 0.95, 0.99, 1.0

现在，我的简历＆＃39;转换的插值器再次从0.0开始接收't'。即使我相对于't'重新计算0.4（如上所示：t = startPoint + (1 - startPoint) * t），我也无法获得所需的速度（'t'的变化率）。换句话说，即使我的转换恢复到被中断的地方，转换的速度也会从慢 - >更快，而不是以之前的速度（最快0.4）。

请让我知道我错过了什么。

谢谢，

更新：对于后期更新感到抱歉，在看了d3.js源代码之后，正确的做法是覆盖＆＃39; t＆＃39;自己

使用Date.now()
每次使用Date.now()调用插补器时都会跟踪您的进度，并覆盖＆＃39; t = ease(progress)

控制＆＃34; t＆＃34; d3.js中的param attrTween（）

0 个答案: