iOS动画特效之立方体翻转

先来看看效果：

下面进入正题，是时候展现真正的技术了：

首先在控制器里添加一个scrollView，再在scrollView上的对应位置上添加要展示的imageView(立方体视图组)，当然也可以放上其它子控制器的view实现更多功能这个随意不是重点

//*******添加scrollView*******

[self createScrollView];

//******创建立方体视图组******

[self createCubicViewArray];

//添加视图到scrollView上

for (int i=0; i<_viewArray.count; i++) {

UIImageView *transView=_viewArray[i];

//视图在scrollView上对应的位置

transView.x=self.view.bounds.size.width * i;

监听scrollView的滑动事件，在这里要先获取到显示的当前页、上一页、下一页，然后让这三个页面同时做3DTransform变换

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变换，不然滑快了会出现页面错乱