How to scale and rotate a view in one animation

Question

I'm trying to imagine a view, forcing it to go out of the center of the screen while it grows to its full size, and also rotate it around the X axis in 3D mode. When I create a view, I apply a transformation to it to make sure it is compressed and rotated to begin with (it is so small that it is not actually visible), then I try to use CATransform3D as follows:

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; CATransform3D transform = CATransform3DRotate(view.layer.transform, M_PI, 1.0, 0, 0); transform = CATransform3DScale(transform, 1000, 1000, 1000); transform.m34 = 1.0 / 10000; [anim setToValue:[NSValue valueWithCATransform3D:transform]]; [anim setDuration:0.75f]; anim.removedOnCompletion = NO; anim.delegate = self; [view.layer addAnimation:anim forKey:@"grow"]; 

However, this animation does not change the actual transformation of the layer, so I also do this:

 - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag { view.layer.transform = CATransform3DIdentity; [view.layer removeAllAnimations]; } 

to set the conversion after stopping the animation. However, this sometimes leads to a noticeable flicker at the end of the animation. I believe that this is due to the fact that the animation returns the original transformation at the end of the animation phase, and this happens instantly before the animationDidStop procedure is called. Is there a better way to do this?

Edit: including it in a UIView animation works in such a way that you can directly set the transformation:

 view.layer.transform = CATransform3DScale(CATransform3DIdentity, 0.001, 0.001, 0.001); view.layer.transform = CATransform3DRotate(view.layer.transform, M_PI, 1.0, 0.0, 0.0); [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.75]; [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; CATransform3D transform = CATransform3DRotate(view.layer.transform, M_PI, 1.0, 0, 0); transform = CATransform3DScale(rotationTransform, 1000, 1000, 1000); transform.m34 = 1.0 / -500; view.layer.transform = transform; [UIView commitAnimations]; 

However, I would still like to answer my initial request on how to achieve the same success using CAAnimation, as this provides more flexibility for animations in general.

Edit2: It seems the answer to my original question (how to fix the CAAnimation problem) was actually very simple. To save the final state (and remove the flicker), I just needed to add the following line:

 anim.fillMode = kCAFillModeForwards; 

Answer 1

This may help you:

  animationView.layer.anchorPoint = CGPointMake(0.0f, 0.0f); animationView.center = CGPointMake(0, (animationView.center.y - (animationView.bounds.size.height/2.0f))); // start the Page Open [UIView beginAnimations:@"Animation" context:nil]; [UIView setAnimationDuration:2.0]; // set angle as per requirement [animationView.layer setValue:[NSNumber numberWithInt:180] forKeyPath:@"transform.rotation.x"]; [UIView commitAnimations]; 

Answer 2

I know this is not a clean and short answer, which you probably hoped for :)

But here ( UIView Animation Tutorial: Practical Recipes ) you can find a downloadable example that also shows how to scale and rotate.

You can see the scale and rotate, if you run this example, press HUD, and then click Stop.

Answer 3

Check out this topic on how the iPad app store rotates and zooms for response and code: How can I flip and enlarge the UIView at the same time as the iOS 7 iPad App store?