如何使用 Core Animation 堆叠图像以模拟深度？

Question

我有一系列 UIImages 我需要用它们来模拟深度。我不能使用缩放，因为我需要能够旋转父视图，并且图像应该看起来像它们明显堆叠在彼此前面，而不是在同一平面上。

我创建了一个新的基于 ViewController 的项目并将其放入 viewDidLoad（以及附加的三个 120x120 像素图像，分别名为 1.png、2.png 和 3.png）：

- (void)viewDidLoad {

    // display image 3
    UIImageView *three = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3.png"]];
    three.center = CGPointMake(160 + 60, 240 - 60);
    [self.view addSubview:three];

    // rotate image 3 around the z axis
    // THIS IS INCORRECT
    CATransform3D theTransform = three.layer.transform;
    theTransform.m34 = 1.0 / -1000;
    three.layer.transform = theTransform;

    // display image 2
    UIImageView *two = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]];
    two.center = CGPointMake(160, 240);
    [self.view addSubview:two];

    // display image 1
    UIImageView *one = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.png"]];
    one.center = CGPointMake(160 - 60, 240 + 60);
    [self.view addSubview:one];

    //  rotate image 3 around the z axis
    // THIS IS INCORRECT
    theTransform = one.layer.transform;
    theTransform.m34 = 1.0 / 1000;
    one.layer.transform = theTransform;

    // release the images
    [one release];
    [two release];
    [three release];

    // rotate the parent view around the y axis
    theTransform = self.view.layer.transform;
    theTransform.m14 = 1.0 / -500;
    self.view.layer.transform = theTransform;

    [super viewDidLoad];
}

我有非常具体的原因为什么我不使用 EAGLView 以及为什么我不将图像作为 CALayers 加载（即为什么我对每个图像都使用 UIImageViews）。这只是一个快速演示，我可以用它来确定我在父应用程序中需要什么。

是否有一些矩阵方法可以沿 z 轴平移这些 2d 图像，使它们看起来像我想要表示的那样？我浏览了其他 StackOverflow 文章以及 Wikipedia 参考资料，但没有找到我正在寻找的内容——尽管我可能不一定会为我正在尝试做的事情使用正确的术语。

Answer 1

为了堆叠您的视图并应用透视，您需要先将它们放置在不同的 Z 位置，然后将透视效果应用到包含层。

我相信下面的代码会做到这一点，但我没有测试过（我用纯CALayers做过类似的事情，所以一般原则是正确的）：

- (void)viewDidLoad {

    UIImageView *three = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3.png"]];
    three.center = CGPointMake(160 + 60, 240 - 60);
    [self.view addSubview:three];

    three.layer.zPosition = -100;

    UIImageView *two = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]];
    two.center = CGPointMake(160, 240);
    [self.view addSubview:two];

    two.layer.zPosition = 0;

    UIImageView *one = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.png"]];
    one.center = CGPointMake(160 - 60, 240 + 60);
    [self.view addSubview:one];

    one.layer.zPosition = 100;

    // release the images
    [one release];
    [two release];
    [three release];

    CATransform3D theTransform = self.view.layer.sublayerTransform;
    theTransform.m34 = 1.0 / -500;
    self.view.layer.sublayerTransform = theTransform;

    [super viewDidLoad];
}

在您的代码中，您只是在每个视图的层上设置 CATransform3D 的透视部分（这就是 CATransform3D 矩阵的 m34 组件所做的）。您实际上并没有在 Z 平面上移动它们。您可以为此使用转换，但我发现 CALayers 的 zPosition 属性提供了一种更简洁的方式来定位 3-D 图层。

一旦您将图层彼此相对放置（负值远离用户的视点），您需要对主视图中托管的所有图层应用透视效果。为此，我发现设置托管视图层的sublayerTransform 是必要的，以便将透视正确应用于所有托管层。

如果您希望旋转一系列图像，请在主托管视图层的 sublayerTransform 上使用 CATransform3DRotate()。

有关对 CALayers 进行 3D 操作并应用透视图的示例应用程序，请查看我在文章 here 的第二次更新中链接到的项目。

Answer 2

我终于通过使用 CATransform3DMakeTranslation 解决了这个问题，这似乎是在 z 轴上下移动图层的唯一方法：

UIImageView *three = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3.png"]];
three.layer.transform = CATransform3DMakeTranslation(0.0f, 0.0f, 20.0f);
three.center = CGPointMake(160 + 60, 240 - 60);
[self.view addSubview:three];

（我还在 z 轴上将 UIImageView 移动了一个 -20.0f 像素。这最终得到了我想要的效果。）