How Do You Combine Scale and Translation Animation

Question

I am attempting to do an UIView animation where my image starts at the top left of the screen and expands to the original size and place in the middle of the screen. So far I have been able to make it do this separately but when I try to combine these animations it will only do the scale animation.

Is there a way I can make this work with Scale and Translation at the same time?

Here is what I have so far:

CGAffineTransform setpointTrans = CGAffineTransformMakeTranslation(-200.0f, -200.0f);
CGAffineTransform setpointScale = CGAffineTransformMakeScale(0.0f, 0.0f);
_RSEImage.transform = CGAffineTransformConcat(setpointTrans, setpointScale);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans  = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans  = CGAffineTransformMakeTranslation(0.0f,0.0f);
_RSEImage.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];

Ok I figured it out, here is what I changed:

_RSEImage.transform = CGAffineTransformMakeScale(0.0f, 0.0f);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans  = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans  = CGAffineTransformMakeTranslation(200.0f,200.0f);
_RSEImage.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];

I tried out your code and it perfectly does what you would like achieve: scale up and translate... What is the origin point of the RESImage before this code? — nzs
x 160 y 242, i guess thats what you are asking, sorry this is my first iphone app. The image size is 161 x 71 — David Roop
It is hard to tell from this code where you have the problem because basically this code snippet is working, this is the way you do affine transformation "merging". So I guess some other part of your code prevents somehow translation, or not visible... Start adding the functions gradually by commenting out things, and check that until that point everything is lookin fine. Eg. check this snippet for the first 3 line with 0.3f scale and -100f translation - you see the img? then add translation alone to test out the params,then merge with scale.. You can use my answer too since blocks are easier. — nzs

nzs nzs · Accepted Answer · 2013-05-22T22:43:01

You can use this, animation blocks, also (from iOS4):

[UIView animateWithDuration: 5
                      delay: 0
                    options: (UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction)
                 animations:^{_RSEImage.center = CGPointMake(300, 300) ; _RSEImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 2.0, 2.0);}
                 completion:^(BOOL finished) { }
 ];

Relevant official doc here: link

Nice tutorial there: link

Hope it helps!

How Do You Combine Scale and Translation Animation

1 Answers