• 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

    [objc] view plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 plaincopyprint?在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 下载

     
  • 相关阅读:
    网络配置bridge
    ng-zorro等组件默认样式的修改
    正则表达式(/[^0-9]/g,'')中的"/g"是什么意思？
    ||与&&的返回值
    JS判断对象是否存在的10种方法总结
    undefined与null的区别
    前端页面布局中水平、垂直居中问题
    MAMP VirtualHost 无效 配置踩坑
    问题锦选
    Windows相关要点记录
  • 原文地址：https://www.cnblogs.com/lzlsky/p/4011813.html
Copyright © 2020-2023  润新知