如何为舱门打开等UIImageViews制作动画 [英] How to animate UIImageViews like hatch doors opening

问题描述

我正在尝试创建一个看起来像是朝向用户的2个法式门（或2个舱门）的动画。

I'm trying to create an animation that would look like 2 french doors (or 2 hatch doors) opening towards the user.

我尝试使用内置的UIViewAnimationOptionTransitionFlipFromRight过渡，但过渡的起源似乎是UIImageView的中心而不是左边缘。基本上我有2个UIImageViews，每个填充都有屏幕。我希望动画看起来像UIImageViews从屏幕中心升到边缘。

I tried using the built in UIViewAnimationOptionTransitionFlipFromRight transition, but the origin of the transition seems to be the center of the UIImageView rather than the left edge. Basically I have 2 UIImageViews that each fill have the screen. I would like the animation to look like the UIImageViews are lifting from the center of the screen to the edges.

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

以前有人做过这样的事吗？任何帮助都会很棒！

Has anyone done something like this before? Any help would be awesome!

更新：
工作代码感谢Nick Lockwood

UPDATE: Working code thanks to Nick Lockwood

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

推荐答案

首先将QuartzCore库添加到项目中并 #import< QuartzCore / QuartzCore.h>

First add the QuartzCore library to your project and #import <QuartzCore/QuartzCore.h>

每个视图都有图层具有可动画子属性的属性。这是你在动画功能方面找到所有非常酷的东西的地方（我建议阅读你可以设置的 CALayer 类属性 - 它会让你大吃一惊 - 任何视图上的动态软投影？）

Every view has a layer property with sub-properties that are animatable. This is where you'll find all the really cool stuff when it comes to animation capabilities (I suggest reading up on the CALayer class properties you can set - it will blow your mind - dynamic soft drop shadows on any view?)

无论如何，回到主题。要以3D打开你的门，首先将它们放置为关闭，这样每个门都会填满屏幕的一半。

Anyway, back on topic. To rotate your doors open in 3D, first position them as if they were closed, so with each door filling half the screen.

现在设置它们的 view.layer.anchorPoint 属性如下

Now set their view.layer.anchorPoint properties as follows

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

应该这样做。

免责声明：我实际上没有对此进行过测试，因此角度可能会向后，角度可能会变得棘手等等，但它至少应该是一个好的开始。

DISCLAIMER: I've not actually tested this, so the angles may be backwards, and the perspective may be screwy, etc. but it should be a good start at least.

更新：好奇心让我变得更好。这是完全正常工作的代码（假设左右门在nib文件中的关闭位置布局）：

UPDATE: Curiosity got the better of me. Here is fully working code (this assumes that the left and right doors are laid out in the closed position in the nib file):

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

这篇关于如何为舱门打开等UIImageViews制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！