zoukankan      html  css  js  c++  java
  • 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只能用于表示图层的显示顺序,而无法用来决定空间定位。

    
    
    
  • 相关阅读:
    Jessica's Reading Problem POJ
    FatMouse and Cheese HDU
    How many ways HDU
    Humble Numbers HDU
    Doing Homework again
    Stacks of Flapjacks UVA
    Party Games UVA
    24. 两两交换链表中的节点
    面试题 03.04. 化栈为队
    999. 可以被一步捕获的棋子数
  • 原文地址:https://www.cnblogs.com/oumygade/p/4482395.html
Copyright © 2011-2022 走看看