Question

firstly thank you for reading my question. I’m current trying to execute multiple animations using CFAffineTransform to replicate the kens burn effect.

Try to achieve: Zoom to to the image, then pan the image to the right.

Problem: Once I start the 2nd animation, my image will be panning relatively to the original image instead of panning relative to the end product of the 1st image. Which is not the effect I’m trying to achieve.

1st animation is to zoom into the image.

[UIView beginAnimations:@"zoomin" context:NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];

CGAffineTransform zoomIn = CGAffineTransformMakeScale(5.8, 5.8);

imageView.transform = zoomIn;

[UIView commitAnimations];

2nd animation is to pan the image to the left.

[UIView beginAnimations:@"panning" context:NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];

CGAffineTransform moveRight = CGAffineTransformMakeTranslation(200, 0);

imageView.transform = moveRight;

[UIView commitAnimations];

2nd animation codes is only called after the first animation ends.

Answer 1

It does not work because you are using CGAffineTransformMakeTranslation, which means that it should start from the original position (affine is identity matrix, and puts the view in the un-transformed state), what you should use is CGAffineTransformTranslate, which takes the desired (or current transform) matrix as the first argument.

So if you do:

CGAffineTransform moveRight = CGAffineTransformTranslate(imageView.transform ,200, 0);

You used

CGAffineTransform moveRight = CGAffineTransformMakeTranslation(200, 0);

which is the same as:

CGAffineTransform moveRight = CGAffineTransformTranslate(CGAffineTransformIdentity ,200, 0);

I suggest you read a great post Demystifying CGAffineTransform