CATransform3D 立體旋轉的效果

作者: 嗯哎嘶唠咯 | 来源:发表于2017-07-07 14:59 被阅读27次

CATransform3D 立體旋轉的效果
截拳之家·譚泰利|髖關節旋轉和肩部的伸展
旋轉
格物第一百四十日
3D动画实现总结
CATransform3D的介绍以及3D动画的实现
《咖啡室的動人時光》
一一與旋轉屋
旋轉吧旋轉吧宇宙啊宇宙也為你將轉個不停
CATransform3D遇到的坑

今天看了篇帖子，学习了一下CATransform3D 的使用。

废话不多说，先上效果图：

7月-07-2017 14-55-51.gif

talk is cheap show me the code(帖子中有详细的解释，不在BB)：

- (void)viewDidLoad {
    [super viewDidLoad];
    
   viewFram = self.view.bounds;
   center_Y = (viewFram.size.height)/2;
   center_X = viewFram.size.width/2;
   angel = CGPointZero;
    
    // 1 创建testVeiw
    testView = [[UIView alloc]initWithFrame:CGRectMake(0, center_Y - 50, viewFram.size.width, 100)];
    testView.backgroundColor = [UIColor redColor];
    [self.view addSubview:testView];

    // 2 testView  添加移动手势
    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
    [testView addGestureRecognizer:panGesture];

    // 3 添加6个点
    [self addSixPointView];
}


- (void)addSixPointView{
    
    CATransform3D diceTransform = CATransform3DIdentity;
    
    // 1
    UIImageView *imgView1 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"dice1"]];
    imgView1.frame = CGRectMake(center_X-50, 0, 100, 100);
    // 向Z轴平移50 （向屏幕外）
    diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50);
    imgView1.layer.transform = diceTransform;
    
    // 6
    UIImageView *imgView6 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"dice6"]];
    imgView6.frame = CGRectMake(center_X-50, 0, 100, 100);
    diceTransform = CATransform3DTranslate(CATransform3DIdentity, 0, 0, -50);
    imgView6.layer.transform = diceTransform;
    
    // 2
    UIImageView *imgView2 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"dice2"]];
    imgView2.frame = CGRectMake(center_X-50, 0, 100, 100);
    diceTransform = CATransform3DRotate(CATransform3DIdentity, -M_PI_2, 0, 1, 0);
    diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50);
    imgView2.layer.transform = diceTransform;

    // 5
    UIImageView *imgView5 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"dice5"]];
    imgView5.frame = CGRectMake(center_X-50, 0, 100, 100);
    diceTransform = CATransform3DRotate(CATransform3DIdentity, -M_PI_2, 0, 1, 0);
    diceTransform = CATransform3DTranslate(diceTransform, 0, 0, -50);
    imgView5.layer.transform = diceTransform;
    
    // 3
    UIImageView *imgView3 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"dice3"]];
    imgView3.frame = CGRectMake(center_X-50, 0, 100, 100);
    diceTransform = CATransform3DRotate(CATransform3DIdentity, -M_PI_2, 1, 0, 0);
    diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50);
    imgView3.layer.transform = diceTransform;
    
    // 4
    UIImageView *imgView4 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"dice4"]];
    imgView4.frame = CGRectMake(center_X-50, 0, 100, 100);
    diceTransform = CATransform3DRotate(CATransform3DIdentity, M_PI_2, 1, 0, 0);
    diceTransform = CATransform3DTranslate(diceTransform, 0, 0, 50);
    imgView4.layer.transform = diceTransform;
    
    [testView addSubview:imgView1];
    [testView addSubview:imgView2];
    [testView addSubview:imgView3];
    [testView addSubview:imgView4];
    [testView addSubview:imgView5];
    [testView addSubview:imgView6];
    
}

- (void)panAction:(UIPanGestureRecognizer *)panGesture{
    
    CGPoint point = [panGesture translationInView:testView];
    CGFloat angel_x = angel.x + point.x/30;
    CGFloat angel_y = angel.y - point.y/30;
    
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1 /500;
    transform = CATransform3DRotate(transform,angel_x , 0, 1, 0);
    transform = CATransform3DRotate(transform, angel_y, 1, 0, 0);
    testView.layer.sublayerTransform = transform;
    
    if (panGesture.state == UIGestureRecognizerStateEnded) {
        angel.x = angel_x;
        angel.y = angel_y;
    }
    
}