如何使用Core Animation堆叠图像以模拟深度？ [英] How do I stack images to simulate depth using Core Animation?

问题描述

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

I have a series of UIImages with which I need to simulate depth. I can't use scaling because I need to be able to rotate the parent view, and the images should look like they're stacked visibly in front of each other, not on the same plane.

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

I made a new ViewController-based project and put this in the viewDidLoad (as well as attached three 120x120 pixel images named 1.png, 2.png, and 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的原因）。这只是一个快速演示，我可以使用它来准确地解决我在父应用程序中需要的内容。

I have very specific reasons why I'm not using an EAGLView and why I'm not loading the images as CALayers (i.e. why I'm using UIImageViews for each one). This is just a quick demo that I can use to work out exactly what I need in my parent application.

是否有一些矩阵方式来沿z转换这些2d图像-axis所以它们看起来像我想要代表的东西？我已经阅读了其他StackOverflow文章以及维基百科的参考文献，并且没有找到我正在寻找的东西 - 尽管我可能不一定正在使用正确的术语来解决我想要做的事情。

Is there some matrix way to translate these 2d images along the z-axis so they will look like what I'm trying to represent? I've gone through the other StackOverflow articles as well as the Wikipedia references, and have not found what I'm looking for -- although I might not necessarily be using the right terms for what I'm trying to do.

推荐答案

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

I finally solved this by using CATransform3DMakeTranslation, which seems to be the only way to move a layer up or down the z-axis:

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

（我还将UIImageView在z轴上移动了一个-20.0f像素。这最终产生了效果我一直在寻找。）

(I also moved UIImageView one -20.0f pixels on the z-axis. That finally gave the effect I was looking for.)

这篇关于如何使用Core Animation堆叠图像以模拟深度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！