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

时间  2019-11-13
标签 ios core animation advanced techniques 学习 笔记 栏目 iOS 繁體版
原文   原文链接

转载.编程

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.xcode

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.app


 

 

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 Layerside

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 Performanceoop

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

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

 

正文开始ui

我我的看书是不看所有的，只挑一些本身感兴趣的部分看，因此不要打算从个人笔记中了解本书的所有内容。this

 

第一章：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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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  

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

 

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

代码修改以下

 

[objc]  view plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 plain copy print ? 在CODE上查看代码片 派生到个人代码片
  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 下载

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程