在使用CATransformLayer iOS的CATransform3D中，从右到左更改透视角

Question

我正试着画一个3d块！

使用2层，它看起来很好的三维右侧。请看附图。

​

​

当我试图重用相同的代码，以便对左侧进行小修改时！看起来怪怪的。见附图所示，

​

​

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

使用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.

CATransform3DScale(rotationAndPerspectiveTransform，CATransform3D rotationAndPerspectiveTransform =CATransform3DIdentity，rotationAndPerspectiveTransform.m34 = 1.0 /透视图，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)) -透视* cos(degreesToRadians(-10))；w1 = w1 * sin(degreesToRadians(-10)) -透视* 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"];
 }

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