Как оживить UIImageView, такие как открытие дверей люка

Я пытаюсь создать анимацию, которая будет выглядеть как 2 французские двери (или две двери люка), открывающиеся к пользователю.

Я попытался использовать встроенный переход UIViewAnimationOptionTransitionFlipFromRight, но происхождение перехода, по-видимому, является центром UIImageView, а не левым краем. В основном у меня есть 2 UIImageViews, каждый из которых заполняет экран. Я хотел бы, чтобы анимация выглядела так, как UIImageViews поднимаются от центра экрана к краям.

[UIView transitionWithView:leftView
                  duration:1.0
                   options:UIViewAnimationOptionTransitionFlipFromRight                           
                animations:^ { leftView.alpha = 0; }
                completion:^(BOOL finished) {
                    [leftView removeFromSuperview]; 
                }];

Кто-нибудь сделал что-то подобное раньше? Любая помощь будет потрясающей!

UPDATE: Рабочий код благодаря Нику Локвуду

leftView.layer.anchorPoint = CGPointMake(0, 0.5); // hinge around the left edge
leftView.frame = CGRectMake(0, 0, 160, 460); //reset view position

rightView.layer.anchorPoint = CGPointMake(1.0, 0.5); //hinge around the right edge
rightView.frame = CGRectMake(160, 0, 160, 460); //reset view position

[UIView animateWithDuration:0.75 animations:^{
    CATransform3D leftTransform = CATransform3DIdentity;
    leftTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective
    leftTransform = CATransform3DRotate(leftTransform, -M_PI_2, 0, 1, 0);
    leftView.layer.transform = leftTransform;

    CATransform3D rightTransform = CATransform3DIdentity;
    rightTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective
    rightTransform = CATransform3DRotate(rightTransform, M_PI_2, 0, 1, 0);
    rightView.layer.transform = rightTransform;
}];

Ответы

Ответ 1

Сначала добавьте библиотеку QuartzCore в ваш проект и #import <QuartzCore/QuartzCore.h>

Каждый вид имеет свойство layer с под-свойствами, которые являются анимированными. Здесь вы найдете все действительно классные вещи, когда речь заходит о возможностях анимации (я предлагаю прочитать свойства класса CALayer, которые вы можете установить, - это сдует ваши ум-динамические мягкие тени для теней на любом представлении?)

В любом случае, вернемся к теме. Чтобы повернуть ваши двери в 3D, сначала расположите их так, как будто они были закрыты, так что каждая дверь заполняет половину экрана.

Теперь установите их свойства view.layer.anchorPoint следующим образом:

leftDoorView.layer.anchorPoint = CGPoint(0, 0.5); // hinge around the left edge
rightDoorView.layer.anchorPoint = CGPoint(1.0, 0.5); // hinge around the right edge

Теперь примените следующую анимацию

[UIView animateWithDuration:0.5 animations:^{
   CATransform3D leftTransform = CATransform3DIdentity;
   leftTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective
   leftTransform = CATransform3DRotate(leftTransform, M_PI_2, 0, 1, 0); //rotate 90 degrees about the Y axis
   leftDoorView.layer.transform = leftTransform;
   //do the same thing but mirrored for the right door, that probably just means using -M_PI_2 for the angle. If you don't know what PI is, Google "radians"
}];

И это должно сделать это.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я на самом деле не проверял это, поэтому углы могут быть обратными, и перспектива может быть жуткой и т.д., но это должно быть хорошим началом по крайней мере.

ОБНОВЛЕНИЕ: Любопытство стало лучше меня. Вот полный рабочий код (это предполагает, что левая и правая двери выложены в закрытом положении в файле nib):

- (void)viewDidLoad
{
    [super viewDidLoad];

    leftDoorView.layer.anchorPoint = CGPointMake(0, 0.5); // hinge around the left edge
    leftDoorView.center = CGPointMake(0.0, self.view.bounds.size.height/2.0); //compensate for anchor offset
    rightDoorView.layer.anchorPoint = CGPointMake(1.0, 0.5); // hinge around the right edge
    rightDoorView.center = CGPointMake(self.view.bounds.size.width,self.view.bounds.size.height/2.0); //compensate for anchor offset
}

- (IBAction)open
{
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1.0f/500;
    leftDoorView.layer.transform = transform;
    rightDoorView.layer.transform = transform;

    [UIView animateWithDuration:0.5 animations:^{

        leftDoorView.layer.transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
        rightDoorView.layer.transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
    }];
}

- (IBAction)close
{
    [UIView animateWithDuration:0.5 animations:^{

        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = -1.0f/500;
        leftDoorView.layer.transform = transform;
        rightDoorView.layer.transform = transform;
    }];
}