ios - 在 CATransformLayer iOS 中使用 CATransform3D 从右到左改变透视角度

Question

我正在尝试绘制一个 3d block !

使用 2 层，右侧 在 3d 中看起来不错。见附图。

当我尝试重用相同的代码对左侧 进行较小的修改时!它看起来很奇怪。请参阅下面的附图，

我觉得如果我们可以改变透视角度我们可以改进，但不知道如何实现。

使用 transform.m34 进行透视。任何帮助将不胜感激。

这是我正在使用的源代码。

// left Bar
/*{
    CGFloat aViewWidth = 1000;

    CAGradientLayer *blueLayer = [CAGradientLayer layer];
    blueLayer.anchorPoint = P(0,0.5);

    blueLayer.colors = @[
                        (id)aBarColor.CGColor,
                        (id)[UIColor blackColor].CGColor
                        ];
    blueLayer.startPoint = CGPointMake(0.0, 0.5);
    blueLayer.endPoint = CGPointMake(1.5, 0.5);

    blueLayer.frame = CGRectMake(125, 0, aViewWidth, 250);
    blueLayer.transform = CATransform3DRotate(CATransform3DIdentity, M_PI_2, 0.0f, 1.0f, 0.0f);


    [baseLayer addSublayer:blueLayer];

    CAGradientLayer *redLayer = [CAGradientLayer layer];

    redLayer.colors = @[
                        (id)[UIColor whiteColor].CGColor,
                        (id)aBarColor.CGColor
                        ];
    redLayer.startPoint = CGPointMake(-10.0, 0.5);
    redLayer.endPoint = CGPointMake(1.0, 0.5);
    redLayer.anchorPoint = P(0.5,0.5);

    redLayer.frame = CGRectMake(0, 0, 125, 250);

    [baseLayer addSublayer:redLayer];

    CGFloat perspective = -1000; //This relates to the m34 perspective matrix.

    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0 / perspective;
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, degreesToRadians(-10.0) , 0.0f, 1.0f, 0.0f);

    baseLayer.sublayerTransform = rotationAndPerspectiveTransform;

    [self.view.layer addSublayer:baseLayer];

    return;

    CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath: @"sublayerTransform"];
    transformAnimation.fillMode = kCAFillModeForwards;
    transformAnimation.removedOnCompletion = NO;
    {

        CGFloat w0 = 0;
        CGFloat w1 = aViewWidth;

        w0 = w0 * sin(degreesToRadians(10)) - perspective * cos(degreesToRadians(10));
        w1 = w1 * sin(degreesToRadians(10)) - perspective * cos(degreesToRadians(10));

        CGFloat newWidth = w1 - w0;
        newWidth = newWidth * 1.2;

        CATransform3D newTransform = CATransform3DIdentity;
        newTransform.m34 = 1.0 / perspective;
        newTransform = CATransform3DRotate(newTransform, degreesToRadians(-10) , 0.0f, 1.0f, 0.0f);
        newTransform = CATransform3DScale(newTransform, 1.0f, 1.0f, 1.0f);
        newTransform = CATransform3DTranslate(newTransform, newWidth, 0.0f, 0.0f);

        transformAnimation.toValue = [NSValue valueWithCATransform3D:newTransform];
        transformAnimation.duration = 10.0;
    }
    [baseLayer addAnimation:transformAnimation forKey:@"transform"];
}*/

// Right Bar
{
    CGFloat aViewWidth = 1000;

    CAGradientLayer *redLayer = [CAGradientLayer layer];

    redLayer.colors = @[
                        (id)aBarColor.CGColor,
                        (id)[UIColor blackColor].CGColor
                    ];
    redLayer.startPoint = CGPointMake(0.0, 0.5);
    redLayer.endPoint = CGPointMake(1.5, 0.5);

    redLayer.frame = CGRectMake(0, 0, aViewWidth, 250);
    redLayer.position = CGPointMake(0,0);
    redLayer.anchorPoint = CGPointMake(0, 0.5); // right
    redLayer.transform = CATransform3DRotate(CATransform3DIdentity, M_PI_2,0.0f, 1.0f, 0.0f);

    [baseLayer addSublayer:redLayer];

    CAGradientLayer *blueLayer = [CAGradientLayer layer];

    blueLayer.colors = @[
                        (id)[UIColor whiteColor].CGColor,
                        (id)aBarColor.CGColor
                        ];
    blueLayer.startPoint = CGPointMake(-10.0, 0.5);
    blueLayer.endPoint = CGPointMake(1.0, 0.5);

    blueLayer.frame = CGRectMake(0, 0, 125, 250);
    blueLayer.anchorPoint = CGPointMake(0, 0.5); // right
    blueLayer.position = CGPointMake(0,0);

    [baseLayer addSublayer:blueLayer];

    CGFloat perspective = -1 * aViewWidth; //This relates to the m34 perspective matrix.

    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0 / perspective;
    rotationAndPerspectiveTransform = CATransform3DScale(rotationAndPerspectiveTransform, 0.1f, 0.1f, 0.1f);

    baseLayer.sublayerTransform = rotationAndPerspectiveTransform;

    [self.view.layer addSublayer:baseLayer];

    CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath: @"sublayerTransform"];
    transformAnimation.fillMode = kCAFillModeForwards;
    transformAnimation.removedOnCompletion = NO;
    {

        CGFloat w0 = 0;
        CGFloat w1 = aViewWidth;

        w0 = w0 * sin(degreesToRadians(10)) - perspective * cos(degreesToRadians(10));
        w1 = w1 * sin(degreesToRadians(10)) - perspective * cos(degreesToRadians(10));

        CGFloat newWidth = w1 - w0;
        newWidth = newWidth * 1.225;

        CATransform3D newTransform = CATransform3DIdentity;
        newTransform.m34 = 1.0 / perspective;
        newTransform = CATransform3DRotate(newTransform, degreesToRadians(10) , 0.0f, 1.0f, 0.0f);
        newTransform = CATransform3DScale(newTransform, 1.0f, 1.0f, 1.0f);
        newTransform = CATransform3DTranslate(newTransform, newWidth, 0.0f, 0.0f);

        transformAnimation.toValue = [NSValue valueWithCATransform3D:newTransform];
        transformAnimation.duration = 10.0;
    }
    [baseLayer addAnimation:transformAnimation forKey:@"transform"];
}

Answer 1

这里是工作代码:

// left Bar
{
 CGFloat aViewWidth = 1000;

 CAGradientLayer *blueLayer = [CAGradientLayer layer];
 blueLayer.anchorPoint = P(0,0.5);

 blueLayer.colors = @[
 (id)aBarColor.CGColor,
 (id)[UIColor blackColor].CGColor
 ];
 blueLayer.startPoint = CGPointMake(0.0, 0.5);
 blueLayer.endPoint = CGPointMake(1.5, 0.5);

 blueLayer.frame = CGRectMake(125, 0, aViewWidth, 250);
 blueLayer.transform = CATransform3DRotate(CATransform3DIdentity, M_PI_2, 0.0f, 1.0f, 0.0f);


 [baseLayer addSublayer:blueLayer];

 CAGradientLayer *redLayer = [CAGradientLayer layer];

 redLayer.colors = @[
 (id)[UIColor whiteColor].CGColor,
 (id)aBarColor.CGColor
 ];
 redLayer.startPoint = CGPointMake(-10.0, 0.5);
 redLayer.endPoint = CGPointMake(1.0, 0.5);

redLayer.anchorPoint = P(1.0,0.5);

 redLayer.frame = CGRectMake(0, 0, 125, 250);

 [baseLayer addSublayer:redLayer];

 CGFloat perspective = -1000; //This relates to the m34 perspective matrix.

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / perspective;
rotationAndPerspectiveTransform = CATransform3DScale(rotationAndPerspectiveTransform, 0.1f, 0.1f, 0.1f);

 baseLayer.sublayerTransform = rotationAndPerspectiveTransform;

 [self.view.layer addSublayer:baseLayer];

 CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath: @"sublayerTransform"];
 transformAnimation.fillMode = kCAFillModeForwards;
 transformAnimation.removedOnCompletion = NO;
 {

 CGFloat w0 = 0;
 CGFloat w1 = aViewWidth;

 w0 = w0 * sin(degreesToRadians(-10)) - perspective * cos(degreesToRadians(-10));
 w1 = w1 * sin(degreesToRadians(-10)) - perspective * cos(degreesToRadians(-10));

 CGFloat newWidth = w1 - w0;
 newWidth = newWidth * 1.2;

 CATransform3D newTransform = CATransform3DIdentity;
 newTransform.m34 = 1.0 / perspective;
 newTransform = CATransform3DRotate(newTransform, degreesToRadians(-10) , 0.0f, 1.0f, 0.0f);
 newTransform = CATransform3DScale(newTransform, 1.0f, 1.0f, 1.0f);
 newTransform = CATransform3DTranslate(newTransform, newWidth, 0.0f, 0.0f);

 transformAnimation.toValue = [NSValue valueWithCATransform3D:newTransform];
 transformAnimation.duration = 10.0;
 }
 [baseLayer addAnimation:transformAnimation forKey:@"transform"];
 }

将您的 redLayer ancherPoint 更改为 (1.0, 0.5) 并在 w0 和 w1 中使用负角度值。 newWidth(用于对于翻译)变量应该是左侧动画的负值和右侧动画的正值。