3D旋转中的透视问题

Question

我想实现这样的目标：

这是我的视图控制器的快照

我尝试的代码是这样的：

    UIWindow *window = [[UIApplication sharedApplication] keyWindow];

    // Take a snapshot
    //
    _screenshotView = [[UIImageView alloc] initWithFrame:CGRectNull];

    _screenshotView.image = [self getScreenSnapshot];

    _screenshotView.frame = CGRectMake(-160, -284, _screenshotView.image.size.width, _screenshotView.image.size.height);
    _screenshotView.userInteractionEnabled = YES;
    _screenshotView.layer.anchorPoint = CGPointMake(0, 0);

    _originalSize = _screenshotView.frame.size;

    [window addSubview:_screenshotView];

    [self minimizeFromRect:CGRectMake(0, 0, _originalSize.width, _originalSize.height)];


- (void)minimizeFromRect:(CGRect)rect
{
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    CGFloat m = 0.7;
    CGFloat newWidth = _originalSize.width * m;
    CGFloat newHeight = _originalSize.height * m;

    [CATransaction begin];
    [CATransaction setValue:[NSNumber numberWithFloat:0.6] forKey:kCATransactionAnimationDuration];
    [self addAnimation:@"position.x" view:_screenshotView startValue:rect.origin.x endValue:window.frame.size.width - 80.0];
    [self addAnimation:@"position.y" view:_screenshotView startValue:rect.origin.y endValue:(window.frame.size.height - newHeight) / 2.0];
    [self addAnimation:@"bounds.size.width" view:_screenshotView startValue:rect.size.width endValue:newWidth];
    [self addAnimation:@"bounds.size.height" view:_screenshotView startValue:rect.size.height endValue:newHeight];

    _screenshotView.layer.position = CGPointMake(window.frame.size.width - 80.0, (window.frame.size.height - newHeight) / 2.0);
    _screenshotView.layer.bounds = CGRectMake(window.frame.size.width - 80.0, (window.frame.size.height - newHeight) / 2.0, newWidth, newHeight);

    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0 / -600;
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, -20.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
    _screenshotView.layer.transform = rotationAndPerspectiveTransform;

    [CATransaction commit];
}

代码工作正常，但看起来旋转是从不同的角度显示的，因为动画后的快照结果是这样的：

我错过了什么？

Answer 1

通过将UIImageView对象替换为CALayer图像图层对象来解决此问题。 感谢https://github.com/kristopherjohnson/perspectivetest

    UIWindow *window = [[UIApplication sharedApplication] keyWindow];

    // Take a snapshot
    //

    UIImage *image = [self getScreenSnapshot];
    CGImageRef pictureImage = image.CGImage;

    CGFloat zDistance = 1200.0f;
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = 1.0f / -zDistance;

    _screenshotView = [[UIView alloc] initWithFrame:CGRectNull];
    _screenshotView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
    _screenshotView.userInteractionEnabled = YES;

    _imageLayer = [CALayer layer];
    _imageLayer.frame = _screenshotView.frame;;
    _imageLayer.contents = (__bridge id)pictureImage;
    _imageLayer.transform = transform;

    [_screenshotView.layer addSublayer:_imageLayer];

    _originalSize = _screenshotView.frame.size;

    [window addSubview:_screenshotView];

    [self minimizeFromRect:CGRectMake(0, 0, _originalSize.width, _originalSize.height)];


- (void)minimizeFromRect:(CGRect)rect
{
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    CGFloat m = 0.6;
    CGFloat newWidth = _originalSize.width * m;
    CGFloat newHeight = _originalSize.height * m;

    [CATransaction begin];
    [CATransaction setValue:[NSNumber numberWithFloat:0.4] forKey:kCATransactionAnimationDuration];
    [self addAnimation:@"position.x" view:_screenshotView startValue:rect.origin.x endValue:window.frame.size.width - 40.0];
    [self addAnimation:@"position.y" view:_screenshotView startValue:rect.origin.y endValue:(window.frame.size.height - newHeight) / 2.0];
    [self addAnimation:@"bounds.size.width" view:_screenshotView startValue:rect.size.width endValue:newWidth];
    [self addAnimation:@"bounds.size.height" view:_screenshotView startValue:rect.size.height endValue:newHeight];
    [self addAnimationForLayer:@"transform.rotation.y" view:_imageLayer startValue:0.0f endValue:-0.4 * M_PI];


    _screenshotView.layer.position = CGPointMake(window.frame.size.width - 80.0, (window.frame.size.height - newHeight) / 2.0);
    _screenshotView.layer.bounds = CGRectMake(window.frame.size.width - 80.0, (window.frame.size.height - newHeight) / 2.0, newWidth, newHeight);

    [CATransaction commit];
}

Answer 2

一种方法可能是你可以使用两个图像，一个用于上半部分，一个用于下半部分。并且您可以将两个图像拼接在一起，这样就不会看到间隙，您可以获得所需的输出。

将属性设置为上部和下部图像的一个正值和一个负值，反之亦然。您可以获得所需结果的两个图像。然后你可以设置框架使它们粘在一起，使它们看起来像一个图像。

Property :: rotationAndPerspectiveTransform.m34 = 1.0 / 600.0;

Property :: rotationAndPerspectiveTransform.m34 = -1.0 / 600.0;

您可能需要进行一些打击和试用。