6.3 CATransformLayer 圖層

CATransformLayer

當(dāng)我們在構(gòu)造復(fù)雜的3D事物的時候，如果能夠組織獨立元素就太方便了。比如說，你想創(chuàng)造一個孩子的手臂：你就需要確定哪一部分是孩子的手腕，哪一部分是孩子的前臂，哪一部分是孩子的肘，哪一部分是孩子的上臂，哪一部分是孩子的肩膀等等。

當(dāng)然是允許獨立地移動每個區(qū)域的啦。以肘為指點會移動前臂和手，而不是肩膀。Core Animation圖層很容易就可以讓你在2D環(huán)境下做出這樣的層級體系下的變換，但是3D情況下就不太可能，因為所有的圖層都把他的孩子都平面化到一個場景中（第五章『變換』有提到）。

CATransformLayer解決了這個問題，CATransformLayer不同于普通的CALayer，因為它不能顯示它自己的內(nèi)容。只有當(dāng)存在了一個能作用域子圖層的變換它才真正存在。CATransformLayer并不平面化它的子圖層，所以它能夠用于構(gòu)造一個層級的3D結(jié)構(gòu)，比如我的手臂示例。

用代碼創(chuàng)建一個手臂需要相當(dāng)多的代碼，所以我就演示得更簡單一些吧：在第五章的立方體示例，我們將通過旋轉(zhuǎn)camara來解決圖層平面化問題而不是像立方體示例代碼中用的sublayerTransform。這是一個非常不錯的技巧，但是只能作用域單個對象上，如果你的場景包含兩個立方體，那我們就不能用這個技巧單獨旋轉(zhuǎn)他們了。

那么，就讓我們來試一試CATransformLayer吧，第一個問題就來了：在第五章，我們是用多個視圖來構(gòu)造了我們的立方體，而不是單獨的圖層。我們不能在不打亂已有的視圖層次的前提下在一個本身不是有寄宿圖的圖層中放置一個寄宿圖圖層。我們可以創(chuàng)建一個新的UIView子類寄宿在CATransformLayer（用+layerClass方法）之上。但是，為了簡化案例，我們僅僅重建了一個單獨的圖層，而不是使用視圖。這意味著我們不能像第五章一樣在立方體表面顯示按鈕和標(biāo)簽，不過我們現(xiàn)在也用不到這個特性。

清單6.5就是代碼。我們以我們在第五章使用過的相同基本邏輯放置立方體。但是并不像以前那樣直接將立方面添加到容器視圖的宿主圖層，我們將他們放置到一個CATransformLayer中創(chuàng)建一個獨立的立方體對象，然后將兩個這樣的立方體放進(jìn)容器中。我們隨機地給立方面染色以將他們區(qū)分開來，這樣就不用靠標(biāo)簽或是光亮來區(qū)分他們。圖6.5是運行結(jié)果。

清單6.5 用CATransformLayer裝配一個3D圖層體系

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (CALayer *)faceWithTransform:(CATransform3D)transform
{
  //create cube face layer
  CALayer *face = [CALayer layer];
  face.frame = CGRectMake(-50, -50, 100, 100);

  //apply a random color
  CGFloat red = (rand() / (double)INT_MAX);
  CGFloat green = (rand() / (double)INT_MAX);
  CGFloat blue = (rand() / (double)INT_MAX);
  face.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;

  ?//apply the transform and return
  face.transform = transform;
  return face;
}

- (CALayer *)cubeWithTransform:(CATransform3D)transform
{
  //create cube layer
  CATransformLayer *cube = [CATransformLayer layer];

  //add cube face 1
  CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);
  [cube addSublayer:[self faceWithTransform:ct]];

  //add cube face 2
  ct = CATransform3DMakeTranslation(50, 0, 0);
  ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
  [cube addSublayer:[self faceWithTransform:ct]];

  //add cube face 3
  ct = CATransform3DMakeTranslation(0, -50, 0);
  ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
  [cube addSublayer:[self faceWithTransform:ct]];

  //add cube face 4
  ct = CATransform3DMakeTranslation(0, 50, 0);
  ct = CATransform3DRotate(ct, -M_PI_2, 1, 0, 0);
  [cube addSublayer:[self faceWithTransform:ct]];

  //add cube face 5
  ct = CATransform3DMakeTranslation(-50, 0, 0);
  ct = CATransform3DRotate(ct, -M_PI_2, 0, 1, 0);
  [cube addSublayer:[self faceWithTransform:ct]];

  //add cube face 6
  ct = CATransform3DMakeTranslation(0, 0, -50);
  ct = CATransform3DRotate(ct, M_PI, 0, 1, 0);
  [cube addSublayer:[self faceWithTransform:ct]];

  //center the cube layer within the container
  CGSize containerSize = self.containerView.bounds.size;
  cube.position = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);

  //apply the transform and return
  cube.transform = transform;
  return cube;
}

- (void)viewDidLoad
{?
  [super viewDidLoad];

  //set up the perspective transform
  CATransform3D pt = CATransform3DIdentity;
  pt.m34 = -1.0 / 500.0;
  self.containerView.layer.sublayerTransform = pt;

  //set up the transform for cube 1 and add it
  CATransform3D c1t = CATransform3DIdentity;
  c1t = CATransform3DTranslate(c1t, -100, 0, 0);
  CALayer *cube1 = [self cubeWithTransform:c1t];
  [self.containerView.layer addSublayer:cube1];

  //set up the transform for cube 2 and add it
  CATransform3D c2t = CATransform3DIdentity;
  c2t = CATransform3DTranslate(c2t, 100, 0, 0);
  c2t = CATransform3DRotate(c2t, -M_PI_4, 1, 0, 0);
  c2t = CATransform3DRotate(c2t, -M_PI_4, 0, 1, 0);
  CALayer *cube2 = [self cubeWithTransform:c2t];
  [self.containerView.layer addSublayer:cube2];
}
@end