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变换

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

-（void）scrollViewDidEndDecelerating:（UIScrollView *）scrollView{//改变选中页序号[self changeIndex];//3D变幻恢复原状态for （UIView * view in _viewArray） {view.layer.transform=CATransform3DIdentity;}}

对了，记得添加一个很重要的透视变换函数，核心在于仿射矩阵的m34属性，这样才会产生远小近大的3D效果，让动画更炫酷

//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有所帮助。