iOS 利用CATransform3D制作立方体
1 #import <UIKit/UIKit.h>
2 #import <QuartzCore/QuartzCore.h>
3
4 @interface BoxViewController : UIViewController
5 @property (nonatomic, readwrite, strong) CALayer *topLayer;
6 @property (nonatomic, readwrite, strong) CALayer *bottomLayer;
7 @property (nonatomic, readwrite, strong) CALayer *leftLayer;
8 @property (nonatomic, readwrite, strong) CALayer *rightLayer;
9 @property (nonatomic, readwrite, strong) CALayer *frontLayer;
10 @property (nonatomic, readwrite, strong) CALayer *backLayer;
11 @end
1 #import "BoxViewController.h"
2
3 @implementation BoxViewController
4
5 const CGFloat kSize = 100.;
6 const CGFloat kPanScale = 1./100.;
7
8 - (CALayer *)layerWithColor:(UIColor *)color
9 transform:(CATransform3D)transform {
10 CALayer *layer = [CALayer layer];
11 layer.backgroundColor = [color CGColor];
12 layer.bounds = CGRectMake(0, 0, kSize, kSize);
13 layer.position = self.view.center;
14 layer.transform = transform;
15 [self.view.layer addSublayer:layer];
16 return layer;
17 }
18
19 static CATransform3D MakePerspetiveTransform() {
20 CATransform3D perspective = CATransform3DIdentity;
21 perspective.m34 = -1./2000.;
22 return perspective;
23 }
24
25 - (void)viewDidLoad {
26 [super viewDidLoad];
27
28 CATransform3D transform;
29 transform = CATransform3DMakeTranslation(0, -kSize/2, 0);
30 transform = CATransform3DRotate(transform, M_PI_2, 1.0, 0, 0);
31 self.topLayer = [self layerWithColor:[UIColor redColor]
32 transform:transform];
33
34 transform = CATransform3DMakeTranslation(0, kSize/2, 0);
35 transform = CATransform3DRotate(transform, M_PI_2, 1.0, 0, 0);
36 self.bottomLayer = [self layerWithColor:[UIColor greenColor]
37 transform:transform];
38
39 transform = CATransform3DMakeTranslation(kSize/2, 0, 0);
40 transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
41 self.rightLayer = [self layerWithColor:[UIColor blueColor]
42 transform:transform];
43
44 transform = CATransform3DMakeTranslation(-kSize/2, 0, 0);
45 transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
46 self.leftLayer = [self layerWithColor:[UIColor cyanColor]
47 transform:transform];
48
49 transform = CATransform3DMakeTranslation(0, 0, -kSize/2);
50 transform = CATransform3DRotate(transform, M_PI_2, 0, 0, 0);
51 self.backLayer = [self layerWithColor:[UIColor yellowColor]
52 transform:transform];
53
54 transform = CATransform3DMakeTranslation(0, 0, kSize/2);
55 transform = CATransform3DRotate(transform, M_PI_2, 0, 0, 0);
56 self.frontLayer = [self layerWithColor:[UIColor magentaColor]
57 transform:transform];
58
59 self.view.layer.sublayerTransform = MakePerspetiveTransform();
60
61 UIGestureRecognizer *g = [[UIPanGestureRecognizer alloc]
62 initWithTarget:self
63 action:@selector(pan:)];
64 [self.view addGestureRecognizer:g];
65 }
66
67 - (void)pan:(UIPanGestureRecognizer *)recognizer {
68 CGPoint translation = [recognizer translationInView:self.view];
69 CATransform3D transform = MakePerspetiveTransform();
70 transform = CATransform3DRotate(transform,
71 kPanScale * translation.x,
72 0, 1, 0);
73 transform = CATransform3DRotate(transform,
74 -kPanScale * translation.y,
75 1, 0, 0);
76 self.view.layer.sublayerTransform = transform;
77 }
78
79 @end
第59行的 self.view.layer.sublayerTransform = MakePerspetiveTransform(); 是给self.view.layer的子图层添加 景深效果，之所以有景深效果，是因为perspective.m34 = -1./2000.
m34的值越接近0，则景深效果越明显。
上面这种方法称之为透视变形。
还有一种方法：利用CATransformLayer制作立方体
1 #import <UIKit/UIKit.h>
2 #import <QuartzCore/QuartzCore.h>
3
4 @interface BoxTransformViewController : UIViewController
5 @property (nonatomic, readwrite, strong) CALayer *contentLayer;
6 @property (nonatomic, readwrite, strong) CALayer *topLayer;
7 @property (nonatomic, readwrite, strong) CALayer *bottomLayer;
8 @property (nonatomic, readwrite, strong) CALayer *leftLayer;
9 @property (nonatomic, readwrite, strong) CALayer *rightLayer;
10 @property (nonatomic, readwrite, strong) CALayer *frontLayer;
11 @property (nonatomic, readwrite, strong) CALayer *backLayer;
12
13 @end
1 #import "BoxTransformViewController.h"
2
3 @implementation BoxTransformViewController
4
5 const CGFloat kSize = 100.;
6 const CGFloat kPanScale = 1./100.;
7
8 - (CALayer *)layerAtX:(CGFloat)x y:(CGFloat)y z:(CGFloat)z
9 color:(UIColor *)color
10 transform:(CATransform3D)transform {
11 CALayer *layer = [CALayer layer];
12 layer.backgroundColor = [color CGColor];
13 layer.bounds = CGRectMake(0, 0, kSize, kSize);
14 layer.position = CGPointMake(x, y);
15 layer.zPosition = z;
16 layer.transform = transform;
17 [self.contentLayer addSublayer:layer];
18 return layer;
19 }
20
21 static CATransform3D MakeSideRotation(CGFloat x, CGFloat y, CGFloat z) {
22 return CATransform3DMakeRotation(M_PI_2, x, y, z);
23 }
24
25 - (void)viewDidLoad {
26 [super viewDidLoad];
27 CATransformLayer *contentLayer = [CATransformLayer layer];
28 contentLayer.frame = self.view.layer.bounds;
29 CGSize size = contentLayer.bounds.size;
30 contentLayer.transform =
31 CATransform3DMakeTranslation(size.width/2, size.height/2, 0);
32 [self.view.layer addSublayer:contentLayer];
33
34 self.contentLayer = contentLayer;
35
36 self.topLayer = [self layerAtX:0 y:-kSize/2 z:0
37 color:[UIColor redColor]
38 transform:MakeSideRotation(1, 0, 0)];
39
40 self.bottomLayer = [self layerAtX:0 y:kSize/2 z:0
41 color:[UIColor greenColor]
42 transform:MakeSideRotation(1, 0, 0)];
43
44 self.rightLayer = [self layerAtX:kSize/2 y:0 z:0
45 color:[UIColor blueColor]
46 transform:MakeSideRotation(0, 1, 0)];
47
48 self.leftLayer = [self layerAtX:-kSize/2 y:0 z:0
49 color:[UIColor cyanColor]
50 transform:MakeSideRotation(0, 1, 0)];
51
52 self.backLayer = [self layerAtX:0 y:0 z:-kSize/2
53 color:[UIColor yellowColor]
54 transform:CATransform3DIdentity];
55
56 self.frontLayer = [self layerAtX:0 y:0 z:kSize/2
57 color:[UIColor magentaColor]
58 transform:CATransform3DIdentity];
59
60 UIGestureRecognizer *g = [[UIPanGestureRecognizer alloc]
61 initWithTarget:self
62 action:@selector(pan:)];
63 [self.view addGestureRecognizer:g];
64 }
65
66 - (void)pan:(UIPanGestureRecognizer *)recognizer {
67 CGPoint translation = [recognizer translationInView:self.view];
68 CATransform3D transform = CATransform3DIdentity;
69 transform = CATransform3DRotate(transform,
70 kPanScale * translation.x,
71 0, 1, 0);
72 transform = CATransform3DRotate(transform,
73 -kPanScale * translation.y,
74 1, 0, 0);
75 self.view.layer.sublayerTransform = transform;
76 }
77
78 @end
它同样实现了立方体的3维旋转效果，但是如果把代码中的
CATransformLayer *contentLayer = [CATransformLayer layer]; 改成 CALayer *contentLayer = [CALayer layer];
旋转的效果将是下面这种，“立方体”成扁平的了。
如果不是因为有CATransformLayer，那么上述代码中的添加立方体的各个面时，用到的zPosition只能用于表示图层的显示顺序，而无法用来决定空间定位。
