Implementación de una inserción CATransition con CAAnimation

Question

¿Cómo se implementa kCATransitionPush utilizando las subclases CAAnimation en 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]; 

Soy consciente de que UIViewalso animaciones pueden ser utilizados, pero me ayudaría a entender Animación Core mejor si pudiera aplicar una transición kCATransitionPush de la tierra-para arriba.

Answer 1

Con el fin de ejecutar las animaciones simultáneamente sobre las dos capas, debe agregar el CAAnimationGroup adecuada para cada capa.

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

nextViewAnimation sería:

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; 

y 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; 

Estos métodos crean las animaciones básicas:

- (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; 
} 

Con el booleano adelante puede simular la transición "desde la izquierda" o "desde la derecha".

Answer 2

El valor predeterminado kCATransitionPush incluye un desvanecimiento. Para replicar la transición usando su propio CABasicAnimation, primero deberá comprender cómo funciona la animación push. Lo hago sin pruebas por lo que este podría ser apagado, pero si no recuerdo mal la animación, donde subcapa B reemplaza subcapa Un funciona así:

• capa A se mueve desde la posición original a la derecha
• capa B se mueve de derecho a la posición original de a
• medio Lirst de la capa de la animación B anima su opacidad de 0 a 1
• Segunda mitad de la capa de la animación Una anima su opacidad de 1 a 0 (por supuesto se puede reemplazar derecho con cualquier dirección aquí).

CABasicAnimation sólo es compatible con la animación de una propiedad, por lo que tendrá que crear un CAAnimationGroup que controla los 4 diferentes animaciones.

Crear las animaciones para la posición y la opacidad de esta manera:

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];