CODEWITHSUNDEEP
objective-ciosanimationrotationtranslation
headkit
headkit

Reputation: 3327

Animate Rotation/Scale/Translate of UIImage at the same time

I am new to objective-c and I want to add an image to the screen, tweening it like in AS3, moving it from one end to the other of the screen while rotating around its own center point.

I tried with

[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            // TRANSFORM SCREENSHOT
            screenShotView.transform = CGAffineTransformRotate(screenShotView.transform, -M_PI * 0.05);
            screenShotView.transform = CGAffineTransformScale(screenShotView.transform, 0.6, 0.6);
            screenShotView.transform = CGAffineTransformTranslate(screenShotView.transform, 
                                                                  self.webView.frame.origin.x,
                                                                  self.webView.frame.origin.y - self.webView.frame.size.height * 0.3
                                        );

but with this code the image rotates around the center of the TransformIdentity. So while rotating and moving the rotation gets out of controll and the image isn't exactly at the position I loved it to be.

What is the right way to rotate and translate at the same time, translating the rotation center with the image?

and at least after transformation I want to add a close button to the right upper corner of the image. for that I need the new coordinates of the corner, too.

thnx!

Upvotes: 9

Views: 20948

Answers (2)

Ronny Webers
Ronny Webers

Reputation: 5244

IOS 7's preferred way to do this would be using a block object. It has several advantages compared to the 'older' way of animating. Especially that it can make use of multi-core and video co-processing. Also the 'built-in' call back part (the completion part) is very useful, as it keeps any necessary state information and links to objects as needed.

CGAffineTransform translate = CGAffineTransformMakeTranslation(self.webView.frame.origin.x,self.webView.frame.origin.y - self.webView.frame.size.height * 0.25);
CGAffineTransform scale = CGAffineTransformMakeScale(0.6, 0.6);
CGAffineTransform transform =  CGAffineTransformConcat(translate, scale);
transform = CGAffineTransformRotate(transform, degreesToRadians(-10));

// animation using block code
[UIView animateWithDuration:2.0
                      delay:0.0
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:^{
                     screenShotView.transform = transform;
                 }completion:^(BOOL finished){
                     // do something if needed
                 }];

Upvotes: 7

headkit
headkit

Reputation: 3327

I now ended with the following code, but I still don't know if this is the state of the art solution.

CGAffineTransform translate = CGAffineTransformMakeTranslation(self.webView.frame.origin.x,self.webView.frame.origin.y - self.webView.frame.size.height * 0.25);
CGAffineTransform scale = CGAffineTransformMakeScale(0.6, 0.6);
CGAffineTransform transform =  CGAffineTransformConcat(translate, scale);
transform = CGAffineTransformRotate(transform, degreesToRadians(-10));

[UIView beginAnimations:@"MoveAndRotateAnimation" context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 
    [UIView setAnimationDuration:2.0];

    screenShotView.transform = transform;

[UIView commitAnimations];

Upvotes: 16

Related Questions