先来看看效果：
下面进入正题，是时候展现真正的技术了：
首先在控制器里添加一个scrollView，再在scrollView上的对应位置上添加要展示的imageView(立方体视图组)，当然也可以放上其它子控制器的view实现更多功能这个随意不是重点
|
1
2
3
4
5
|
//*******添加scrollView******* [self createScrollView];//******创建立方体视图组****** [self createCubicViewArray]; |
|
1
2
3
4
5
6
7
|
//添加视图到scrollView上 for (int i=0; i<_viewArray.count; i++) { UIImageView *transView=_viewArray[i]; //视图在scrollView上对应的位置 transView.x=self.view.bounds.size.width * i; |
监听scrollView的滑动事件，在这里要先获取到显示的当前页、上一页、下一页，然后让这三个页面同时做3DTransform变换
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
#pragma mark - scrollView滑动事件-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ //当前页数 NSInteger currentPage=_currentPage; //当前视图 UIView *currentView=_viewArray[currentPage]; //上一个视图 UIView *lastView=nil; if (currentPage-1>=0) { lastView=_viewArray[currentPage-1]; } //下一个视图控制器视图 UIView *nextView; if (currentPage+1<=3) { nextView=_viewArray[currentPage+1]; } //本次偏移距离 CGFloat currentOffset=scrollView.contentOffset.x-currentPage*self.view.bounds.size.width; //本次偏移角度 CGFloat deltaAngle=currentOffset/self.view.bounds.size.width * M_PI_2; //****************当前视图移动变幻*************** //设置锚点 currentView.layer.anchorPoint=CGPointMake(0.5, 0.5); //向屏幕前方移动 CATransform3D move = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2); //旋转 CATransform3D rotate = CATransform3DMakeRotation(-deltaAngle, 0, 1, 0); //平移 CATransform3D plaintMove=CATransform3DMakeTranslation( currentOffset, 0, 0); //向屏幕后方移动 CATransform3D back = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2); //连接 CATransform3D concat=CATransform3DConcat( CATransform3DConcat(move, CATransform3DConcat(rotate, plaintMove)),back); CATransform3D transform=CATransform3DPerspect(concat, CGPointMake(currentOffset/2, self.view.bounds.size.height), 5000.0f); //添加变幻特效 currentView.layer.transform=transform; //****************下一个视图移动变幻*************** //设置锚点 nextView.layer.anchorPoint=CGPointMake(0.5, 0.5); //向屏幕前方移动 CATransform3D move2 = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2); //旋转 CATransform3D rotate2 = CATransform3DMakeRotation(-deltaAngle+M_PI_2, 0, 1, 0); //平移 CATransform3D plaintMove2=CATransform3DMakeTranslation( currentOffset-self.view.bounds.size.width, 0, 0); //向屏幕后方移动 CATransform3D back2 = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2); //拼接 CATransform3D concat2=CATransform3DConcat( CATransform3DConcat(move2, CATransform3DConcat(rotate2, plaintMove2)),back2); CATransform3D transform2=CATransform3DPerspect(concat2, CGPointMake(self.view.bounds.size.width/2+currentOffset/2, self.view.bounds.size.height), 5000.0f); //添加变幻特效 nextView.layer.transform=transform2; //****************上一个视图移动变幻*************** //设置锚点 lastView.layer.anchorPoint=CGPointMake(0.5, 0.5); //向屏幕前方移动 CATransform3D move3 = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2); //旋转 CATransform3D rotate3 = CATransform3DMakeRotation(-deltaAngle-M_PI_2, 0, 1, 0); //平移 CATransform3D plaintMove3=CATransform3DMakeTranslation( currentOffset+self.view.bounds.size.width, 0, 0); //向屏幕后方移动 CATransform3D back3 = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2); //拼接 CATransform3D concat3=CATransform3DConcat(CATransform3DConcat(move3, CATransform3DConcat(rotate3, plaintMove3)),back3); CATransform3D transform3=CATransform3DPerspect(concat3, CGPointMake(-self.view.bounds.size.width/2+currentOffset/2, self.view.bounds.size.height), 5000.0f); //添加变幻特效 lastView.layer.transform=transform3;} |
这里记得要复原一下3D变换，不然滑快了会出现页面错乱
|
1
2
3
4
5
6
7
8
9
10
11
|
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ //改变选中页序号 [self changeIndex]; //3D变幻恢复原状态 for (UIView * view in _viewArray) { view.layer.transform=CATransform3DIdentity; }} |
对了，记得添加一个很重要的透视变换函数，核心在于仿射矩阵的m34属性，这样才会产生远小近大的3D效果，让动画更炫酷
|
1
2
3
4
5
6
7
8
9
|
//3D透视函数CATransform3D CATransform3DMakePerspective(CGPoint center, float disZ){ CATransform3D transToCenter = CATransform3DMakeTranslation(-center.x, -center.y, 0); CATransform3D transBack = CATransform3DMakeTranslation(center.x, center.y, 0); CATransform3D scale = CATransform3DIdentity; scale.m34 = -1.0f/disZ; return CATransform3DConcat(CATransform3DConcat(transToCenter, scale), transBack);} |
这一篇文章就到这里了，大家有什么意见和问题记得及时反馈，希望本文对大家开发IOS有所帮助。
原文链接：http://www.jianshu.com/p/599af25e8df0
