Core Animation之简单使用CALayer
jopen
10年前
上篇Core Animation之基础介绍提到CALayer的重要性，那咱们就试试CALayer如何使用。
1、什么是CALayer
CALayer是个简单的类，它是用来在屏幕上显示内容展示的矩形区域。
靠，这是不描述UIView的话吗？其实他们是有区别的。每个UIView都有一个根CALayer，UIView在这个layer上描绘东西。
那怎么访问这个layer呢，很简单：
CALayer *myLayer = myView.layer;
CALayer有这么些属性，可以设置改变层的显示：
- 层的大小和位置
- 层的背景颜色
- 层的内容（图像，core graphics）
- 层的的圆角，半径
- 层的阴影设置
- 等等....
2、开始
新建项目默认的模版里是 QuartzCore库的，先添加它，才能使用CALayer。
小试牛刀看看。
设置层的背景颜色，层的设置圆角半径为20
#import// Uncomment viewDidLoad and add the following lines self.view.layer.backgroundColor = [UIColor orangeColor].CGColor; self.view.layer.cornerRadius = 20.0;
3、层和子层
获取一个新CALayer的实例
CALayer *sublayer = [CALayer layer];设置layler的属性，下面分别是
- 设置背景色，
- 阴影的偏差值，
- 阴影的半径，
- 阴影的颜色，
- 阴影的透明度，
- 子层的freme值。
- 然后把新的层add到view的层里。
CALayer *sublayer = [CALayer layer]; sublayer.backgroundColor = [UIColor purpleColor].CGColor; sublayer.shadowOffset = CGSizeMake(0, 3); sublayer.shadowRadius = 5.0; sublayer.shadowColor = [UIColor blackColor].CGColor; sublayer.shadowOpacity = 0.8; sublayer.frame = CGRectMake(30, 30, 128, 192); [self.view.layer addSublayer:sublayer];
效果如下：
4、添加图片内容和层的圆角
- 主要内容有：
- 新建imagelayer放置图片
- 设置圆角半径cornerRadius
- 设置层的内容contents为图片
- 边界遮罩masksToBounds
CALayer *sublayer = [CALayer layer]; sublayer.backgroundColor = [UIColor purpleColor].CGColor; sublayer.shadowOffset = CGSizeMake(0, 3); sublayer.shadowRadius = 5.0; sublayer.shadowColor = [UIColor blackColor].CGColor; sublayer.shadowOpacity = 0.8; sublayer.frame = CGRectMake(30, 30, 128, 192); sublayer.borderColor = [UIColor blackColor].CGColor; sublayer.borderWidth = 2.0; sublayer.cornerRadius = 10.0; [self.view.layer addSublayer:sublayer]; CALayer *imageLayer = [CALayer layer]; imageLayer.frame = sublayer.bounds; imageLayer.cornerRadius = 10.0; imageLayer.contents = (id)[UIImage imageNamed:@"snaguosha.png"].CGImage; imageLayer.masksToBounds = YES; [sublayer addSublayer:imageLayer];效果：
有圆角就是好看很多。
5、自定义绘画内容到图层
如果不想使用图片内容，而是想用 Core Graphics绘制内容到层上的话也简单。
这里主要靠viewController类实现一个drawLayer:inContext方法，并把它设置成layer的代理。代码如下：
CALayer *customDrawn = [CALayer layer]; customDrawn.delegate = self; customDrawn.backgroundColor = [UIColor greenColor].CGColor; customDrawn.frame = CGRectMake(30, 250, 280, 200); customDrawn.shadowOffset = CGSizeMake(0, 3); customDrawn.shadowRadius = 5.0; customDrawn.shadowColor = [UIColor blackColor].CGColor; customDrawn.shadowOpacity = 0.8; customDrawn.cornerRadius = 10.0; customDrawn.borderColor = [UIColor blackColor].CGColor; customDrawn.borderWidth = 2.0; customDrawn.masksToBounds = YES; [self.view.layer addSublayer:customDrawn];
在viewController中加入：
static inline double radians (double degrees) { return degrees * M_PI/180; } void MyDrawColoredPattern (void *info, CGContextRef context) { CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor; CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor; CGContextSetFillColorWithColor(context, dotColor); CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor); CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0); CGContextFillPath(context); CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0); CGContextFillPath(context); } - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context { CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor; CGContextSetFillColorWithColor(context, bgColor); CGContextFillRect(context, layer.bounds); static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL }; CGContextSaveGState(context); CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL); CGContextSetFillColorSpace(context, patternSpace); CGColorSpaceRelease(patternSpace); CGPatternRef pattern = CGPatternCreate(NULL, layer.bounds, CGAffineTransformIdentity, 24, 24, kCGPatternTilingConstantSpacing, true, &callbacks); CGFloat alpha = 1.0; CGContextSetFillPattern(context, pattern, &alpha); CGPatternRelease(pattern); CGContextFillRect(context, layer.bounds); CGContextRestoreGState(context); }这样，Core Graphics绘制了一个有质地的图像到 customDrawn层上，这个绘制教程请参考： Core Graphics 101: Patterns 咱们看下这很酷的效果：
这个是不是像mac电脑上按下F12键时出来的背景。
层了解了，是不是该看看动画了：
Core Animation之多种动画效果
参考：http://www.raywenderlich.com/2502/introduction-to-calayers-tutorial