iOS 动画 第三章 图层几何学

[self clockView];

    //zPosition
 [self zPositionTest];

布局

//UIView有三个比较重要的布局属性:frame,bounds和center,CALayer对应地叫做frame,bounds和position。为了能清楚区分,图层用了“position”,视图用了“center”,但是他们都代表同样的值。
//frame代表了图层的外部坐标(也就是在父图层上占据的空间),bounds是内部坐标({0, 0}通常是图层的左上角),center和position都代表了相对于父图层anchorPoint所在的位置。anchorPoint的属性将会在后续介绍到,现在把它想成图层的中心点就好了。
//对于视图或者图层来说,frame并不是一个非常清晰的属性,它其实是一个虚拟属性,是根据bounds,position和transform计算而来,所以当其中任何一个值发生改变,frame都会变化

锚点

//视图的center属性和图层的position属性都指定了anchorPoint相对于父图层的位置。图层的anchorPoint通过position来控制它的frame的位置
//默认来说,anchorPoint位于图层的中点,所以图层的将会以这个点为中心放置。图层左上角是{0, 0},右下角是{1, 1},因此默认坐标是{0.5, 0.5}

- (void)clockView {
    hourHand = [[UIImageView alloc] init];
    hourHand.frame = CGRectMake(100.0, 100.0f, 2.f, 60.0f);
    hourHand.backgroundColor = [UIColor redColor];
    hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    [self.view addSubview:hourHand];
    
    minuteHand = [[UIImageView alloc] init];
    minuteHand.frame = CGRectMake(100.0, 100.0f, 2.f, 60.0f);
    minuteHand.backgroundColor = [UIColor blueColor];
    minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    [self.view addSubview:minuteHand];
    
    secondHand = [[UIImageView alloc] init];
    secondHand.frame = CGRectMake(100.0, 100.0f, 2.f, 60.0f);
    secondHand.backgroundColor = [UIColor greenColor];
    secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    [self.view addSubview:secondHand];

    timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];
    [self tick];
}

- (void)tick {
    //convert time to hours, minutes and 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.0f;
    CGFloat minsAngle = (components.minute/60.0) * M_PI * 2.0f;
    CGFloat secsAngle = (components.second/60.0) * M_PI * 2.0f;
    
    hourHand.transform = CGAffineTransformMakeRotation(hoursAngle);
    minuteHand.transform = CGAffineTransformMakeRotation(minsAngle);
    secondHand.transform = CGAffineTransformMakeRotation(secsAngle);
}

坐标系

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

翻转的几何结构

//常规说来,在iOS上,一个图层的position位于父图层的左上角,但是在Mac OS上,通常是位于左下角。Core Animation可以通过geometryFlipped属性来适配这两种情况
//在iOS上通过设置它为YES意味着它的子图层将会被垂直翻转,也就是将会沿着底部排版而不是通常的顶部

Z坐标轴

//CALayer还有另外两个属性,zPosition和anchorPointZ zPosition最实用的功能就是改变图层的显示顺序了

- (void)zPositionTest {
    UIView *greenView = [[UIView alloc] init];
    greenView.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    greenView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:greenView];
    
    UIView *redView = [[UIView alloc] init];
    redView.frame = CGRectMake(100.0f, 100.0f, 100.0f, 100.0f);
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    //move the green view zPosition nearer to the camera
    //zPosition属性可以明显改变屏幕上图层的顺序,但不能改变事件传递的顺序。
    greenView.layer.zPosition = 1.0f;
}

//CALayer并不关心任何响应链事件,所以不能直接处理触摸事件或者手势。但是它有一系列的方法帮你处理事件:-containsPoint:和-hitTest:.
- (void)containsPointTest {
    layerView = [[UIView alloc] init];
    layerView.frame = CGRectMake(20.0f, 20.0f, 200.0f, 200.0f);
    [self.view addSubview: layerView];
    
    blueLayer = [[CALayer alloc] init];
    blueLayer.frame = CGRectMake(20.0f, 20.0f, 100.0f, 100.0f);
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    [self.view.layer addSublayer:blueLayer];
}
/*
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    //containsPoint
    //get touch position relative to main view
    CGPoint point = [[touches anyObject] locationInView:self.view];
    //convert point to the white layer's coordinates
    point = [layerView.layer convertPoint:point fromLayer:self.view.layer];
    //get layer using containsPoint:
    if ([layerView.layer containsPoint:point]) {
        //convert point to blueLayer's coordinates
        point = [blueLayer convertPoint:point fromLayer:layerView.layer];
        if ([blueLayer containsPoint:point]) {
            NSLog(@"Inside Blue layer");
        } else {
            NSLog(@"Inside white layer");
        }
    }
    
   //hitTest
    point = [[touches anyObject] locationInView:self.view];
    //get touched layer
    CALayer *layer = [layerView.layer hitTest:point];
    //get layer using hitTest
    if (layer == blueLayer) {
        NSLog(@"hitTest: Inside blue layer");
    } else if (layer == layerView.layer) {
        NSLog(@"hitTest: Inside white layer");
    }
}
*/

自动布局

//UIViewAutoresizingMask
//在Mac OS平台,CALayer有一个叫做layoutManager的属性可以通过CALayoutManager协议和CAConstraintLayoutManager类来实现自动排版的机制。
//当使用视图的时候,可以充分利用UIView类接口暴露出来的UIViewAutoresizingMask和NSLayoutConstraintAPI,但如果想随意控制CALayer的布局,就需要手工操作。最简单的方法就是使用CALayerDelegate如下函数:
//- (void)layoutSublayersOfLayer:(CALayer *)layer;当图层的bounds发生改变,或者图层的-setNeedsLayout方法被调用的时候,这个函数将会被执行;但是不能像UIView的autoresizingMask和constraints属性做到自适应屏幕旋转。

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

推荐阅读更多精彩内容