2012-02-07 10 views
6

lo tanto, estoy tratando de crear un efecto de volteo baldosas, al igual que en Windows Phone 7.Capa Posición salta al inicio de la animación (Core)

Hasta ahora tengo el siguiente código, pero tengo un par de consultas.

CALayer *layer = self.theRedSquare.layer; 
CATransform3D initialTransform = self.theRedSquare.layer.transform; 
initialTransform.m34 = 1.0/-1000; 

[UIView beginAnimations:@"Scale" context:nil]; 
[UIView setAnimationDuration:1]; 
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; 
layer.transform = initialTransform; 
layer.anchorPoint = CGPointMake(-0.3, 0.5); 

CATransform3D rotationAndPerspectiveTransform = self.theRedSquare.layer.transform; 

rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -self.theRedSquare.bounds.size.height/2, 0); 

layer.transform = rotationAndPerspectiveTransform; 

[UIView setAnimationDelegate:self]; 
[UIView commitAnimations]; 

1. ¿Cómo es que mi mi cuadrado rojo (una vista sencilla interfaz de usuario) se traduce a la derecha en el inicio de la animación?

2. ¿Para el punto de anclaje es posible establecer una posición en la vista principal? Por el momento, lo estoy configurando arbitrariamente en relación con la vista actual.

Gracias de antemano por cualquier apuntador.

Antes de animación

Before

Durante la animación (nótese la plaza se ha desplazado a la derecha)

During

Después de la animación (nótese la plaza se ha desplazado a la derecha)

After

Vídeo añadido: example video

Respuesta

6
-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view 
{ 
    CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y); 
    CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y); 

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform); 
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform); 

    CGPoint position = view.layer.position; 

    position.x -= oldPoint.x; 
    position.x += newPoint.x; 

    position.y -= oldPoint.y; 
    position.y += newPoint.y; 

    view.layer.position = position; 
    view.layer.anchorPoint = anchorPoint; 
} 

-(void)animateView:(UIView *)theRedSquare 
{ 
    CALayer *layer = theRedSquare.layer; 
    CATransform3D initialTransform = theRedSquare.layer.transform; 
    initialTransform.m34 = 1.0/-1000; 

    [self setAnchorPoint:CGPointMake(-0.3, 0.5) forView:theRedSquare]; 


    [UIView beginAnimations:@"Scale" context:nil]; 
    [UIView setAnimationDuration:1]; 
    [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; 
    layer.transform = initialTransform; 


    CATransform3D rotationAndPerspectiveTransform = theRedSquare.layer.transform; 

    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -theRedSquare.bounds.size.height/2, 0); 

    layer.transform = rotationAndPerspectiveTransform; 

    [UIView setAnimationDelegate:self]; 
    [UIView commitAnimations]; 
} 

Tomado del Este, y ligeramente modificado .. Es de esperar que ayuda a Changing my CALayer's anchorPoint moves the view

+0

¡Magnífico, gracias! – JonB

+0

¿Cómo se obtiene la animación para animar? (Eso Flip in) He estado tratando durante horas para resolver esto. – Frankrockz

2

El intervalo aceptable de la anchorPoint de un CALayer es [0,1]. En su caso, cuando intenta dar la vuelta al eje Y, el punto de anclaje de su capa debe ser [0, 0.5].

+0

Tenía esta funcionando bien , pero el UIView rojo cambia justo antes de comenzar la animación. Trataré de obtener un video. Curiosamente -0.3 para el anclaje funciona, gira alrededor del desplazamiento del eje y hacia la izquierda. – JonB

+0

han agregado un video para mostrar el problema. en la primera ejecución de la animación, el cuadrado cambia un número de píxeles a la derecha. Parece que no puede resolverlo. – JonB

3

Si realiza el cuadrado de su propia visión, mover de un tirón se construye en

[UIView beginAnimations:@"flip" context:nil]; 
[UIView setAnimationDuration:.35f]; 
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn]; 
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft 
    forView:self.window cache:YES]; 

// change to the new view (make this one hidden, the other not) 

[UIView commitAnimations]; 
+0

Aprecio que no fue demasiado obvio por mi descripción, pero no estoy buscando desde el lugar. Quiero dar la vuelta al borde izquierdo de mi cuadrado rojo (que ya es un UIView). Mira el siguiente video para conocer el tipo de efecto que estoy buscando: http://www.youtube.com/watch?v=wgoGDPF_NGo – JonB

Cuestiones relacionadas