IOS Core Animation Advanced Techniques的学习笔记(一)

Book Description

Table of Contents

Part I: The Layer Beneath
Chapter 1. The Layer Tree
Chapter 2. The Backing Image
Chapter 3. Layer Geometry
Chapter 4. Visual Effects
Chapter 5. Transforms
Chapter 6. Specialized Layers

Part II: Setting Things in Motion
Chapter 7. Implicit Animations
Chapter 8. Explicit Animations
Chapter 9. Layer Time
Chapter 10. Easing
Chapter 11. Timer-Based Animation

Part III: The Performance of a Lifetime
Chapter 12. Tuning for Speed
Chapter 13. Efficient Drawing
Chapter 14. Image IO
Chapter 15. Layer Performance

这本书网上很多很好找，这里就不提供下载了

源码在这里下载：http://www.informit.com/title/9780133440751

正文开始

我个人看书是不看全部的，只挑一些自己感兴趣的部分看，所以不要打算从我的笔记中了解本书的全部内容。

第一章：The Layer Tree

这章只是区分一下CALayer和UIView，引用"The CALayer class is conceptually very similar to UIView. Layers, like views, are rectangular objects that can be arranged into a hierarchical tree. Like views, they can contain content (such as an image, text, or a background color) and manage the position of their children (sublayers). They have methods and properties for performing animations and transforms. The only major feature of UIView that isn’t handled by CALayer is user interaction."所以，可以简单地认为CALayer就是没有用户交互的UIView。

另外，还有一句话需要注意的，

A view has only one backing layer (created automatically) but can host an unlimited number of additional layers.

大家去体会一下

第二章：The Backing Image

[objc] view plaincopyprint?

1. @implementation ViewController  
2.   
3. - (void)viewDidLoad  
4. {  
5.     [super viewDidLoad];  
6.   
7.     //load an image  
8.     UIImage *image = [UIImage imageNamed:@"Snowman.png"];  
9.   
10.     //add it directly to our view‘s layer  
11.     self.layerView.layer.contents = (__bridge id)image.CGImage;  
12. }  
13.   
14. @end  

看到layer可以直接显示image，图片的显示模式对应UIView的contentMode为contentsGravity，它是个字符串对应如下：

[cpp] view plaincopyprint?

1. kCAGravityCenter  
2. kCAGravityTop  
3. kCAGravityBottom  
4. kCAGravityLeft  
5. kCAGravityRight  
6. kCAGravityTopLeft  
7. kCAGravityTopRight  
8. kCAGravityBottomLeft  
9. kCAGravityBottomRight  
10. kCAGravityResize  
11. kCAGravityResizeAspect  
12. kCAGravityResizeAspectFill  

看英文大家应该和contentMode对应上了吧

[objc] view plaincopyprint?

1. @implementation ViewController  
2.   
3. - (void)viewDidLoad  
4. {  
5.     [super viewDidLoad];  
6.       
7.     //load an image  
8.     UIImage *image = [UIImage imageNamed:@"Snowman.png"];  
9.   
10.     //add it directly to our view‘s layer  
11.     self.layerView.layer.contents = (__bridge id)image.CGImage;  
12.       
13.     //center the image  
14.     self.layerView.layer.contentsGravity = kCAGravityCenter;  
15. }  
16.   
17. @end  

[objc] view plaincopyprint?

1. @implementation ViewController  
2.   
3. - (void)viewDidLoad  
4. {  
5.     [super viewDidLoad];  
6.   
7.     //load an image  
8.     UIImage *image = [UIImage imageNamed:@"Snowman.png"];  
9.   
10.     //add it directly to our view‘s layer  
11.     self.layerView.layer.contents = (__bridge id)image.CGImage;  
12.   
13.     //center the image  
14.     self.layerView.layer.contentsGravity = kCAGravityCenter;  
15.   
16.     //set the contentsScale to match image  
17.     self.layerView.layer.contentsScale = image.scale;  
18. }  
19.   
20. @end  

layer也有对应UIView的clipsToBounds的函数masksToBounds

代码修改如下

[objc] view plaincopyprint?

1. @implementation ViewController  
2.   
3. - (void)viewDidLoad  
4. {  
5.     [super viewDidLoad];  
6.       
7.     //load an image  
8.     UIImage *image = [UIImage imageNamed:@"Snowman.png"];  
9.   
10.     //add it directly to our view‘s layer  
11.     self.layerView.layer.contents = (__bridge id)image.CGImage;  
12.       
13.     //center the image  
14.     self.layerView.layer.contentsGravity = kCAGravityCenter;  
15.       
16.     //set the contentsScale to match screen  
17.     self.layerView.layer.contentsScale = image.scale;  
18.       
19.     //clip the snowman to fit his bounds  
20.     self.layerView.layer.masksToBounds = YES;  
21. }  
22.   
23. @end  

以上太基础了，后面的相对复杂和有意思些，相对于UIView拉伸效果contentStretch相同的Layer的contentsCenter，

这个函数可不是设置中心坐标的，它是个Rect。

具体效果参看：http://blog.csdn.net/iunion/article/details/25417005

我做了个简单效果，如下：

[objc] view plaincopyprint?

1. #import "ViewController.h"  
2.   
3. @interface ViewController ()  
4. {  
5.     NSInteger tick;  
6. }  
7.   
8. @end  
9.   
10.   
11. @implementation ViewController  
12.   
13. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
14. {  
15.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
16.     if (self) {  
17.         // Custom initialization  
18.     }  
19.     return self;  
20. }  
21.   
22. - (void)addStretchableImage:(UIImage *)image  
23.           withContentCenter:(CGRect)rect  
24.                     toLayer:(CALayer *)layer  
25. {  
26.     //set image  
27.     layer.contents = (__bridge id)image.CGImage;  
28.   
29.     //set contentsCenter  
30.     layer.contentsCenter = rect;  
31. }  
32.   
33. - (void)viewDidLoad  
34. {  
35.     [super viewDidLoad];  
36.     // Do any additional setup after loading the view from its nib.  
37.     //self.view.backgroundColor = [UIColor blackColor];  
38.   
39.     UIImage *image = [UIImage imageNamed:@"Snowman"];  
40.   
41.     self.layerView.layer.contents = (__bridge id)(image.CGImage);  
42.     //self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;  
43.     //self.layerView.layer.masksToBounds = YES;  
44.     //self.layerView.layer.contentsScale = image.scale;  
45.     //self.layerView.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);  
46.     //self.layerView.layer.contentsCenter = CGRectMake(0, 0.5, 1, 1);  
47.   
48.     self.layerView1.layer.contents = (__bridge id)(image.CGImage);  
49.     self.layerView1.layer.contentsGravity = kCAGravityResizeAspect;  
50.     //self.layerView.layer.masksToBounds = YES;  
51.     self.layerView1.layer.contentsScale = image.scale;//3;  
52.     //self.layerView1.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);  
53.   
54.     tick = 0;  
55.   
56.     [self performSelector:@selector(ChangeImage) withObject:nil afterDelay:0.25];  
57. }  
58.   
59. - (void)didReceiveMemoryWarning  
60. {  
61.     [super didReceiveMemoryWarning];  
62.     // Dispose of any resources that can be recreated.  
63. }  
64.   
65. - (void)ChangeImage  
66. {  
67.     UIImage *image = [UIImage imageNamed:@"Snowman"];  
68.   
69.     CGRect rect = CGRectMake(0, 0, 1, 1);  
70.   
71.     if (tick > 5)  
72.     {  
73.         tick = 0;  
74.     }  
75.   
76.     switch (tick)  
77.     {  
78.         case 0:  
79.             rect = CGRectMake(0, 0, 1, 0.75);  
80.             break;  
81.   
82.         case 1:  
83.             rect = CGRectMake(0, 0, 1, 0.5);  
84.             break;  
85.   
86.         case 2:  
87.             rect = CGRectMake(0, 0.25, 1, 0.5);  
88.             break;  
89.   
90.         case 3:  
91.             rect = CGRectMake(0, 0.25, 1, 0.75);  
92.             break;  
93.   
94.         case 4:  
95.             rect = CGRectMake(0, 0.5, 1, 1);  
96.             break;  
97.   
98.         case 5:  
99.             rect = CGRectMake(0, 0.25, 1, 1);  
100.             break;  
101.   
102.         default:  
103.             rect = CGRectMake(0, 0, 1, 1);  
104.             break;  
105.     }  
106.   
107.     tick++;  
108.   
109.     [self addStretchableImage:image withContentCenter:rect toLayer:self.layerView1.layer];  
110.   
111.     [self performSelector:@selector(ChangeImage) withObject:nil afterDelay:0.1];  
112. }  
113.   
114. @end  

顺带提一下IOS7的contentStretch更换为

-[UIImage resizableImageWithCapInsets:]

contentsRect这也是layer的一个重要属性，默认值是{0, 0, 1, 1}

[objc] view plaincopyprint?

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     // Do any additional setup after loading the view from its nib.  
5.     self.view.backgroundColor = [UIColor blackColor];  
6.   
7.     UIImage *image = [UIImage imageNamed:@"Snowman"];  
8.   
9.     self.layerView.layer.contents = (__bridge id)(image.CGImage);  
10.     self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;  
11.     //self.layerView.layer.masksToBounds = YES;  
12.     self.layerView.layer.contentsScale = image.scale;  
13. }  

稍微修改一下：

[objc] view plaincopyprint?

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     // Do any additional setup after loading the view from its nib.  
5.     self.view.backgroundColor = [UIColor blackColor];  
6.   
7.     UIImage *image = [UIImage imageNamed:@"Snowman"];  
8.   
9.     self.layerView.layer.contents = (__bridge id)(image.CGImage);  
10.     self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;  
11.     //self.layerView.layer.masksToBounds = YES;  
12.     self.layerView.layer.contentsScale = image.scale;  
13.     self.layerView.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);  
14. }  

大家可以看到增加了self.layerView.layer.contentsRect =CGRectMake(0,0,0.5,0.5);图片只剩下左上角了

还有一个发现self.layerView.layer.contentsScale = image.scale;不起作用了还原为原图大小，这个问题以后是需要注意的

以上是不是想到了什么类似东西

Custom Drawing 初涉基本Layer编程

代码我就不贴了，只是我简单的使用了一个CALayerDelegate

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;

这个不需要在这里说了吧

[objc] view plaincopyprint?

1. - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx  
2. {  
3.     //draw a thick red circle  
4.     CGContextSetLineWidth(ctx, 10.0f);  
5.     CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);  
6.     CGContextStrokeEllipseInRect(ctx, layer.bounds);  
7. }  

以上所有例子(除了我自己YY的)均可在 http://www.informit.com/title/9780133440751 下载