Animate/Interpolate and wait for completion.

Question

I'm implementing a blackjack game in flash and so far the logic is fine but there is no animation for the cards so they just appear and disappear which doesn't look very pleasing to the eye. I want to add some animations for when cards are dealt where they slide across to their position one by one.

Is there a simple way to just tell a displayobject to interpolate from one position to another while waiting for it to complete?

My current thought would be to just do something like this:

on enter frame:
   if a card is animating:
      move it further towards its destination;
      continue;
   else (if it is done animating):
      process as usual;
   end;
end;

I believe this would produce the results I'd expect because the game should only continue after the card being dealt is where it should be. However, this feels like a weird approach and I'm probably over thinking it which is why I'd like to know if any of you have a better solution.

Answer 1

You are wanting to "lerp" between two Vectors, although I cannot tell you how to do it in AS3. The position will be based on a start-point, an end-point, and a % between the two. The % is usually a value of accumulatedAnimationTime divided by totalAnimationTime.

You could also use a multiple of the % to spin the cards as they move into place, etc.

(in degrees) rotation = lerp(0, 1440, percent) //spins card 4 times while landing

currentPosition = lerp(start, end, percent) == (start + (percent * (end - start)))

The Bezier formula is only slightly more complex; worth a Google.

Edit: The Bezier in my image is cubic, except that the two intermediate points are coincidental. Using only 3 positions, you can reduce it to the quadratic Bezier formula.

float3 QuadraticBasis(float t)
{
    float invT = 1.0f - t;
    return float3(invT * invT, 2.0f * t * invT, t * t);
}
float3 QuadraticBezier(float3 input[3], float percent)
{
    float3 basis = QuadraticBasis(percent);
    return (input[0] * basis.x + input[1] * basis.y + input[2] * basis.z);
}

For a visual explanation, refer to the animations about 2/3 of the way down the Bezier wiki

Answer 2

While it's certainly possible to implement the animation yourself (see Jon's answer), I'd suggest to use a tweening library for that.

There are lots of AS3 tweening libraries available. Personally I used the GreenSock Tweening library a lot. Several AS3 game frameworks (such as Starling or Flashpunk) already have tweening implemented.