Положение слоя переходит в начало анимации (Core)

Question

Итак, я пытаюсь создать эффект переворачивания плитки, как в Windows Phone 7.

Пока у меня есть следующий код, но у меня есть пара запросов.

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. Почему мой красный квадрат (простое представление пользовательского интерфейса) переводится вправо в начале анимации?

2. Для точки привязки возможно ли установить позицию в родительском представлении? В данный момент я произвольно устанавливаю его относительно текущего представления.

Заранее спасибо за любые указатели.

До анимации

Во время анимации (обратите внимание, квадрат сместился вправо)

После анимации (обратите внимание, квадрат сместился вправо)

Добавлено видео: пример видео

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

Взято из этого и слегка подправлено .. Надеюсь, это поможет Изменение точки привязки моего CALayer перемещает представление

Answer 2

Если вы сделаете квадрат своим собственным видом, переключение будет встроенным

[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

Допустимый диапазон значений anchorPoint для CALayer составляет [0,1]. В вашем случае, когда вы пытаетесь перевернуть ось Y, точка привязки вашего слоя должна быть [0, 0,5].