立方體.gif
3D動畫總結(jié).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 ---右側(cè)的視圖
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view2.backgroundColor = [UIColor yellowColor];
//因為旋轉(zhuǎn)是根據(jù)錨點,也就是view2的中心點旋轉(zhuǎn)的,所以先將視圖往x軸和z軸各偏移(200 /2)
trans = CATransform3DTranslate(trans, 100, 0, 100);
//繞y軸旋轉(zhuǎn)90度
trans = CATransform3DRotate(trans, M_PI_2, 0, 1, 0);
view2.layer.transform = trans;
[_containView addSubview:view2];
#pragma mark ---左側(cè)的視圖 (只需要將view2沿x軸移動-100,沿z軸移動100,然后沿)
UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view3.backgroundColor = [UIColor blueColor];
//CATransform3DTranslate 和 CATransform3DMakeTranslation區(qū)別:使用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可以決定拖動的時候旋轉(zhuǎn)的速度
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變化方法整體也可以構(gòu)造立方體
demo + iOS動畫總結(jié)+思維導圖軟件
