iOS 3D立方体

作者: e40c669177be | 来源:发表于2016-09-07 16:31 被阅读433次
    立方体.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动画总结+思维导图软件

    相关文章

      网友评论

      本文标题:iOS 3D立方体

      本文链接:https://www.haomeiwen.com/subject/sxsrettx.html