Forums

Hello,

Suppose I have an array of positions like this:

positions = [
{
points : { to : [200,50] },
},
{
points : { to : [500,50] },
},
{
points : { to : [800,100] }
},
];

And I have a set of three animations, which each start at one of the positions described in the array, but can cycle to any other point.

So, for example, I want my code to make it possible for the three elements to "rotate" between locations until the element that started at position 0 ends up at position 2, 2 at 1, and 1 at 0. But I don't want the element to just move from position 0 to 2, I want it to hit position 1 along the way.

Currently my code has each element take the points property from index i+1 (where i is it's starting index), animate, then repeat until i is the desired value. What I'm finding is that, for example, the element at index 0 is set to the coordinates for index 1 and begins animating, and is still animating when the coordinates for index 2 are applied and animate() is run again, which seems to make the second animate() do nothing.

Assuming I'm understanding that right, I thought I could deal with this by adding a "while (this.isAnimating());" at the top of the loop, but that just chokes the browser.

If anyone has suggestions for how I can cause animate() calls to wait for any currently executing calls are happening before attempting to trigger, that would be great, or clarification if I'm just missing something here, that would be great.

Thanks for any help people can offer