广

IOS开发

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    iOS动画特效之立方体翻转

    2018-04-07 07:49:06 次阅读 稿源:互联网
    广告

    先来看看效果:

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

    首先在控制器里添加一个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有所帮助。

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告