iOS動畫特效之立方體翻轉_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有所協助。