Animation between two view states, using custom animation

Question

I would like to animate between two states of representation. Say, for example, I have a view with a label, and when I change the text of the label, the animation displays this change as paging.

Now you can do this with [UIView setAnimationTransition:forView:cache:] :

 - (IBAction)nextPage { [UIView beginAnimation:nil context:nil]; [UIView setAnimationDuration:1]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:pageView cache:NO]; label.text = @"page 2"; [UIView commitAnimations]; } - (IBAction)previousPage { [UIView beginAnimation:nil context:nil]; [UIView setAnimationDuration:1]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:pageView cache:NO]; label.text = @"page 1"; [UIView commitAnimations]; } 

... but then you can’t use your own animations, you stick to the built-in animations (they are good, but they do not fit my needs).

So another option is to add CAAnimation to the view layer:

 - (IBAction)nextPage { CAAnimation *animation = [self animationWithDuration:1 forward:NO]; [pageView.layer addAnimation:animation forKey:@"pageTransition"]; label.text = @"page 2"; } - (IBAction)previousPage { CAAnimation *animation = [self animationWithDuration:1 forward:YES]; [pageView.layer addAnimation:animation forKey:@"pageTransition"]; label.text = @"page 1"; } 

You can then install any Core Animation you can make. This works well if I define a CATransition animation, for example a kCATransitionReveal : in the page 1 view, a view appears in the page 2 state when it slips out.

 - (CAAnimation *)animationWithDuration:(float)duration forward:(BOOL)forward { CATransition *animation = [CATransition animation]; [animation setType:kCATransitionReveal]; [animation setSubtype:forward?kCATransitionFromLeft:kCATransitionFromRight]; [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; animation.duration = duration; return animation; } 

But when I define an animation as, for example, CABasicAnimation , only one view state is visible.

 - (CAAnimation *)animationWithDuration:(float)duration forward:(BOOL)forward { CATransform3D transform = CATransform3DIdentity; transform.m34 = 1.0 / -1000; transform = CATransform3DRotate(transform, M_PI, 0.0f, 1.0f, 0.0f); CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"]; if(forward) { animation.fromValue = [NSValue valueWithCATransform3D:transform]; } else { animation.toValue = [NSValue valueWithCATransform3D:transform]; } animation.duration = duration; return animation; } 

Instead, I would like the view in the "page 1" state to remain visible until the end of the animation, while the view in the "page 2" state falls into the frame, just like it behaves with the transition animation.

Of course, I could always combine with the duplication of the view and have one sister view, while I animate the very front one and remove it from the supervisor upon completion ... but there should be a much more direct way to achieve this rather simple animation effect without messing with the views .

Probably something to say to the layer, but then I don’t know what, and that where I need your help guys :)

Thanks!

Answer 1

I recently made a custom slide transition between subviews in a controller. My approach was to capture a bitmap of the view and view, add them to the view and animate that view. In the end, you can simply remove the transition view and show the login window. Here's a snippet of the transition method:

 -(void) transitionToView:(UIView *)viewIn lastView:(UIView *)viewOut slideRight:(BOOL)isRight { UIGraphicsBeginImageContext(viewOut.frame.size); UIImageView *bitmapOut = [[UIImageView alloc] initWithFrame: viewOut.frame]; [viewOut.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *viewOutImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); bitmapOut.image = viewOutImage; UIImageView *bitmapIn = [[UIImageView alloc] initWithFrame: viewIn.frame ]; bitmapIn.frame = CGRectMake(isRight ? 320 : -320, bitmapIn.frame.origin.y, bitmapIn.frame.size.width, bitmapIn.frame.size.height); UIGraphicsBeginImageContext(viewIn.frame.size); [viewIn.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *viewInImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); bitmapIn.image = viewInImage; [self.view addSubview:transitionContainer]; [transitionContainer addSubview:bitmapIn]; [transitionContainer addSubview:bitmapOut]; [self removeAllViews]; [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:0.5f]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector:@selector(swapViewsAtEndOfTransition:)]; transitionContainer.frame = CGRectMake(isRight ? -320 : 320, 0, 640, 411); [UIView commitAnimations]; [bitmapOut release]; bitmapOut = nil; [bitmapIn release]; bitmapIn = nil;} 

Then, in the swapViewsAtEndOfTransition selector, you can update the views accordingly.

Answer 2

Well, you can create a layer, set its contents to an image representing the final state of your view, than apply the animation to this layer. When the animation is complete, you can remove the display state of the layer and the radio button.

I think this will work better than creating the whole view.

Answer 3

Years passed, but I think I found a solution for you. Just use kCATransitionPush instead of kCATransitionReveal . Like this:

 - (CAAnimation *)animationWithDuration:(float)duration forward:(BOOL)forward { CATransition *animation = [CATransition animation]; [animation setType:kCATransitionPush]; [animation setSubtype:forward?kCATransitionFromLeft:kCATransitionFromRight]; [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; animation.duration = duration; return animation; }