iOS动画特效之立方体翻转

 更新时间:2016年08月03日 11:18:02   作者:小明大神  
今天起为大家带来iOS动画特效合集之立方体翻转,APP如美女,动画如衣裳,赶紧为她披上漂亮的衣装吧!

先来看看效果:

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

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

相关文章

  • iOS中实现动态区域裁剪图片功能实例

    iOS中实现动态区域裁剪图片功能实例

    图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,下面这篇文章主要给大家介绍了关于iOS中实现动态区域裁剪图片功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起看看吧。
    2017-11-11
  • 浅谈iOS 对于block的一点理解

    浅谈iOS 对于block的一点理解

    本篇文章主要介绍了iOS 对于block的一点理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • iOS开发使用XML解析网络数据

    iOS开发使用XML解析网络数据

    XML解析其实这个概念出现了算够久了,以前javaweb什么到处都在用。这边我们主要大致介绍下,然后在在ios编程如何使用。
    2016-02-02
  • iOS 截取字符串中两个指定字符串中间的字符串方法

    iOS 截取字符串中两个指定字符串中间的字符串方法

    下面小编就为大家分享一篇iOS 截取字符串中两个指定字符串中间的字符串方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • iOS底层探索之自动释放池原理解析

    iOS底层探索之自动释放池原理解析

    这篇文章主要介绍了iOS底层探索之自动释放池,自动释放池的压栈和出栈,通过结构体的构造函数和析构函数触发,自动释放池的本质是__AtAutoreleasePool结构体,包含构造函数和析构函数,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-06-06
  • iOS11&iPhoneX适配&Xcode9打包注意事项

    iOS11&iPhoneX适配&Xcode9打包注意事项

    这篇文章主要介绍了iOS11&iPhoneX适配&Xcode9打包注意事项,需要的朋友可以参考下
    2017-10-10
  • IOS如何在Host App 与 App Extension 之间发送通知

    IOS如何在Host App 与 App Extension 之间发送通知

    这篇文章主要介绍了IOS如何在Host App 与 App Extension 之间发送通知 的相关资料,需要的朋友可以参考下
    2016-03-03
  • iOS开发定时器的三种方法分享

    iOS开发定时器的三种方法分享

    相信在大家开发过程中,常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法。在这个时候,我们就需要用到定时器。然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?下面就通过这篇文章来一起学习学习吧。
    2016-09-09
  • iOS仿新闻tab标题栏效果

    iOS仿新闻tab标题栏效果

    这篇文章主要为大家详细介绍了iOS仿新闻tab标题栏效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • iOS实现账号、密码记住功能

    iOS实现账号、密码记住功能

    这篇文章主要为大家详细介绍了iOS实现账号、密码记住功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论