Smooth transition between two states (dynamically generated)

I have a graphic element. Let's give an initial state.

Defining state: a position on the screen and a custom transformation (scale+rotation+skew) given by the coordonates of 3 corners of the image (top-left, top-right and bottom-left).

And on a m开发者_JAVA百科oment in time later the app recieves some input giving a new state. At this moment I need the graphical element to start a transition towards the new state, doing a natural transition (not to appear big distortion in the proportions of the element).

Additionally, if a new state is recieved before the transition is over, it is abandoned and the new transition starts from where it remained.

Any suggestions how cand I achieve this?

iuliux,

The classic implementation to animate a transition in N steps is as follows:

for (i = 0;  i <= N;  ++i) {
  for (p = 0;  p < nPoints;  ++p) {
    pointsToDraw[p] = initialPoints[p] + (finalPoints[p] - initialPoints[p]) * i / N
  }
  drawFigureAt(pointsToDraw);
}

In English:

1. For each point, imagine a line between its initial and final positions.
2. Calculate points along the line that divide it into N segments of equal size.
3. Draw the figure using the first set of points, then the next, etc.

If the figure moves before you've drawn the final state, copy its current position into initialPoints and start the transition again.

Hope that helps!