Strange result using CGAffineTransform

Question

I am attempting to string animations together using several CGAffineTransforms and CGAffineTransformConcats. The overall goal I'm attempting to achieve is to make my image rotate 45 degrees while moving up 50 px then rotate another 45 degrees on its way back down.

 CGAffineTransform translateUp = CGAffineTransformMakeTranslation(0, -50);
    CGAffineTransform firstSpin = CGAffineTransformMakeRotation(M_PI_4);
    CGAffineTransform translateDown = CGAffineTransformMakeTranslation(0, 50);
    CGAffineTransform secondSpin = CGAffineTransformMakeRotation(M_PI_4);
    CGAffineTransform transform1 =  CGAffineTransformConcat(translateUp, firstSpin);
    CGAffineTransform transform2 =  CGAffineTransformConcat(translateDown, secondSpin);
    CGAffineTransform transformFull =  CGAffineTransformConcat(transform1, transform2);    
    [UIView beginAnimations:@"MoveAndRotate" context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 
    [UIView setAnimationDuration:0.5];
    mainCharacterImage.transform = transformFull;
    [UIView commitAnimations];

Now mind you I am pretty new to everything CG related, but I don't understand why this doesn't work.

However I don't consider to be the fact that this isn't working to be the strange part, my question mainly is, can anyone explain to me why the above code causes my image to not only move up and rotate, but to move roughly 100 pixels to the right?

Any suggestions are very much appreciated!

Answer 1

Because transformFull is the result of matrix multiplication of ((translateUp*firstSpin)*(translateDown*secondSpin)). Your animation goes directly from the start point to the result of calculating this matrix multiplication, which happens to be:

0, 1, 0
-1, 0, 0
50 - 25 * sqrt(2), 25 * sqrt(2), 1

This transformation matrix just happens to move the item about 100 pixels to the right.

A transformation matrix has no history. It can't tell what steps got it to that value and move through those steps. Instead you have to deliberately move to each step. Try to do this animation in two stages. Move the mainCharacterImage to transform1. Then move to a new transformation that is just a rotation of π/2.