Push Push Implementation with CAAnimation

Question

How to implement kCATransitionPush using CAAnimation subclasses in iOS?

 CAAnimation *animation; // How do you create an animation that does the same than: // CATransition *animation = [CATransition animation]; // [animation setType:kCATransitionPush]; [self.view.layer addAnimation:animation forKey:nil]; [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1]; [self.view addSubview:change]; [UIView commitAnimations]; 

I know that UIView animations can be used, but it will help me better understand Core Animation if I can implement the kCATransitionPush transition from ground.

Answer 1

To perform an animation simultaneously on two layers, you must add an adequate CAAnimationGroup for each level.

 [nextView.layer addAnimation:nextViewAnimation forKey:nil]; [currentView.layer addAnimation:currentViewAnimation forKey:nil]; 

nextViewAnimation will look like this:

 CAAnimationGroup *nextViewAnimation = [CAAnimationGroup animation]; NSMutableArray *nextAnimations = [NSMutableArray array]; [nextAnimations addObject:[self opacityAnimation:YES]]; // fade in CGPoint fromPoint = CGPointMake(forward ? nextView.center.x + nextView.frame.size.width : nextView.center.x - nextView.frame.size.width, nextView.center.y); [nextAnimations addObject:[self positionAnimationFromPoint:fromPoint toPoint:nextView.center]]; // traslation in nextViewAnimation.animations = nextAnimations; 

and currentViewAnimation:

 CAAnimationGroup *currentViewAnimation = [CAAnimationGroup animation]; NSMutableArray *currentAnimations = [NSMutableArray array]; [currentSceneAnimations addObject:[self opacityAnimation:NO]]; // fade out CGPoint toPoint = CGPointMake(forward ? currentView.center.x - currentView.frame.size.width : currentView.center.x + currentView.frame.size.width, currentView.center.y); [currentAnimations addObject:[self positionAnimationFromPoint:currentView.center toPoint:toPoint]]; // traslation out currentViewAnimation.animations = currentAnimations; 

These methods create basic animations:

 - (CABasicAnimation *)opacityAnimation:(BOOL)fadeIn { CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@"opacity"]; a.fromValue = [NSNumber numberWithFloat:fadeIn ? 0.0 : 1.0]; a.toValue = [NSNumber numberWithFloat:fadeIn ? 1.0 : 0.0]; return a; } - (CABasicAnimation *)positionAnimationFromPoint:(CGPoint)fromPoint toPoint:(CGPoint)toPoint { CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@"position"]; a.fromValue = [NSValue valueWithCGPoint:fromPoint]; a.toValue = [NSValue valueWithCGPoint:toPoint]; return a; } 

With a Boolean forward, you can simulate a left or right transition.

Answer 2

By default, kCATransitionPush does include attenuation. To play the transition using your own CABasicAnimation , you first need to understand how push animation works. I do this without testing, so it can be turned off, but if I remember the animation in which sublevel B replaces sublevel A correctly, it works as follows:

• Level A moves from the starting position to the right.
• Layer B moves to the right to the starting position A
• The first half of the B animation layer animates its opacity from 0 to 1
• The second half of animation layer A enlivens its opacity from 1 to 0 (of course, you can replace it with any direction on the right here).

CABasicAnimation only supports animating one property, so you need to create a CAAnimationGroup that manages 4 different animations.

Create an animation for the position and opacity as follows:

 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"]; anim.fromValue = [NSValue valueWithCGPoint:startPoint]; anim.toValue = [NSValue valueWithCGPoint:endPoint]; CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"opacity"]; anim.fromValue = [NSNumber numberWithFloat:0.0]; anim.toValue = [NSNumber numberWithFloat:1.0];