高级动画学习心得笔记(三)图层几何学

3.图层几何学

3.1布局

UIView:  frame    bounds  center

CALayer:frame    bounds  position  anchorPoint

图层中的position对应视图的center,代表同样的值与含义,都代表了相对于父图层anchorPoint所在的位置

当对图层做变换的时候,比如旋转,frame代表了覆盖在图层旋转之后的整个轴对齐的矩形区域,也就是说frame的宽高可能和bounds不一致了

3.2锚点

anchorPoint点(锚点)的值是用相对bounds的比例值来确定的,anchorPoint默认位于图层中心点,即{0.5,0.5},anchorPoint也使用的单位坐标,加入将anchorPoint放在左上角,即{0,0},那么图层将会向右下角的position方向移动

视图的center属性和图层position属性都指定了anchorPoint相对于父图层的位置,图层的anchorPoint通过position来控制它的frame位置,可以认为anchorPoint是用来移动视图图层的句柄

我们创建了一个layerView,通过改变它的anchorPoint(从默认的{0.5,0.5}到{0,0})来观察其它的变化

++++++++++frame:{{20, 20}, {100, 200}},-----bounds:{{0, 0}, {100, 200}},+++++++++layer.frame:{{20, 20}, {100, 200}},----------layer.bounds:{{0, 0}, {100, 200}},++++++++center.x:70.000000,-------center.y:120.000000,++++++++++position.x:70.000000,----------position.y:120.000000,+++++++++anchorPoint.x:0.500000,---------anchorPoint.y:0.500000

第二次++++++++++frame:{{70, 120}, {100, 200}},-----bounds:{{0, 0}, {100, 200}},+++++++++layer.frame:{{70, 120}, {100, 200}},----------layer.bounds:{{0, 0}, {100, 200}},++++++++center.x:70.000000,-------center.y:120.000000,++++++++++position.x:70.000000,----------position.y:120.000000,+++++++++anchorPoint.x:0.000000,---------anchorPoint.y:0.000000

如上数据,我们可以看出center和position都是视图图层的anchorPoint在父视图图层中的位置,单独改变anchorPoint,视图的frame改变,而center和position保持原位置不变

anchorPoint常常用于动画中改变视图的transform,改变anchorPoint之后,视图会围绕anchorPoint来旋转

anchorPoint、position、frame之间的相对关系.

• frame中的X,Y表示sublayer左上角相对于supLayer的左上角的距离

• position中的X,Y表示sublay锚点相对于supLayer的左上角的距离

• anchorPoint中的X,Y表示锚点的x,y的相对距离比例值

当确定锚点,改变frame时, position的值为:

position.x = frame.origin.x + anchorPoint.x * bounds.size.width;

position.y = frame.origin.y + anchorPoint.y * bounds.size.height;

确定锚点, 改变position时, frame的值为:

frame.origin.x = position.x - anchorPoint.x * bounds.size.width;

frame.origin.y = position.y - anchorPoint.y * bounds.size.height;

改变锚点, frame的值变化为

frame.origin.x = - anchorPoint.x * bounds.size.width + position.x;

frame.origin.y = - anchorPoint.y * bounds.size.height + position.y;

影响关系

• 锚点改变, position不影响, frame变化

• frame变化, 锚点不影响, position变化

• position变化, 锚点不影响, frame变化

3.3坐标系

3.3.1 坐标系

和视图一样,图层在图层树当中也是相对于父图层按层级关系放置,一个图层的position依赖于它父图层的bounds,如果父图层发生移动,所有子图层也会跟着移动

如果要知道一个图层的绝对位置,或者是相对于另一个图层的位置,那么可以使用以下方法:

- (CGPoint)convertPoint:(CGPoint)point fromLayer:(CALayer *)layer;

- (CGPoint)convertPoint:(CGPoint)point toLayer:(CALayer *)layer;

- (CGRect)convertRect:(CGRect)rect fromLayer:(CALayer *)layer;

- (CGRect)convertRect:(CGRect)rect toLayer:(CALayer *)layer;

这些方法可以把定义在一个图层坐标系下的点或者矩形转换成另一个图层坐标系下的点或者矩形

3.3.2 翻转的几何结构

常规来讲,ios中,一个图层的position位于父图层的左上角,OS中,是位于左下角,CALayer有一个geometryFlipped属性,如果设置为YES,那么此视图的排版方式将垂直翻转,如ios中,某layer的geometryFlipped属性设置为YES,那么它将会相对于左下角排列

3.3.3 Z坐标轴

和UIView不同,CALayer处于一个三维空间当中,除了position和anchorPoint之外,还有zPosition和anchorPointZ这两个属性,它们都是在Z轴上描述图层位置的浮点类型

zPosition主要用于在三维空间移动和旋转图层,除此之外,zPosition最实用的功能就是改变图层的显示顺序了

我们绘制图层时,默认都是先绘制的显示在底层,如果希望先绘制的显示在前面,那么可以增加zPosition的值,它就会显示在前面了

3.4 Hit Testing

CALayer并不关心任何响应链事件,所以不能直接处理触摸事件或者手势。但是它有一系列的方法帮你处理事件

-(BOOL)containsPoint:(CGPoint)point;

-(CALayer *)hitTest:(CGPoint)point;

containsPoint:接受一个在本土曾坐标系下的CGPoint参数,如果这个点在图层的frame内增返回就返回YES,一般用于在UIView的TouchBegan方法中对图层的坐标进行判断,然后处理需要的结果

hitTest:对应UIView中的hitTest:withEvent:方法,相对应的,hitTest:withEvent:返回的是一个当前视图或者其子视图接受触摸事件的UIView对象,hitTest:则返回图层本身或者其子图层对象,相同的是,如果这个点在图层范围之外,则返回nil,这两个方法都可以直接调用,也可以重写,在不同情境下使用以满足不同的需求

注意:-hitTest:方法的测算顺序严格依赖于图层树当中的图层顺序(和UIView处理事件类似),之前提到的zPosition属性可以改变屏幕上图层的显示顺序,但不能改变事件传递的顺序。这意味着吐过改变了图层的z轴顺序,你会发现将不能检测到最前方的视图点击事件,这是因为被另一个图层遮盖住了,虽然他的zPosition值娇小,但是在图层树中的顺序靠前。

3.5自动布局

UIView中,可以使用UIViewAutoresizingMask或者AutoLayout来实现自动布局.

在Mac OS平台,CALayer有一个叫做layoutManager的属性可以通过CALayoutManager协议和CAConstraintLayoutManager类来实现自动排版,但是它们在ios上并不适用

如果希望手工操作CALayer的布局,在ios中只能使用CALayerDelegate的函数:

-(void)layoutSubLayersOfLayer:(CALayer *)layer.

当图层的bounds发生改变,或者图层的-setNeedsLayout方法被调用的时候,这个函数将会被执行。这使得你可以手动地重新摆放或者重新调整子图层的大小,但是不能像UIView的autoresizingMask好Constraints属性可以做到自适应屏幕旋转。

这也是为什么最好使用视图而不是单独的图层来构建应用程序的另一个重要原因之一。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容