javascript - 如何检测当前元素的位置并取消 d3.js 中的动画？

Question

我有一个使用 jQuery 的网络应用程序我正在更新它以使用 d3.js反而。这是一款游戏，其中有一 block 动画 block 从屏幕顶部掉落，直到它撞到“地板”或其他物体上。

我能够创建动画，使元素像这样从屏幕顶部到底部以线性形式落下 (mcve):

var wh = window.innerHeight - 40;

d3.select("#tile")
  .transition()
  .duration(2000)
  .style("top", wh + "px")
  .ease("linear");

#tile {
  width:40px;
  height:40px;
  position:absolute;
  top:0px;
  left:0px;
  background:#336699;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="tile"></div>

如果路上没有任何物体，这就可以正常工作，但如果有，我发现两个问题:

• 对于 jQuery，我使用 animate()使用 step 方法，这样我就可以获得元素的当前位置，并通过这种方式检测与其他元素的碰撞。 对于 d3.js 中的 transition() 是否有任何等效于 step() 的东西？

• 一旦检测到碰撞，如何取消动画以使元素停止移动？(类似于 jQuery 中的 stop())。

在网上做了一些研究，我发现我可以创建一个持续时间为 0 的空过渡，这可以回答第二点，但我想知道是否有更直接的方法。

Answer 1

如果您编写自己的tween 函数，您可以完全控制过渡。在每次迭代中，您都可以检查碰撞并在必要时取消。

var wh = window.innerHeight - 40;

d3.select("#tile")
  .transition()
  .duration(2000)
  .ease("linear")
  .tween("fall", function() {
    var i = d3.interpolateNumber(0, wh);
    var self = d3.select(this);
    return function(t) {
      var isCollision = (t > 0.5); // some condition to cancel
      if (isCollision) {
        self.transition(); // cancel transition
      } else {
        self.style("top", i(t) + "px");  // continue falling
      }
    };
});

#tile {
  width:40px;
  height:40px;
  position:absolute;
  top:0px;
  left:0px;
  background:#336699;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="tile"></div>