CALayer子类四、CATransformLayer

简介

CATransformLayer作为父Layer时，对他的sublayers会有3D效果，也就是说不平面化它的子图层，大家一提到3D效果，就会想到一个神奇的东西景深，先说一下景深是个什么东西，提到景深，那我们就一定要说CATransform3D，它定义了一个4x4的CGFloat值的矩阵，就是这样的：

struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
}

其中的m34，就是上面提到的景深效果的源头。

平面化

• 简单的CALayer

  CALayer *layer = [CALayer layer];
  layer.bounds = CGRectMake(0, 0, 100, 100);
  layer.position = self.view.center;
  layer.opacity = 0.6;
  layer.backgroundColor = [UIColor blueColor].CGColor;
  layer.borderWidth = 5;
  layer.borderColor = [[UIColor orangeColor] colorWithAlphaComponent:0.4].CGColor;
  layer.cornerRadius = 20;
  layer.masksToBounds = YES;
  [self.view.layer addSublayer:layer];
    
  CATransform3D fromValue = CATransform3DIdentity;
  fromValue.m34 = 1.0 / -500;
  fromValue = CATransform3DRotate(fromValue, M_PI_2 / 2, 0, 1, 0);
  layer.transform = fromValue;
  

  运行结果:
  
• CATransformLayer作为父容器

  CALayer *layer = [CALayer layer];
  layer.bounds = CGRectMake(0, 0, 100, 100);
  layer.opacity = 0.6;
  layer.backgroundColor = [UIColor blueColor].CGColor;
  layer.borderWidth = 5;
  layer.borderColor = [[UIColor orangeColor] colorWithAlphaComponent:0.4].CGColor;
  layer.cornerRadius = 20;
  layer.masksToBounds = YES;
    
  // 加一个CATransformLayer作为父容器
  CATransformLayer *containerLayer = [CATransformLayer layer];
  containerLayer.bounds = CGRectMake(0, 0, 100, 100);
  containerLayer.position = self.view.center;
  layer.position = CGPointMake(50, 50);
  [containerLayer addSublayer:layer];
  [self.view.layer addSublayer:containerLayer];
    
  CATransform3D fromValue = CATransform3DIdentity;
  fromValue.m34 = 1.0 / -500;
  fromValue = CATransform3DRotate(fromValue, M_PI_2 / 2, 0, 1, 0);
  layer.transform = fromValue;
  

  一样的运行结果:
  
• 总结
  CATransformLayer并不平面化它的子图层，所以它能够用于构造一个层级分明的3D结构。

构建3D立方体

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, -M_PI_4, 1, 0, 0);
    transform = CATransform3DRotate(transform, -M_PI_4, 0, 1, 0);
    CALayer *cube = [self cubeWithTransform:transform];
    [self.view.layer addSublayer:cube];
}

- (CALayer *)faceWithTransform:(CATransform3D)transform color:(UIColor*)color {
    CALayer *face = [CALayer layer];
    face.frame = CGRectMake(-50, -50, 100, 100);
    face.backgroundColor = color.CGColor;
    face.transform = transform;
    return face;
}

- (CALayer *)cubeWithTransform:(CATransform3D)transform {
    //容器
    CATransformLayer *cube = [CATransformLayer layer];
    
    //前
    CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);
    [cube addSublayer:[self faceWithTransform:ct color:[UIColor redColor]]];
    
    //右
    ct = CATransform3DMakeTranslation(50, 0, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct color:[UIColor yellowColor]]];
    
    //上
    ct = CATransform3DMakeTranslation(0, -50, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
    [cube addSublayer:[self faceWithTransform:ct color:[UIColor blueColor]]];
    
    //下
    ct = CATransform3DMakeTranslation(0, 50, 0);
    ct = CATransform3DRotate(ct, -M_PI_2, 1, 0, 0);
    [cube addSublayer:[self faceWithTransform:ct color:[UIColor brownColor]]];
    
    //左
    ct = CATransform3DMakeTranslation(-50, 0, 0);
    ct = CATransform3DRotate(ct, -M_PI_2, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct color:[UIColor greenColor]]];
    
    //后
    ct = CATransform3DMakeTranslation(0, 0, -50);
    ct = CATransform3DRotate(ct, M_PI, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct color:[UIColor orangeColor]]];
    
    //
    CGSize containerSize = self.view.bounds.size;
    cube.position = CGPointMake(containerSize.width / 2.0,
                                containerSize.height / 2.0);
    
    cube.transform = transform;
    return cube;
}

运行结果: