2016-06-13 7 views
6

Próbuję narysować jeden blok 3D!Zmiana kąta perspektywy z prawej na lewą, w CATransformLayer iOS przy użyciu CATransform3D

Za pomocą 2 warstw i wygląda dobrze w 3d dla prawej stronie. zobacz załączony obraz.

enter image description here

Kiedy próbuję ponownie użyć tego samego kodu do drobnych modyfikacji dla lewej stronie! wygląda dziwnie. Patrz załączony ryk obrazu

enter image description here

czuję możemy poprawić, jeśli możemy zmienić kąt widzenia, ale nie wiem, jak to osiągnąć.

przy użyciu transform.m34 dla perspektywy. jakakolwiek pomoc byłaby bardzo doceniana.

Oto kod źródłowy, którego używam.

// 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"]; 
} 

Odpowiedz

5

tutaj jest oznaczeniem robocze:

// 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"]; 
} 

Zmień redLayer ancherPoint to (1.0, 0.5) i używać ujemną wartość gle w w0 i w1. ZmiennanewWidth (która służy do tłumaczenia) powinna być wartością ujemną dla animacji po lewej stronie i wartością dodatnią dla animacji po prawej stronie.

Powiązane problemy