CODEWITHSUNDEEP
javascriptanimationraphaeltransformation
user1762087
user1762087

Reputation: 460

raphael multiple animations on same set

I asynchronously receive new positions of element. Each time I receive the position I calculate the offset and move the element (set), like this: 

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()
});

For example: with each update the set should move 50px to the right, after 10 slow updates (lets say one update per 2 seconds), the set is 500px to the right, everything is OK.

Problem is, when I receive too many new positions too fast:
(e.g. one update per 200ms),then the set is 300, or 350 or 400 or 450 instead of 500px to the right.

I think the problem is that the animation does not have enough time to finish before new animation is triggered. I tried lowering the animation time from 400ms to 200, but with little success, it still sometimes happened.

Everything works fine, when I do not use animation and do just this:

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

But I would like to have this animations. Do you have any suggestion how to fix this?

Upvotes: 0

Views: 168

Answers (1)

user1762087
user1762087

Reputation: 460

So.. after few tries I came to a solution: After the end of every animation I check the real position of element (with getBBox()) and compare it with expected position. If it differs I move the element by the difference; In code:

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);
                });

});

Sometimes it's not very smooth (a bit laggy), but anyway, it solves the problem.

Upvotes: 1

Related Questions