在图层上使用CATransform3D制做三维动画-b
在UIView上,我们可以使用CGAffineTransform来对视图进行:平移(translation),旋转(Rotation),缩 放(scale),倾斜(Invert)操作,但这些操作是没有动态立体效果的, 这只能称为二维变形.而在图层中,我们可以使用CATransform3D进行"视角旋转"来完成三维变形的效果,但这常称为2.5D,而非真正意义上的 3D,因为他不能让图层真正成为三维对象,而只是模拟出三维的动画效果.
请看三维动画效果:
下面我就来一步一步的来实现它.
1.从图中的显示效果来看,我们需要创建六个图层,来表示一个立体图形六个不同的面.并且创建一个CATransformLayer类来作为容器:
/**底部容器*/@property (nonatomic,strong) CATransformLayer *contentLayer;/**上面*/@property (nonatomic,strong) CALayer *topLayer;/**下面*/@property (nonatomic,strong) CALayer *bottomLayer;/**左面*/@property (nonatomic,strong) CALayer *leftLayer;/**右面*/@property (nonatomic,strong) CALayer *rightLayer;/**前面*/@property (nonatomic,strong) CALayer *frontLayer;/**后面*/@property (nonatomic,strong) CALayer *backLayer;
通常情况下,像这种批量创建对象的工作,不要做傻傻的码农,要学会封装,这样我们只需要传入图层所必须的变量参数就可以创建一个图层了.
- (CALayer *)layerAtX:(CGFloat)x y:(CGFloat)y z:(CGFloat)z color:(UIColor *)color transform:(CATransform3D)transform{ CALayer *layer = [CALayer layer]; layer.backgroundColor = color.CGColor; layer.bounds = CGRectMake(0, 0, 100, 100); layer.position = CGPointMake(x, y); layer.zPosition = z; layer.transform = transform; [self.contentLayer addSublayer:layer]; return layer; }
其中,我要说一下上面代码中layer的zPosition与transfrom属性,在这个例子中,我会使用CATransformLayer 类,这个类是CALayer的子类,在官方文档上有一句话是这么描述的"CATransformlayer objects are used to create sure 3D layer hierarchies".那他到底和CALayer有什么区别呢?是这样的.在CALayer中的zPosition属性,如果只使用CALayer, 那么zPosition只能用于计算图层的显示顺序,这样会使图形看起来是扁平的.而在CATransformLayer这个类当中,zPosition 就可以用来决定空间位置.他会让图形的position不限于X,Y轴上,也可以在Z轴上设置相应值来让图形添加景深,从而让图形具有立体效果.所 以,x,y,z分别是X轴,Y轴,Z轴方向的值.
下面说说本文的核心部分:CALayer的transfrom属性:这个属性主要是操作CATranfrom3D类对图层进行三维变形.在我们这个例子中,主要是对图层进行旋转,所以着重讲一下CATranfrom3D类当中进行3D旋转的方法:
CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
可以看出来,这是一个c语言封装好的函数,里面的参数我来说明:第一个参数:里面的角度是图层需要旋转的角度,是以弧度为单位,我列举一下几个常用 的:M_PI是表示180度,M_PI_2表示90度,M_PI_4表示45度.后面的三个参数x,y,z:我们知道,在二维形变中,旋转效果是围绕着一 个点进行变化的,而在三维变化中,却是围绕着一条轴.而这三个参数在立体平面中的坐标系中确定一个点,这个点与圆点(左上角)的连线确定一条轴,我举一个 特殊的例子:比如绕着y轴旋转45度?绕着y轴旋转,那么必然这三个参数确定的点在Y轴上,在Y轴上,那么其他值必然为0,所以里面的参数应该这样 填:CATransform3DMakeRotation (M_PI_4, 0, 1, 0);
好了,那么现在初始化CATransformLayer,然后将六个图层添加到这个容器中.
// 创建CATransformLayer对象CATransformLayer *contentLayer = [CATransformLayer layer];contentLayer.frame =self.view.layer.bounds;CGSize size = contentLayer.bounds.size;contentLayer.transform = CATransform3DMakeTranslation(size.width / 2, size.height / 2, 0);self.contentLayer = contentLayer;[self.view.layer addSublayer:contentLayer];// 初始化六个图层 // 顶部与底部的沿着x轴旋转90度 self.topLayer = [self layerAtX:0 y:-kSize/2 z:0 color:[UIColor redColor] transform:CATransform3DMakeRotation(M_PI_2, 1, 0, 0)]; self.bottomLayer = [self layerAtX:0 y:kSize/2 z:0 color:[UIColor greenColor] transform:CATransform3DMakeRotation(M_PI_2, 1, 0, 0)]; // 左边与右边的沿着y轴旋转90度 self.leftLayer = [self layerAtX:-kSize / 2 y:0 z:0 color:[UIColor blueColor] transform:CATransform3DMakeRotation(M_PI_2, 0, 1, 0)]; self.rightLayer = [self layerAtX:kSize/2 y:0 z:0 color:[UIColor blackColor] transform:CATransform3DMakeRotation(M_PI_2, 0, 1, 0)]; // 前面与后面的不需要变化,所以使用CATransform3DIdentity self.frontLayer = [self layerAtX:0 y:0 z:kSize / 2 color:[UIColor brownColor] transform:CATransform3DIdentity]; self.backLayer = [self layerAtX:0 y:0 z:-kSize / 2 color:[UIColor brownColor] transform:CATransform3DIdentity];
说明一点:kSize 是我定义的一个宏,表示的是这个正方体的边长.
现在的视图上显示的是什么效果呢
为什么只显示前面图层给的brownColor呢?这就是对的,由于旋转90度后,上下与左右都收在前面图层的四侧,与视图垂直,所以我们看不到,那么我就给一个pan手势,随着手指的移动,旋转这个立体图形.
- (void)pan:(UIPanGestureRecognizer *)recognizer{ //获取到的是手指移动后,在相对坐标中的偏移量(以手指接触屏幕的第一个点为坐标原点)CGPoint translation = [recognizer translationInView:self.view];CATransform3D transform = CATransform3DIdentity;transform = CATransform3DRotate(transform, translation.x * 1 / 100, 0, 1, 0); transform = CATransform3DRotate(transform, translation.y * - 1 / 100, 1, 0, 0); self.view.layer.sublayerTransform = transform; }
在图层上使用CATransform3D制做三维动画-b相关推荐
- iOS在图层上使用CATransform3D制做三维动画
iOS在图层上使用CATransform3D制做三维动画 http://mp.weixin.qq.com/s?__biz=MzIwOTQ3NzU0Mw==&mid=2247483768& ...
- Java 3D编程实践_Java 3D编程实践——网络上的三维动画[学习笔记]
评论 # re: Java 3D编程实践--网络上的三维动画[学习笔记] 2006-08-24 23:41 gy # re: Java 3D编程实践--网络上的三维动画[学习笔记] 2007-03-2 ...
- 线上展示工具:Blender制作三维动画和产品建模
3D动画技术在计算机三维技术不断发展的时候实现了飞跃性的进展,三维动画.产品三维动画.工业动画.企业动画.宣传动画等制作对行业有着重大意义.商迪3D通过行业技术积累丰富的经验,3D动画.材质贴图.建模 ...
- oc实时渲染的图如何导出_如何使用C4D制作逼真的循环三维动画
点击上方蓝字关注我哦! 嗨 朋友 又到周五了,周末打算干啥?睡觉-玩游戏(放松休息).约朋友(经营感情).回家(看望父母).充电(优化升级)总之怎么放松怎么来.无论你周末做怎样的计划但只要你想充电,就 ...
- 三维动画设计与制作【1】
1.3dsmax5属于(). A.三维软件 B.二维软件 C.文字处理软件 D.排版软件 2.如何在3dsmax5中快速的制作一个苹果(). A.Bevel B.Lathe(车削) C.Taper D ...
- 计算机动画制作流程文字版,常见的三维动画制作流程总结
原标题:常见的三维动画制作流程总结 三维动画制作,随着计算机软硬件技术的发展而产生的一新兴技术.三维动画软件在计算机中首先建立一个虚拟的世界,设计师在这个虚拟的三维世界中按照要表现的对象的形状尺寸建立 ...
- 三维动画制作流程细节
随着三维技术的成熟,三维动画运用到各种宣传手法中,三维动画带给人不一样的视觉体验.今天江苏风雷传媒给大家讲解三维动画的整个流程细节: 1.前期策划 1)剧本,造型设定,故事板也称做为脚本. 2)概念设 ...
- fiash星空动画制作_三维动画制作的详细流程
三维动画制作的详细流程: 随着互联网的发展,三维动画技术更新,三维动画制作技术在生活中运用十分广泛,我们经常在一些电视广告,影视电影中会看到一些三维特效,因为震撼的真实感很受大众喜欢.三维动画技术让视 ...
- 与虫子尾交3d动画网站_不容错过的三维动画设计展!快来pick吧!
3D是英文"3 Dimensions"的简称,中文是指三维.三个维度.三个坐标,即有长.宽.高. 在设计方面来讲,3D多被我们应用在动画.影视制作等设计制作方面.随着科技的发展,大 ...
- 计算机动画整个的发展历史,三维动画的发展史
原标题:三维动画的发展史 三维动画又称为3D动画,是随计算机软硬件技术的发展而产生的一种新兴技术.南京三维动画在计算机中先建立了一个虚构的世界,然后设计师在这个虚拟的三维世界中按照要表现的对象的形状尺 ...
最新文章
- mysql的varchar要根据实际长度来申请
- java访问器_Java中的访问器方法
- 自定义检验注解_多注解自定义参数校验
- [nssl1320][jzoj cz 2108] 买装备 {dfs}
- 华为模拟器eNSP安装教程
- 文字转语音怎么真人发声
- 深度学习是什么,深度学习概念的基本理解?
- 阿里云服务器价格表:第7代云服务器ECS收费价格表
- db2配置、db和dbm
- 视频音轨音量是否为0检测过程
- 1002 图论专练 解题报告
- SLife 共享生活:去中心化的线下商业交易系统
- 导入sql文件报错:MySQL server has gone away 以及解决方法
- 离散数学实验2关联矩阵相邻矩阵
- 赫宝铁甲格斗机器人系列_【为老铁打call】最直白的常规格斗机器人类型解说!以后别再说你不懂格斗机器人...
- WEKA算法解析 -- PART决策树
- 如何实现点击按钮后禁用按钮的功能?
- 桌面程序图标固定到开始屏幕无反应
- Zookeeper安装与可视化客户端详细使用教程
- 图解IFRS9 金融工具(9) 套期会计概述