设为首页 加入收藏

TOP

CoreAnimation 图层几何学(一)
2017-10-12 11:06:36 】 浏览:2522
Tags:CoreAnimation 几何学

CoreAnimation 图层几何学


    CoreAnimation 目录

    博客园MakeDown支持不佳,如有需要请进GitHub

    图层几何所讲主要是有关图层的位置,尺寸等几何类属性.

布局

    在UIView中与位置,尺寸有关的属性有 frame bounds center在此不多赘述,在CALayer中同样有与其相对应的属性 frame bounds position 需要注意的是 centerposition 虽然字面表达不一样,但是其功能是一致的,为了更加清晰的展示以上内容,我在故事板中创建一个有色UIView.


图片一(图层几何学)
图片一

    在控制台打印日志:

customView_frame:{{117, 241}, {140, 185}}
customView_bounds:{{0, 0}, {140, 185}}
customView_center:{187, 333.5}
customView_layer_frame:{{117, 241}, {140, 185}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{187, 333.5}

    根据日志所打印内容可知 UIViewCALayer 的布局属性是一一对应的.
    以上内容了解后我们需要直达frame本质上是一个复合的属性,也就是说他是由bounds position transform计算得到的(transform:放大,旋转等).为了证实这件事,我们将上面的有色View旋转一个角度.


图片四(图层几何学)
图片二

    在控制台打印日志:

customView_layer_frame:{{80.128221735089298, 218.39265014993941}, {213.74355652982138, 230.21469970012117}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{187, 333.5}

    通过对比两次打印日志的对比不难发现,当我们将图层旋转后 bounds position 都没有改变,而 frame 却大有改变.那么问题来了,此时的 frame 代表的是什么?我们以customView_layer_frame为 frame 在视图上添加一个新的视图并且将其作为旋转视图的背景.


图片四(图层几何学)
图片三

    图片三与图片二相比我们可以发现, frame实际上代表了覆盖在图层旋转之后的整个轴对齐的矩形区域.

锚点-anchorPoint

    锚点这个词初识是很陌生的,好比航船的锚用来固定航船,图层中的锚点也具有相同的功能,锚点可以 固定 图层,也就是说锚点是图层的句柄.默认情况下锚点位于图层的中点,我们将图二的的锚点打印.

customView_layer_anchorPoint:{0.5, 0.5}

我了便于观察,我在已有的 UIView 上面添加一个同样大小位置显色不同的UIView(在橙色视图上面添加一个绿色视图,绿色视图的锚点在绿色视图的中心点).


图片四(图层几何学)
图片四

    将绿色视图的锚点设置为(0.0).
    绿色视图的锚点在绿色视图的左上角.


图片五(图层几何学)
图片五

    再做一次实现,我将绿色视图的锚点设置为(1,1).也就是将锚点设置在绿色视图的右下角.


图片六(图层几何学)
图片六

    改变锚点可以盖面绿色视图的展示效果,那么此时的 bounds position frame 呢?我在控制台打印锚点为(0.5,0.5)与(1,1)时的数据.

//(0.5,0.5)
customView_layer_frame:{{0, 0}, {140, 185}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{70, 92.5}
//(1,1)
customView_layer_frame:{{-70, -92.5}, {140, 185}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{70, 92.5}

    由两个数据对比可得,锚点的改变只会改变 frame.
    到此锚点的基本概念已经基本了解,那么锚点用在什么地方呢?在这我列举一个简单的用法.现在我将锚点为(0.5,0.5)与(1,1)的绿色视图分别进行旋转(持续).


图片七(图层几何学)
图片七


图片八(图层几何学)
图片八

    对比两个GIF,可以知道视图的旋转是以锚点为中心进行旋转的.

坐标系

    坐标系无非就是(x,y,z),我不对(x,y)进行讲解,着重讲解一下z.在视图坐标系中,z轴与我们在数学中的z轴是有相同的效果的,他表现的是垂直的坐标,如果我们为图层设置z轴坐标该图层将会在未设置z轴坐标或者小于该z轴坐标的图层上方展示.为了着重表现该现象,我在绿色视图中添加一个蓝色图层与红色图层,先看一下代码清单.

    CALayer * blueLayer = [[CALayer alloc]init];
    blueLayer.frame = self.greenView.layer.frame;
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    
    CALayer * redLayer = [[CALayer alloc]init];
    redLayer.frame = self.greenView.layer.frame;
    redLayer.backgroundColor = [UIColor redColor].CGColor;
    
    [self.greenView.layer addSublayer:blueLayer];
    [self.greenView.layer addSublayer:redLayer];

    由代码可以发现先添加的蓝色图层后添加的红色图层,因此红色图层在最上方.


图片九(图层几何学)
图片九

    将蓝色的图层的z轴坐标设置为1.0f.


图片十(图层几何学)
图片十

Hit Testing

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇iOS性能之HTTP2.0 下一篇iOS性能之HTTP2.0

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目