CALayer

原创 2015年07月10日 13:46:43

CALayer

CALayer是核心动画的基础,因为核心动画操作的对象不是UIView,而是CALayer。在实现核心动画时,本质上是将CALayer中的内容转换成位图,从而便于图像硬件的操纵。

既然核心动画操作的是CALayer,那么CALayer与UIView之间是什么样的关系?

在创建视图时,视图会创建一个图层,该图层作为视图的根图层(根图层不允许用户创建,但可以添加子图层)。视图在绘图时,会将内容画在自己图层上,当视图在层上完成绘图后,系统会将图层拷贝至屏幕。总的来说,UIView与CALayer之间的关系如下:

1)     CALayer并不是要取代视图,因此不能基于CALayer创建一个独立的可视化组件,图层必须依附视图而存在;

2)     CALayer的设计目的是提供视图的基本可视内容,从而提高动画的执行效率;

3)     CALayer除提供可视的内容外,不能响应事件等;

UIView是有层级关系的,同样图层也就有层级关系,也即可以向某个图层中添加子图层,如下图所示:


1、       CALayer属性

获取当前视图的图层后,可以设置图层的下列属性:

1)     bounds:宽度和高度;

2)     position:位置(默认指中心点)

3)     anchorPoint:锚点(xy的范围为0-1);

4)     backgroundColor:背景色;

5)     borderColor:边框颜色;

6)     borderWidth:边框宽度;

7)     cornerRadius:圆角半径;

8)     contents:内容,设置图片;

虽然CALayer可以设置frame属性,但在设置动画时,使用bounds和position会比较方便,其实改变图层的属性值,就相当于改变了UIView对应的属性值。

锚点中的x,y范围为0-1,分别对应图层尺寸的比例(0~100%),通过比例,锚点并不需要知道图层的具体大小,如下图示


那锚点和position到底有怎样的关系呢?总的来说锚点要与position重合。锚点是位于子图层上的点(子图层范围内),而position点是父图层上的点,在设置position时,系统依据“锚点与position重合”来决定子图层的显示范围。

现在假设父图层的大小为整个屏幕大小(假设为320*480),现需要为其添加子图层,假设子图层大小为320*240,并设置子图层的position属性为(0,0),则子图层在父图层显示的区域是多少呢?



可以看到,只显示了子图层的1/4(图1.1)。position值为(0,0),而锚点为(0.5,05)(默认值),由于锚点与position重合,而锚点默认为子图层的中心点,所以position也就相当于子图层的中心点,由此子图层只能显示1/4。

现在改变子图层的锚点值,使其为(0,0.5),则显示如图1.2所示;令锚点为(0,0.5),则显示如图1.3所示;令锚点为(0,0),则显示如图1.4所示;

          

                                        图1.1                                                                                                       图1.2

             

 

                                    图1.2                                                                                                     图1.3

注意:

1)     在关节动画中可以移动锚点,保证肢体不会分离;

2)     CALayer中使用CGColorRef和CGImageRef数据类型。QuartzCore和CoreGraphics框架可以在iOS和Mac OSX上使用,而UIKit只能在iOS中使用,为了保证可移植性,QuartzCore不能使用UIImage,UIColor等Foundation数据类型;

2、       CALayer隐式动画

每一个UIView内部都默认关联着一个CALayer,称为RootLayer。所有的Root Layer都存在着隐式动画,隐式动画的默认时长为1/4秒。

当修改非RootLayer的部分属性时,相应的修改会自动产生动画效果,能执行隐式动画的属性被称为“可动画属性”,诸如:

1)     bounds:缩放动画;

2)     position:平移动画;

3)     opacity:淡入淡出(改变透明度);

4)     …;

如果要关闭默认的动画效果,可以通过动画事务的方法,如下:

    [CATransaction begin];

    [CATransaction setDisableActions:YES];

    //属性操作....

[CATransaction commit];

3、       CALayer绘图

要在CALayer上绘图,有两种方法:

1)     创建一个CALayer的子类,覆盖drawInContext:方法,可以使用Quartz2DAPI在其中绘图;

2)     设置CALayer的delegate,然后让delegate实现drawLayer:inContext:方法;

注意:

1)     不能再将UIView设置为自定义CALayerdelegate,因为UIView对象已经是Root Layerdelegate

2)     无论使用那种绘图方法,都必须向层显示发送setNeedsDisplay消息,以触发相应的绘图方法;

CALayer、UIView以及上下文之间关系:

1)     当UIView收到setNeedsDisplay消息时,CALayer会准备好一个CGContextRef,然后向它的delegate即UIView发送消息,并且传入已准备好的CGContextRef对象。UIView在drawLayer:inContext:方法中会隐式调用自己的drawRect:方法;

2)     在UIView的drawRect:方法中通过UIGraphicsGetCurrentContext()获取的上下文就是CALayer传入的CGContextRef对象,在drawRect:中完成的所有绘图都会填入CALayer的CGContextRef中,然后被拷贝至屏幕(类似于双缓冲);

3)     CALayer的CGContextRef用的是位图上下文(Bitmap GraphicsContext);

 

 

 

 

 

(一一九)通过CALayer实现阴影、圆角、边框和3D变换

在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果。 下面以一个...
  • xyt8023y
  • xyt8023y
  • 2015年08月12日 20:41
  • 1473

用CALayer绘图

在iOS中绘图,可以使用UIView,也可以使用CALayer。实际上,UIView也是由底层的CALayer完成绘制的工作 UIView和CALayer的关系每个UIView内部都有一个CALay...
  • kyfxbl
  • kyfxbl
  • 2016年02月06日 22:42
  • 795

IOS中CALayer的使用

在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画、关键帧动画、动画...
  • maylorChao
  • maylorChao
  • 2015年01月12日 22:41
  • 20525

CALayer 详细介绍

在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画、关键帧动画、动画...
  • FirstBloodFB
  • FirstBloodFB
  • 2015年03月26日 10:06
  • 822

IOS进阶 - CALayer简单介绍

第一部分:简介 一、什么是CALayer      * 在iOS系统中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView。 ...
  • LXL_815520
  • LXL_815520
  • 2016年07月11日 13:26
  • 1145

CALayer 异步绘制

UIKit的单线程天性意味着寄宿图通畅要在主线程上更新,这意味着绘制会打断用户交互,甚至让整个app看起来处于无响应状态。我们对此无能为力,但是如果能避免用户等待绘制完成就好多了。 针对这个问题,有...
  • bravegogo
  • bravegogo
  • 2016年04月04日 16:37
  • 704

IOS SDK详解之CALayer(一)

原创Blog,转载请注明出处 http://blog.csdn.net/hello_hwc?viewmode=contents 前言:这个系列要更新Core Animation的内容,但是CALaye...
  • Hello_Hwc
  • Hello_Hwc
  • 2015年01月10日 09:03
  • 4651

UIView和CALayer的那些事儿

万剑归宗,UIView和CALayer都是的祖宗都是NSObjet。 继承结构UIView的继承结构为: UIResponder : NSObject。 UIResponder是用来响应事件的,也...
  • ab20514
  • ab20514
  • 2016年02月24日 18:16
  • 470

UIWindow、UIView以及CALayer之间的关系

UIWindow、UIView以及CALayer之间的关系
  • aaaa99996666
  • aaaa99996666
  • 2016年05月11日 20:46
  • 525

CALayer中自定义属性的动画

文章来源:http://write.blog.csdn.net/postedit?ref=toolbar&ticket=ST-95602-frzfq3Pp4n3vrQF7lajc-passport.c...
  • antjumper
  • antjumper
  • 2016年04月20日 14:36
  • 526
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CALayer
举报原因:
原因补充:

(最多只允许输入30个字)