Question

我异步接收元素的新位置。每次收到位置时，我都会计算偏移并移动元素（set），如下所示：

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，一切正常。

问题是，当我收到太多新职位时太快：
（例如，每200ms一次更新），然后该集合为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);
                });

}）;

有时它不是很平滑（有点滞后），但无论如何，它解决了这个问题。

同一组上的raphael多个动画

1 个答案: