IOS动画学习小记(2)-CALayer绘图

CALayer

当利用drawRect:方法绘图的本质就是绘制到了UIView的layer（属性）中。

CALayer很多属性在修改时都能形成动画效果，这种属性称为“隐式动画属性”。但是对于UIView的根图层而言属性的修改并不形成动画效果，因为很多情况下根图层更多的充当容器的做用。并且UIView的根图层创建工作完全由iOS负责完成，无法重新创建。

直接在图层中绘图

当时调用了UIView的drawRect:方法绘制图形、图像，这种方式本质还是在图层中绘制。只是drawRect:方法是由UIKit组件进行调用，因此里面可以使用一些UIKit封装的方法进行绘图，而直接绘制到图层的方法由于并非UIKit直接调用因此只能用原生的Core Graphics方法绘制。

CALayer图层内部绘图有两个方法:(都需要调用setNeedDisplay方法)

1. 通过图层代理绘制 (CALayerDelegate)
   - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;
2. 通过自定义图层绘制 (CALayer)
   - (void)drawInContext:(CGContextRef)ctx;

使用图层代理绘图

只要指定某图层(CALayer)的代理，然后在代理对象中重写-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx方法。这里不需要手动实现CALayerDelegate，因为CALayer定义中给NSObject做了分类扩展，所有的NSObject都包含这个方法。

//
//  ViewController.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/1.
//  Copyright © 2016年 xiaodoubaba. All rights reserved.
//

#import "ViewController.h"
#define Photo_Height 150

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGPoint position     = CGPointMake(160, 200);
    CGRect  bounds       = CGRectMake(0, 0, Photo_Height, Photo_Height);
    CGFloat cornerRadius = Photo_Height / 2;
    CGFloat borderWidth  = 2;
    
    //阴影图层
    CALayer *layerShadow = [[CALayer alloc]init];
    layerShadow.bounds   = bounds;
    layerShadow.position = position;
    layerShadow.cornerRadius  = cornerRadius;
    layerShadow.shadowColor   = [UIColor grayColor].CGColor;
    layerShadow.shadowOffset  = CGSizeMake(2, 1);
    layerShadow.shadowOpacity = 1;
    layerShadow.borderColor   = [UIColor whiteColor].CGColor;
    layerShadow.borderWidth   = borderWidth;
    [self.view.layer addSublayer:layerShadow];
    
    //容器图层
    CALayer *layer = [[CALayer alloc] init];
    layer.bounds   = bounds;
    layer.position = position;
    layer.backgroundColor = [UIColor orangeColor].CGColor;
    layer.cornerRadius    = cornerRadius;
    //子图层是否剪切图层边界，默认为NO
    layer.masksToBounds   = YES;
    
    /*阴影效果无法和masksToBounds同时使用，因为masksToBounds的目的就是剪切外边框，
    而阴影效果刚好在外边框
    换个思路:使用两个大小一样的图层，下面的图层负责绘制阴影，上面的图层用来显示图片。
    layer.shadowColor=[UIColor grayColor].CGColor;
    layer.shadowOffset=CGSizeMake(2, 2);
    layer.shadowOpacity=1;
     */
    
    layer.borderColor = [UIColor grayColor].CGColor;
    layer.borderWidth = 2;
    
    /*利用图层形变解决图像倒立问题
     在动画开发中形变往往不是直接设置transform，而是通过keyPath进行设置。
     这种方法设置形变的本质没有区别，只是利用了KVC可以动态修改其属性值而已。
     下面的代码可以替换为：
     [layer setValue:@M_PI forKeyPath:@"transform.rotation.x"];
     */
    layer.transform=CATransform3DMakeRotation(M_PI, 1, 0, 0);
    
    
    /*如果仅仅就显示一张图片在图层中，直接设置图层contents就可以了。无需delegate
    UIImage *image = [UIImage imageNamed:@"picture"];
    layer.contents = (id)image.CGImage;
    [layer setContents:(id)image.CGImage];
     */
    
    layer.delegate = self;
    
    [self.view.layer addSublayer:layer];
    //调用图层setNeedDisplay,否则代理方法不会被调用
    [layer setNeedsDisplay];
}

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    /*如果没有设置layer.transform,需要加上
    CGContextSaveGState(ctx);
    
    //图形上下文形变，解决图片倒立的问题
    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -Photo_Height);
     */
    
    UIImage *image = [UIImage imageNamed:@"picture"];
    //相对于图层位置,不是屏幕
    CGContextDrawImage(ctx, CGRectMake(0, 0, Photo_Height, Photo_Height), image.CGImage);
    
    /*如果没有设置layer.transform,需要加上
    CGContextRestoreGState(ctx);
     */
}

@end

图层代理绘图.png
使用自定义图层绘图
编写一个类继承于CALayer然后在drawInContext:中使用CGContext绘图。同样需要调用setNeedDisplay方法。

//
//  XDLayer.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/2.
//  Copyright © 2016年 xiaodoubaba. All rights reserved.
//

#import "XDLayer.h"

@implementation XDLayer
- (void)drawInContext:(CGContextRef)ctx
{
    NSLog(@"3-drawInContext:");
    NSLog(@"CGContext:%@",ctx);
    CGContextSetRGBFillColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
    CGContextSetRGBStrokeColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
    CGContextMoveToPoint(ctx, 94.5, 33.5);
    
    //// Star Drawing
    CGContextAddLineToPoint(ctx,104.02, 47.39);
    CGContextAddLineToPoint(ctx,120.18, 52.16);
    CGContextAddLineToPoint(ctx,109.91, 65.51);
    CGContextAddLineToPoint(ctx,110.37, 82.34);
    CGContextAddLineToPoint(ctx,94.5, 76.7);
    CGContextAddLineToPoint(ctx,78.63, 82.34);
    CGContextAddLineToPoint(ctx,79.09, 65.51);
    CGContextAddLineToPoint(ctx,68.82, 52.16);
    CGContextAddLineToPoint(ctx,84.98, 47.39);
    CGContextClosePath(ctx);
    
    
    CGContextDrawPath(ctx, kCGPathFillStroke);
}
@end

---

//
//  XDView.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/2.
//  Copyright © 2016年 xiaodoubaba. All rights reserved.
//

#import "XDView.h"
#import "XDLayer.h"

@implementation XDView

- (instancetype)initWithFrame:(CGRect)frame
{
    NSLog(@"initWithFrame:");
    if (self = [super initWithFrame:frame]) {
        XDLayer *layer = [[XDLayer alloc] init];
        layer.bounds   = CGRectMake(0, 0, 185, 185);
        layer.position = CGPointMake(160, 284);
        layer.backgroundColor = [UIColor lightGrayColor].CGColor;
        
        [layer setNeedsDisplay];
        
        [self.layer addSublayer:layer];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    NSLog(@"2-drawRect:");
    //得到当前图形上下文是drawLayer中传递的
    NSLog(@"CGContext:%@",UIGraphicsGetCurrentContext());
    [super drawRect:rect];
}

/*UIView在显示时其根图层会自动创建一个CGContextRef（CALayer本质使用的是位图上下文）
  同时调用图层代理（UIView创建图层会自动设置图层代理为其自身）的draw: inContext:方法
  并将图形上下文作为参数传递给这个方法。
  UIView自动就是根图层的代理*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    NSLog(@"1-drawLayer:inContext:");
    NSLog(@"CGContext:%@",ctx);
    [super drawLayer:layer inContext:ctx];
    /*UIView会在这个方法中调用其drawRect:方法*/
}

@end

---

//
//  SecondViewController.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/2.
//  Copyright © 2016年 xiaodoubaba. All rights reserved.
//

#import "SecondViewController.h"
#import "XDView.h"

@interface SecondViewController ()

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    XDView *view=[[XDView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    view.backgroundColor=[UIColor whiteColor];
    
    [self.view addSubview:view];
}
@end

自定义图层绘图.png