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