iOS 3D立方体

立方体.gif

3D动画总结.png

ok,多了不介绍了,直接上代码,敲一遍会比看有效果的多

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface ViewController ()

@property (nonatomic, strong) UIView *containView;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from
//包含所有view的视图,用来做拖拽处理,和所有子视图的移动
_containView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
_containView.center = self.view.center;
CATransform3D trans = CATransform3DIdentity;
trans.m34 = 1/ 500;
_containView.layer.transform = trans;

#pragma mark ---底部背对着我们的视图
[self.view addSubview:_containView];
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view1.backgroundColor = [UIColor purpleColor];
[_containView addSubview:view1];

#pragma mark ---右侧的视图
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view2.backgroundColor = [UIColor yellowColor];
//因为旋转是根据锚点,也就是view2的中心点旋转的,所以先将视图往x轴和z轴各偏移(200 /2)
trans = CATransform3DTranslate(trans, 100, 0, 100);
//绕y轴旋转90度
trans = CATransform3DRotate(trans, M_PI_2, 0, 1, 0);

view2.layer.transform = trans;
[_containView addSubview:view2];
#pragma mark ---左侧的视图 (只需要将view2沿x轴移动-100,沿z轴移动100,然后沿)
UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view3.backgroundColor = [UIColor blueColor];
//CATransform3DTranslate 和 CATransform3DMakeTranslation区别:使用make的是不对上面效果进行叠加,不使用make是对上面视图效果进行叠加
trans = CATransform3DMakeTranslation(-100, 0, 100);
trans = CATransform3DRotate(trans, M_PI_2, 0, 1, 0);

  // trans = CATransform3DTranslate(trans, 0, 0, -200);
view3.layer.transform = trans;
[_containView addSubview:view3];

UIView *view4 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view4.backgroundColor = [UIColor grayColor];
[_containView addSubview:view4];

trans = CATransform3DMakeTranslation(0, -100, 100);
trans = CATransform3DRotate(trans, M_PI_2, 1, 0, 0);
//    trans = CATransform3DRotate(trans, M_PI_2, 1, 0, 0);
//    trans = CATransform3DTranslate(trans, 0, 100, 100);
view4.layer.transform = trans;
//
UIView *view5 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view5.backgroundColor = [UIColor blackColor];
[_containView addSubview:view5];
trans = CATransform3DMakeTranslation(0, 100, 100);
trans = CATransform3DRotate(trans, M_PI_2, 1, 0, 0);

 // trans = CATransform3DTranslate(trans, 0, 0, -200);
view5.layer.transform = trans;

//
  UIView *view6 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view6.backgroundColor = [UIColor greenColor];
[_containView addSubview:view6];
//    trans = CATransform3DRotate(trans, M_PI_2, 0, 1, 0);
//    trans = CATransform3DTranslate(trans, -100, 0, -100);
trans = CATransform3DMakeTranslation(0, 0, 200);
view6.layer.transform = trans;

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(changeAngle:)];
[_containView addGestureRecognizer:pan];

}

-(void)changeAngle:(UIPanGestureRecognizer *)sender{
//返回视图拖动的像素
   CGPoint point =  [sender translationInView:_containView];
//point.x/30可以决定拖动的时候旋转的速度
CGFloat angel = -M_PI_4 + point.x/30;
CGFloat angel2 = -M_PI_4 - point.y/ 30 ;

CATransform3D tran = CATransform3DIdentity;
tran.m34 = -1/ 500;
tran = CATransform3DRotate(tran, angel, 0, 1, 0);
tran = CATransform3DRotate(tran, angel2, 1, 0, 0);
// sublayerTransform: 它能够影响到它所有的直接子图层. 就是说可以一次性对这些图层的容器做变换, 然后所有的子图层都集成这个变换方法.
_containView.layer.sublayerTransform = tran;

}

注释掉的3d变化方法整体也可以构造立方体
demo + iOS动画总结+思维导图软件