美文网首页
高级动画学习心得笔记(三)图层几何学

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

作者: 默默_David | 来源:发表于2017-05-23 14:30 被阅读19次

    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属性可以做到自适应屏幕旋转。

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

    相关文章

      网友评论

          本文标题:高级动画学习心得笔记(三)图层几何学

          本文链接:https://www.haomeiwen.com/subject/bmzwxxtx.html