[iOS Animation]-CALayer 图层几何学

[iOS Animation]-CALayer 图层几何学

图层几何学

不熟悉几何学的人就不要来这里了 –柏拉图学院入口的签名

在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性。在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图层来控制位置和尺寸的。另外我们也会涉及如何管理图层的几何结构,以及它是如何被自动调整和自动布局影响的。

布局

UIView有三个比较重要的布局属性:frame,bounds和center,CALayer对应地叫做frame,bounds和position。为了能清楚区分,图层用了“position”,视图用了“center”,但是他们都代表同样的值。

frame代表了图层的外部坐标(也就是在父图层上占据的空间),bounds是内部坐标({0, 0}通常是图层的左上角),center和position都代表了相对于父图层anchorPoint所在的位置。anchorPoint的属性将会在后续介绍到,现在把它想成图层的中心点就好了。图3.1显示了这些属性是如何相互依赖的。

图3.1

图3.1 UIView和CALayer的坐标系

视图的frame,bounds和center属性仅仅是存取方法,当操纵视图的frame,实际上是在改变位于视图下方CALayer的frame,不能够独立于图层之外改变视图的frame。

对于视图或者图层来说,frame并不是一个非常清晰的属性,它其实是一个虚拟属性,是根据bounds,position和transform计算而来,所以当其中任何一个值发生改变,frame都会变化。相反,改变frame的值同样会影响到他们当中的值

记住当对图层做变换的时候,比如旋转或者缩放,frame实际上代表了覆盖在图层旋转之后的整个轴对齐的矩形区域,也就是说frame的宽高可能和bounds的宽高不再一致了(图3.2)

图3.2

图3.2 旋转一个视图或者图层之后的frame属性

锚点

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

默认来说,anchorPoint位于图层的中点,所以图层的将会以这个点为中心放置。anchorPoint属性并没有被UIView接口暴露出来,这也是视图的position属性被叫做“center”的原因。但是图层的anchorPoint可以被移动,比如你可以把它置于图层frame的左上角,于是图层的内容将会向右下角的position方向移动(图3.3),而不是居中了。

图3.3

图3.3 改变anchorPoint的效果

和第二章提到的contentsRect和contentsCenter属性类似,anchorPoint用单位坐标来描述,也就是图层的相对坐标,图层左上角是{0, 0},右下角是{1, 1},因此默认坐标是{0.5, 0.5}。anchorPoint可以通过指定x和y值小于0或者大于1,使它放置在图层范围之外。

注意在图3.3中,当改变了anchorPoint,position属性保持固定的值并没有发生改变,但是frame却移动了。

那在什么场合需要改变anchorPoint呢?既然我们可以随意改变图层位置,那改变anchorPoint不会造成困惑么?为了举例说明,我们来举一个实用的例子,创建一个模拟闹钟的项目。

钟面和钟表由四张图片组成(图3.4),为了简单说明,我们还是用传统的方式来装载和加载图片,使用四个UIImageView实例(当然你也可以用正常的视图,设置他们图层的contents图片)。

图3.4

图3.4 组成钟面和钟表的四张图片

闹钟的组件通过IB来排列(图3.5),这些图片视图嵌套在一个容器视图之内,并且自动调整和自动布局都被禁用了。这是因为自动调整会影响到视图的frame,而根据图3.2的演示,当视图旋转的时候,frame是会发生改变的,这将会导致一些布局上的失灵。

我们用NSTimer来更新闹钟,使用视图的transform属性来旋转钟表(如果你对这个属性不太熟悉,不要着急,我们将会在第5章“变换”当中详细说明),具体代码见清单3.1

图3.5

图3.5 在Interface Builder中布局闹钟视图

清单3.1 Clock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@interface ViewController ()
 
@property (nonatomic, weak) IBOutlet UIImageView *hourHand;
@property (nonatomic, weak) IBOutlet UIImageView *minuteHand;
@property (nonatomic, weak) IBOutlet UIImageView *secondHand;
@property (nonatomic, weak) NSTimer *timer;
 
@end
 
@implementation ViewController
 
– (void)viewDidLoad
{
    [super viewDidLoad];
    //start timer
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];
                  
    //set initial hand positions
    [self tick];
}
 
– (void)tick
{
    //convert time to hours, minutes and seconds
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
    NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
    NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
    CGFloat hoursAngle = (components.hour / 12.0) * M_PI * 2.0;
    //calculate hour hand angle //calculate minute hand angle
    CGFloat minsAngle = (components.minute / 60.0) * M_PI * 2.0;
    //calculate second hand angle
    CGFloat secsAngle = (components.second / 60.0) * M_PI * 2.0;
    //rotate hands
    self.hourHand.transform = CGAffineTransformMakeRotation(hoursAngle);
    self.minuteHand.transform = CGAffineTransformMakeRotation(minsAngle);
    self.secondHand.transform = CGAffineTransformMakeRotation(secsAngle);
}
 
@end

运行项目,看起来有点奇怪(图3.6),因为钟表的图片在围绕着中心旋转,这并不是我们期待的一个支点。

图3.6

图3.6 钟面,和不对齐的钟指针

你也许会认为可以在Interface Builder当中调整指针图片的位置来解决,但其实并不能达到目的,因为如果不放在钟面中间的话,同样不能正确的旋转。

也许在图片末尾添加一个透明空间也是个解决方案,但这样会让图片变大,也会消耗更多的内存,这样并不优雅。

更好的方案是使用anchorPoint属性,我们来在-viewDidLoad方法中添加几行代码来给每个钟指针的anchorPoint做一些平移(清单3.2),图3.7显示了正确的结果。

清单3.2

1
2
3
4
5
6
7
8
9
10
11
12
– (void)viewDidLoad
{
    [super viewDidLoad];
    // adjust anchor points
 
    self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
 
 
    // start timer
}

图3.7

图3.7 钟面,和正确对齐的钟指针

转载于:https://my.oschina.net/u/2438875/blog/512726

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109311.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 安卓c语言hook,C语言hook技术实现木马功能-盗QQ密码「建议收藏」

    安卓c语言hook,C语言hook技术实现木马功能-盗QQ密码「建议收藏」该楼层疑似违规已被系统折叠隐藏此楼查看此楼}else{//卸载钩子bRet=UnhookWindowsHookEx(g_hProc)&&UnhookWindowsHookEx(g_hKey);g_hProc=NULL;g_hKey=NULL;g_hNum=NULL;}returnbRet;}上面是安装HOOK部分的代码,就这么简单,上面提到了CallWnd…

  • 计算机实现原理专题–二进制减法器(二)

    计算机实现原理专题–二进制减法器(二)在计算机实现原理专题–二进制减法器(一)中说明了基本原理,现准备说明如何来实现。首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式:由于每次做减法时,我们可以人为的判断被减数和减数的大小,所以当被减数大于减数时中间结果一定会上溢也就是多出1位,因此中…

  • 校园二手交易平台的简要分析(纯文档)[通俗易懂]

    校园二手交易平台的简要分析(纯文档)[通俗易懂]校园二手交易平台的简要分析 摘要:校园二手市场就是建立在校园里的提供学生们进行二手物品交易的场所。二手交易在大学校园里面比较常见,一方面,大学生热衷潮流,消费需求较旺盛,但也容易因为冲动购物而产生较多的闲置物品;另一方面,大部分大学生经济未独立,资金来源主要是依靠父母,经济能力有限。现在国家倡导可循环经济,人们的环保意识逐渐增强,加之旺盛的需求与滞后的经济能力形成的鲜明反差,为校园二手市场…

  • 国内外6款优秀的免费CDN服务「建议收藏」

    国内外6款优秀的免费CDN服务「建议收藏」CDN是一种新型网络构建方式,它是为能在传统的IP网发布宽带丰富媒体而特别优化的网络覆盖层;而从广义的角度,CDN代表了一种基于质量与秩序的网络服务模式。之前有过几篇文章介绍了CDNZZ和Cloudflare,今天再来系统推荐一下几家比较有名的CDN,都是免费的,或者其免费服务已经够用了。CDN主要特点1、本地Cache加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大

  • selenium python面试题_selenium面试题

    selenium python面试题_selenium面试题selenium中如何判断元素是否存在?selenium中没有提供原生的方法判断元素是否存在,一般我们可以通过定位元素+异常捕获的方式判断。#判断元素是否存在try:dr.find_element_by_id(‘none’)exceptNoSuchElementException:print’elementdoesnotexist’selenium中hidden或者是display=…

  • JMeter下载安装以及使用教程

    JMeter下载安装以及使用教程JMeter下载1、下载地址:https://jmeter.apache.org/download_jmeter.cgi2、下载后无需安装,解压后即可使用。解压后目录如下:3、打开JMeter中bin目录下面的jmeter.bat双击即可打开JMeter了,打开的时候会有两个窗口,Jmeter的命令窗口和Jmeter的图形操作界面,不要关闭命令窗口,打开界面如下:4、打开jmeter软件,发现显示的为英文,更改为中文步骤如下:点击菜单栏【Options】按钮然后依次单击【Cho

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号