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

转载.

Book Description

Publication Date: August 12, 2013

Core Animation is the technology underlying Apple’s iOS user interface. By unleashing the full power of Core Animation, you can enhance your app with impressive 2D and 3D visual effects and create exciting and unique new interfaces.

In this in-depth guide, iOS developer Nick Lockwood takes you step-by-step through the Core Animation framework, building up your understanding through sample code and diagrams together with comprehensive explanations and helpful tips. Lockwood demystifies the Core Animation APIs, and teaches you how to make use of

• Layers and views, software drawing and hardware compositing
• Layer geometry, hit testing and clipping
• Layer effects, transforms and 3D interfaces
• Video playback, text, tiled images, OpenGL, particles and reflections
• Implicit and explicit animations
• Property animations, keyframes and transitions
• Easing, frame-by-frame animation and physics
• Performance tuning and much, much more!

Approximately 356 pages.

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

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

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

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对应上了吧

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

我们会看到图片很大(请大家不要纠结我是模拟器的截图，只是模拟一下)，继续增加代码如下

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

添加代码self.layerView.layer.contentsScale = image.scale;后图片大小正常了

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

代码修改如下

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

再看结果：

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

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

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

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

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

简单的一个动画模拟如图：

顺带提一下IOS7的contentStretch更换为

-[UIImage resizableImageWithCapInsets:]

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

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. UIImage *image = [UIImage imageNamed:@"Snowman"];
7. self.layerView.layer.contents = (__bridge id)(image.CGImage);
8. self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;
9. //self.layerView.layer.masksToBounds = YES;
10. self.layerView.layer.contentsScale = image.scale;
11. }

结果如下：

稍微修改一下：

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. UIImage *image = [UIImage imageNamed:@"Snowman"];
7. self.layerView.layer.contents = (__bridge id)(image.CGImage);
8. self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;
9. //self.layerView.layer.masksToBounds = YES;
10. self.layerView.layer.contentsScale = image.scale;
11. self.layerView.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);
12. }

结果如图：

大家可以看到增加了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;

这个不需要在这里说了吧

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 下载