控制d3.js attrTween（）中的“t”参数

我正在开发一个功能，允许自定义过渡到暂停和恢复。我的策略是使用介于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 + ') ';
     }
  }
}

假设在我的第一次转换被中断时，最后知道的值是0.4。当我开始“恢复”转换时，是否有一种方法可以让插值函数获得下一个“t”值，如下所示：

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

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

现在，我的“恢复”转换的插值器再次接收从0.0开始的“t”。即使我重新计算't'相对于上面显示的0.4:t=startPoint+1-startPoint*t，我也没有得到我需要的't'的变化速度。换句话说，即使我的转换在被中断的地方继续，转换的速度也会从慢->快，而不是以之前的速度0.4（最快）加速

请让我知道我错过了什么

谢谢

更新：很抱歉更新太晚，在查看了d3.js源代码之后，正确的做法是自己覆盖't'

使用Date.now在创建时保存每个转换的时间戳 每次使用Date.now调用插值器时，请跟踪您的进度，并用t=easeprogress覆盖“t”

---

你看到了吗？嗨，拉尔斯，谢谢你的推荐。因为我使用的是一个自定义插值器，所以我假设cubic in-out是这里的ease函数。然而，情况似乎并非如此，动画似乎太快了。实际上，线性似乎是正确的。然而，我现在的问题是，当我尝试将“easet”从域[easeepersed，1]映射回范围[0,1]时，我得到了零。换句话说，由于我通过'path.getPointAtLengtht*pathLength'计算下一个位置，所以我的转换将从t为0的最开始开始开始。我一定是遗漏了什么。你有没有试过像示例中那样设置它？您使用的是自定义插值器这一事实并不重要，只要它的行为与提供的一样。是的，我已经用我在那篇文章之后的设置和我遇到的问题更新了上面的问题。对不起，我忘了在这里发表评论：