Sauts de position du calque au début de l'animation (Core)

Question

J'essaie donc de créer un effet de retournement des tuiles, comme sur Windows Phone 7.

Jusqu'à présent, j'ai le code suivant, mais j'ai quelques questions à poser.

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. Comment se fait-il que mon carré rouge (une vue simple de l'interface utilisateur) se déplace vers la droite au début de l'animation ?

2. Pour le point d'ancrage, est-il possible de définir une position sur la vue parentale ? Pour l'instant, je le fixe arbitrairement par rapport à la vue courante.

Merci d'avance pour tout conseil.

Avant l'animation

Pendant l'animation (remarquez que le carré s'est déplacé vers la droite)

Après l'animation (remarquez que le carré s'est déplacé vers la droite)

Vidéo ajoutée : exemple de vidéo

Answer 1

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

Tiré de Ceci, et légèrement modifié J'espère que cela vous aidera Changer le point d'ancrage de mon CALayer déplace la vue

Answer 2

Si vous faites du carré sa propre vue, le retournement est intégré

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

Answer 3

La plage acceptable de la anchorPoint d'un CALayer est [0,1]. Dans votre cas, où vous essayez d'effectuer une inversion autour de l'axe Y, le point d'ancrage de votre calque doit être [0, 0,5].