例子代码可以在http://download.csdn.net/detail/worldmatrix/4603488 下载
iOS的UI是基于UIView类的,我们能看到的每个UI元素都是UIView或者UIView的子类。View按树形结构组织起来,树根是UIWindow。
View负责界面的交互和显示,其中显示部分由CALayer来完成。每个UIView包含一个CALayer实例。可以这么认为,UIView本身是不可见的,我们能看到的都是CALayer,UIView只是负责对CALayer进行管理。
UIView的显示设置都是对CALayer属性的封装,但是这层封装掩盖了CALayer提供的3D显示功能。所以我们想让UIView显示3D的效果的话,需要直接操作CALayer。
要操作CALayer对象,首先要在工程中包含QuartzCore.framework,在文件中import <QuartzCore/QuartzCore.h>头文件。QuartzCore.framework中包含了CALayer以及CALayer一些官方子类的定义。
通过设置CALayer的transform属性,可以使CALayer产生3D空间内的平移、缩放、旋转等变化。
第一个例子,绕坐标轴的旋转:
原始场景如图
使用image.layer.transform=CATransform3DMakeRotation(M_PI/6,0,0,1);
绕Z轴旋转30度后的效果
使用image.layer.transform=CATransform3DMakeRotation(M_PI/6,
0, 1, 0); 绕Y轴旋转30度后的效果
使用image.layer.transform=CATransform3DMakeRotation(M_PI/6,
1,0, 0); 绕X轴旋转30度后的效果
能够发现,绕Z轴的旋转比较符合预期,但是绕X轴Y轴的旋转只是在Y轴X轴上进行了一些缩放而已。这是因为,在CALayer的显示系统中,默认的相机使用正交投影,正交投影没有远小近大效果,所以在本例中,只能造成相应轴上的缩放。
第二个例子,透视投影
CALayer默认使用正交投影,因此没有远小近大效果,而且没有明确的API可以使用透视投影矩阵。所幸可以通过矩阵连乘自己构造透视投影矩阵。构造透视投影矩阵的代码如下:
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);
}
CATransform3D CATransform3DPerspect(CATransform3D t, CGPoint center, float disZ)
{
return CATransform3DConcat(t, CATransform3DMakePerspective(center, disZ));
}
这个函数的实现原理要参考计算机图形学的3D变换部分,以后再做解释。现在只需要了解接口的含义,center指的是相机的位置,相机的位置是相对于要进行变换的CALayer的来说的,原点是CALayer的anchorPoint在整个CALayer的位置,例如CALayer的大小是(100, 200),anchorPoint值为(0.5, 0.5),此时anchorPoint在整个CALayer中的位置就是(50,
100),正中心的位置。传入透视变换的相机位置为(0, 0),那么相机所在的位置相对于CALayer就是(50, 100)。如果希望相机在左上角,则需要传入(-50, -100)。disZ表示的是相机离z=0平面(也可以理解为屏幕)的距离。
带透视效果的旋转,效果如下:
CATransform3Drotate =CATransform3DMakeRotation(M_PI/6,1,0,0);
image.layer.transform=CATransform3DPerspect(rotate,CGPointMake(0,0),200);
CATransform3Drotate =CATransform3DMakeRotation(M_PI/6, 0,
1,0);
image.layer.transform=CATransform3DPerspect(rotate,CGPointMake(0,0),200);
CATransform3Drotate =CATransform3DMakeRotation(M_PI/6, 0,0,
1);
image.layer.transform=CATransform3DPerspect(rotate,CGPointMake(0,0),200);
image的默认anchorPoint为(0.5,0.5),也就是在图片中心;眼睛在图片中心点,距屏幕200单位。可以观察到,因为翻转,使图片的不同部分离屏幕距离不同,近大远小的效果使立体感大大提升。饶Z轴的旋转不因为透视产生变化,因为所有的点离屏幕距离相同,所以不会产生近大远小的透视感。
第三,更多的效果。CALayer的旋转和缩放是绕anchorPoint点的,改变anchorPoint的值,可以使Layer绕不同的点而不只是中心点旋转缩放。在构造透视投影矩阵的例子中就可以看到,CATransform3D可以使用CATransform3DConcat函数连接起来以构造更复杂的变换。通过这些方法,可以组合出更多的效果来。下面是个翻转的动画。使用UITimer
- (void)update
{
staticfloatangle =0;
angle +=0.05f;
CATransform3Dtransloate =CATransform3DMakeTranslation(0,0,
-200);
CATransform3Drotate =CATransform3DMakeRotation(angle,0,1,0);
CATransform3Dmat =CATransform3DConcat(rotate, transloate);
image.layer.transform=CATransform3DPerspect(mat,CGPointMake(0,0),500);
}
最后是两个更复杂的例子。第一个是使用四张同样大小的图片围成一个框,让这个框动画旋转。
CATransform3Dmove =CATransform3DMakeTranslation(0,0,160);
CATransform3Dback =CATransform3DMakeTranslation(0,0,
-160);
CATransform3Drotate0 =CATransform3DMakeRotation(-angle,0,1,0);
CATransform3Drotate1 =CATransform3DMakeRotation(M_PI_2-angle,0,1,0);
CATransform3Drotate2 =CATransform3DMakeRotation(M_PI_2*2-angle,0,1,0);
CATransform3Drotate3 =CATransform3DMakeRotation(M_PI_2*3-angle,0,1,0);
CATransform3Dmat0 =CATransform3DConcat(CATransform3DConcat(move, rotate0), back);
CATransform3Dmat1 =CATransform3DConcat(CATransform3DConcat(move, rotate1), back);
CATransform3Dmat2 =CATransform3DConcat(CATransform3DConcat(move, rotate2), back);
CATransform3Dmat3 =CATransform3DConcat(CATransform3DConcat(move, rotate3), back);
image0.layer.transform=CATransform3DPerspect(mat0,CGPointZero,500);
image1.layer.transform=CATransform3DPerspect(mat1,CGPointZero,500);
image2.layer.transform=CATransform3DPerspect(mat2,CGPointZero,500);
image3.layer.transform=CATransform3DPerspect(mat3,CGPointZero,500);
上面的例子都使用UIImage的CALayer,但CALayer产生的动画可以应用在所有的UIView及子类上,下面是个普通界面的立体翻转效果。
floatdis =160*1.732f;
CATransform3Dmove =CATransform3DMakeTranslation(0,0,
dis);
CATransform3Dback =CATransform3DMakeTranslation(0,0,
-dis);
CATransform3Drotate0 =CATransform3DMakeRotation(-angle,0,1,0);
CATransform3Drotate1 =CATransform3DMakeRotation(-angle +M_PI/3.0f,0,1,0);
CATransform3Dmat0 =CATransform3DConcat(CATransform3DConcat(move, rotate0), back);
CATransform3Dmat1 =CATransform3DConcat(CATransform3DConcat(move, rotate1), back);
view0.layer.transform=CATransform3DPerspect(mat0,CGPointZero,500);
view1.layer.transform=CATransform3DPerspect(mat1,CGPointZero,500);
分享到:
相关推荐
<IOS 3D UI --- CALayer的transform扩展>的Sample
iOS开发UI篇—CAlayer层的属性 - 文顶顶 - 博客园1
CALayer-AutoresizingMask 为 iOS CALayer 添加 UIViewAutoresize 支持和快速 UIView 到 CALayer 的转换方法 安装 pod 'CALayer-AutoresizingMask' 用法 不要在这个storyboard或XIB使用自动布局,并使用您需要的...
简单方便的间接实现CALayer的"AutoLayout
通过自定义CALayer,实现星空模拟效果(当然效果一般般)。代码很简单,都在CMLayer类中,仅为大家自定义CALayer并添加相关动画提供一份参考demo。
iOS - 控制动画播放与暂停的CALayer分类
一个用CALayer写的隐式动画Dome 具体请参考 http://www.jianshu.com/p/62dadf22a092 Github地址 https://github.com/DriverWang/YCClock
WBLoadingIndicatorView - 基于CALayer封装加载等待动画
本文稿纯手工翻译,系统讲解CALayer本质以及layer动画。
iOS 3D、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer、Calayer。承办单位,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一...
VBPieChart 基于CALayer的iOS应用动画饼图控件。 使用非常方便,并有自定义标签。
基础用法,方便学习,满足需求。
iOS CALayer 思维导图,超级棒棒哒 iOS CALayer 思维导图,超级棒棒哒
CALayer指南了解CALayer的财产。
Draw and animate your user interfaces using the CALayer and UIKit animations Intercept and handle user touches to create user interface interactivity Create and depict totally custom controls Design ...
IOS软件开发ObjectiveCUIView动画和CALayer动画.ppt
#QCAR-CALayer 使用 Vuforia AR 引擎 使用不同的方法来显示 2D-AR 元素 QCARWebViewController 使用 UIWebView QCARCALayerViewController 使用 CALayer
iOSSnapshotTestCase(以前为 )它能做什么“快照测试用例”采用已配置的UIView或CALayer并使用必要的UIKit或Core Animation方法生成其内容的图像快照。 它将快照与存储在源代码存储库中的“参考图像”进行比较,...
1、CALayer 、 CAShapeLayer 什么是CALayer? CALayer(这里简单地称其为层)。 首先要说的是CALayers 是屏幕上的一个具有可见内容的矩形区域,每个UIView都有一个根CALayer 其子类,如CAGradientLayer,...
强大的 iOS 文本框架,用于显示和编辑富文本。 YYText 是 YYKit 的一个组件。 YYText 与 UILabel 和 UITextView API 兼容。 高性能异步文本布局和渲染,扩展 CoreText 属性,提供更多文本效果。 带有 UIImage、...