iOS核心动画iOS 核心动画calayer及其子类 与动画相关的

iOS CALayer

2016-07-31  本文已影响215人  _YZG_
// 边框宽度
self.purpleView.layer.borderWidth = 10;
// 边框颜色
self.purpleView.layer.borderColor = [UIColor greenColor].CGColor;
// 圆角
self.purpleView.layer.cornerRadius = 10;

//    self.purpleView.layer.masksToBounds = YES;
// 阴影颜色
self.purpleView.layer.shadowColor = [UIColor blueColor].CGColor;
// 阴影偏差
self.purpleView.layer.shadowOffset = CGSizeMake(20, 20);
// 阴影不透明度
self.purpleView.layer.shadowOpacity = 0.5;


// 平移
self.iconView.layer.transform = CATransform3DMakeScale(1.5, 0.5, 0);
// 旋转二维
self.iconView.transform = CGAffineTransformMakeRotation(M_PI_4);
// 旋转三维 方式一
self.iconView.layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);

// 旋转三维 方式二
NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];
[self.iconView.layer setValue:value forKeyPath:@"transform"];

// 旋转
[self.iconView.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation"];

self.iconView.layer.transform = CATransform3DMakeScale(0.5, 2, 0);
[self.iconView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 2, 0)] forKeyPath:@"transform"];

// 可以传递哪些key path, 在官方文档搜索 "CATransform3D key paths"
[self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];

key paths

新建图层

//    CALayer *layer = [[CALayer alloc] init];
CALayer *layer = [CALayer layer];
layer.backgroundColor = [UIColor redColor].CGColor;
layer.bounds = CGRectMake(0, 0, 100, 100);
layer.position = CGPointMake(200, 100);
layer.cornerRadius = 10;
layer.masksToBounds = YES;
layer.contents = (id)[UIImage imageNamed:@"icon"].CGImage;
[self.view.layer addSublayer:layer];

自定义图层

方式一
继承自CALayer
/**
 *  只有明显地调用setNeedsDisplay方法,才会调用drawInContext:方法进行绘制
 */
- (void)drawInContext:(CGContextRef)ctx
{
    // 红色
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    // 添加圆
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50));
    // 实心绘制
    CGContextFillPath(ctx);
}

自定义View是这样的
- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx =  UIGraphicsGetCurrentContext();
    // 红色
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    // 添加圆
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 50, 50));
    // 实心绘制
    CGContextFillPath(ctx);
}


MyLayer *layer = [MyLayer layer];
layer.bounds = CGRectMake(0, 0, 100, 100);
layer.backgroundColor = [UIColor blueColor].CGColor;
layer.anchorPoint = CGPointZero;
[layer setNeedsDisplay];
[self.view.layer addSublayer:layer];


方式二
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, 100, 100);
layer.backgroundColor = [UIColor blackColor].CGColor;
layer.anchorPoint = CGPointZero;
layer.position = CGPointMake(100, 100);
layer.delegate = self;
[layer setNeedsDisplay];
[self.view.layer addSublayer:layer];


#pragma mark - 图层的代理方法
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    CGContextAddRect(ctx, CGRectMake(0, 0, 20, 20));
    CGContextFillPath(ctx);
}

view的完整显示过程

  1. view.layer会准备一个Layer Graphics Contex(图层类型的上下文)
  2. 调用view.layer.delegate(view)的drawLayer:inContext:,并传入刚才准备好的上下文
  3. view的drawLayer:inContext:方法内部又会调用view的drawRect:方法
  4. view就可以在drawRect:方法中实现绘图代码, 所有东西最终都绘制到view.layer上面
  5. 系统再将view.layer的内容拷贝到屏幕, 于是完成了view的显示
上一篇下一篇

猜你喜欢

热点阅读