图层几何学 -- iOS Core Animation 系列二

《图层树和寄宿图 -- iOS Core Animation 系列一》介绍了图层的基础知识和一些属性方法。这篇主要内容是学习下图层在父图层上怎么控制位置和尺寸的。

1.布局

首先看一张例图:

对于图上的frameboundscenterpostion的概念我就不赘述了。如果有不明白的自行搜索下了解一下。

frame代表了图层的外部坐标(也就是在父图层上占据的空间),bounds是内部坐标({0, 0}通常是图层的左上角),centerposition都代表了相对于父图层anchorPoint所在的位置

视图的frameboundscenter属性仅仅是存取方法,当操纵视图的frame时,实际上是在改变视图对应的CALayerframe, 不能独立于图层之外改变视图的frame.

如果对图层做了变换,比如旋转缩放等。frame的值实际指的是图层旋转之后整个轴对齐的矩形区域。此时frame的宽高可能和bounds的宽高不一致:


2.锚点

默认来说,anchorPoint位于图层的中点。这个属性没有被UIView直接暴露出来。但是图层的anchorPoint可以被移动。我们可以把anchorPoint置于图层frame的左上角。将会出现下图右侧的情况:

注意上图,改变anchorPointposition的值并没变。

和系列一中提到的contentsRect类似,anchorPoint单位坐标来表示(默认情况是{0.5, 0.5})。可以通过指定x和y值小于0或者大于1,使它放置在图层范围之外。

2.1 示例

为了学习这个anchorPoint属性,下面创建一个闹钟的示例demo。 资源文件我是从原文上截图下来的

创建4个UIImageView并设置好约束(都是居中显示)。

我们用NSTimer来更新闹钟,使用视图的transform属性来旋转钟表。 代码如下:

@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];
  
  self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];

  [self tick];
}
- (void)tick
{
  //获取对应的hours mins seconds
  NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
  NSUInteger units = NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;
  NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
  
  CGFloat hoursAngle = (components.hour / 12.0) * M_PI * 2.0;
  CGFloat minsAngle = (components.minute / 60.0) * M_PI * 2.0;
  CGFloat secsAngle = (components.second / 60.0) * M_PI * 2.0;
  //旋转对应的视图
  self.hourHand.transform = CGAffineTransformMakeRotation(hoursAngle);
  self.minuteHand.transform = CGAffineTransformMakeRotation(minsAngle);
  self.secondHand.transform = CGAffineTransformMakeRotation(secsAngle);
}

运行项目如下图:

除了指针图片的位置,其他的都正常。 可能这时候我们最先想到的方法,是调整对应图片的位置来解决。但是这样的话,你可以试试,并不能解决问题。不用卖关子了。这时候就是要用到anchorPoint的时候。处理代码如下:

// 在viewdidload中添加
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);

运行完美。


3. 坐标系

众所周知,一个图层的position依赖于父图层的bounds,如果父图层移动,所有子图层也会跟着移动。 CALayer也给我们提供了一些获取一个图层的绝对位置的方法,或者相对于另一图层的位置(而不是它当前父图层的位置):

- (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;

常规来说,一个图层的postion位于父图层的左上角,但在 Mac OS 中,通常位于左下角。

3.1 z坐标轴

UIView的二维坐标不同,CALayer存在于一个三维空间中,它还提供了zPostionanchorPointz属性。 zPosition属性大多数不常用,除了三维动画之外,它最实用的功能是可以改变图层的显示顺序。

3.2 zPosition演示代码

我们演示下改变zPosition会怎么改变视图的显示顺序。 首先我在SB中设置两个视图,如下图:

如果我们不做任何操作,运行后,两个视图显示的顺序就是我们现在设置的这样。但是假如我们对yellowView设置zPosition,哪怕很小的值,都会发现显示的顺序反了。

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *cyanView;
@property (weak, nonatomic) IBOutlet UIView *yellowView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  self.yellowView.layer.zPosition = 1.f;
}

现在的显示效果如下:

虽说图层基本没有厚度,但是我们也尽量不要设置zPosition = 0.01f之类的。因为浮点类型的四舍五入可能导致难以察觉的麻烦。


4. Hit Testing

虽说CALayer不关心响应链事件,但是它提供了一些方法让我们处理事件-containsPoint:-hitTest:

4.1 -containsPoint:

-containsPoint:接受一个在本图层坐标系下的CGPoint,如果这个点在图层frame范围内就返回YES.我们可以使用这个方法判断是哪个图层被触摸了。

4.1.1 containsPoint 示例

代码如下:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *layerView;
@property (nonatomic, strong) CALayer *blueLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  self.blueLayer = [CALayer layer];
  self.blueLayer.frame = CGRectMake(20.f, 20.f, 100.f, 100.f);
  self.blueLayer.backgroundColor = [UIColor blueColor].CGColor;
  
  [self.layerView.layer addSublayer:self.blueLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
  // 获取触摸点
  CGPoint point = [[touches anyObject] locationInView:self.view];
  // 转换触摸点在layerView的图层的位置
  point = [self.layerView.layer convertPoint:point fromLayer:self.view.layer];
  // 判断是否包含在layerview里面
  if ([self.layerView.layer containsPoint:point]) {
    point = [self.blueLayer convertPoint:point fromLayer:self.layerView.layer];
    if ([self.blueLayer containsPoint:point]) {
      NSLog(@"点击蓝色图层");
    } else {
      NSLog(@"点击了白色图层");
    }
  }
}

运行点击可以在控制台看到NSLog的输出信息。

4.2. -hitTest:

-hitTest:方法同样接受一个CGPoint参数,但是返回的是图层本身,而不是BOOL类型。这使我们不用像-containsPoint:一样每个子图层去测试点击的坐标。如果这个点是在最外面的图层,则返回nil

4.2.1 hitTest示例

把上面-containsPoint:示例的代码下面的部分修改一下即可:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
  // 获取点击点
  CGPoint point = [[touches anyObject] locationInView:self.view];
  // 获取这个点所在的图层
  CALayer *layer = [self.layerView.layer hitTest:point];
  if (layer == self.blueLayer) {
    NSLog(@"点击蓝色图层");
  } else if (layer == self.layerView.layer) {
    NSLog(@"点击了白色图层");
  }
}

尝试修改self.layerViewzPosition,会有不同的结果。有兴趣的可以自己测试一下。

-- 系列二完 --

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

8606
来自专栏一个会写诗的程序员的博客

《MongoDB极简教程》第二章 MongoDB 基本命令(Shell)

MongoDB的所有请求都以命令的形式发出,支持的命令列表参考Database Commands

1264
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

1332
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态...

1233
来自专栏前端说吧

JS-制作可伸缩的水平菜单栏

4574
来自专栏xx_Cc的学习总结专栏

iOS-核心动画详解之CALayer

3086
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1281
来自专栏HTML5学堂

让剁手党洞察物体细节,“放大镜”当之无愧

经常浏览淘宝、京东等一些商城网站,都会看到各种各样的页面交互效果,放大镜交互效果在商城网站中算是比较常见的。作为程序员的我们也会经常去考虑放大镜效果的实现方式,...

4388
来自专栏哈雷彗星撞地球

iOS动画三板斧(一)--UIView动画前言UIView 动画

iOS 精致的app,离不开酷炫合宜的动画。而iOS中的动画实现也有多种不同的方式。今天就来介绍一下iOS中的动画。本篇是第一篇,就讲一下最简单的动画实现方式,...

861
来自专栏zcqshine's blog

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

4034

扫码关注云+社区

领取腾讯云代金券