javascript - 拉斐尔在同一组上有多个动画

Question

我异步接收元素的新位置。每次收到位置时，我都会计算偏移量并移动元素(集)，如下所示:

asynchReceiveData(id,function(newposition){
  var offset = {};
  var oldposition = getOldPosition(markerArray[id]); //returns object with old x and y
  offset.x = (newposition.x - oldposition.x);
  offset.y = (newposition.y - oldposition.y);
  markerArray[id].entireSet.stop()
      .animate({ transform:"...T"+offset.x+","+offset.y }, 400);
  //i also tried without .stop()
});

例如:每次更新时，集合应向右移动 50px，经过 10 次缓慢更新(假设每 2 秒更新一次)，集合向右移动 500px，一切正常。

问题是，当我过快地收到太多新职位时:
(例如每 200 毫秒更新一次)，则设置为 300、350、400 或 450，而不是右侧 500px。

我认为问题在于动画在触发新动画之前没有足够的时间完成。我尝试将动画时间从 400 毫秒降低到 200 毫秒，但收效甚微，有时仍然会发生这种情况。

当我不使用动画并执行以下操作时，一切正常:

markerArray[id].entireSet.transform("...T"+offset.x+","+offset.y);

但我想要这个动画。您对如何解决这个问题有什么建议吗？

Answer 1

所以..经过几次尝试我找到了一个解决方案:每个动画结束后，我检查元素的真实位置(使用 getBBox())并将其与预期位置进行比较。如果不同，我会按差异移动元素；在代码中:

asynchReceiveData(id,function(newposition){
   var offset = {};
   var oldposition = getOldPosition(markerArray[id]); //returns object with old x and y
   offset.x = (newposition.x - oldposition.x);
   offset.y = (newposition.y - oldposition.y);
   markerArray[id].entireSet.stop().animate({ transform:"...T"+offset.x+","+offset.y}, 500,
                function () {
                    var o = {};
                     o.x = markerArray[id].x - markerArray[id].circleObj.getBBox().cx;
                     o.y = markerArray[id].y - markerArray[id].circleObj.getBBox().cy;
                    markerArray[id].entireSet.transform("...T"+o.x+","+o.y);
                });

});

有时它不是很顺利(有点滞后)，但无论如何，它解决了问题。