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

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //load an image
    UIImage *image = [UIImage imageNamed:@"Snowman.png"];

    //add it directly to our view's layer
    self.layerView.layer.contents = (__bridge id)image.CGImage;
}

@end

看到layer能夠直接顯示image，圖片的顯示模式對應UIView的contentMode爲contentsGravity，它是個字符串對應以下：

kCAGravityCenter
kCAGravityTop
kCAGravityBottom
kCAGravityLeft
kCAGravityRight
kCAGravityTopLeft
kCAGravityTopRight
kCAGravityBottomLeft
kCAGravityBottomRight
kCAGravityResize
kCAGravityResizeAspect
kCAGravityResizeAspectFill

看英文你們應該和contentMode對應上了吧

 

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //load an image
    UIImage *image = [UIImage imageNamed:@"Snowman.png"];

    //add it directly to our view's layer
    self.layerView.layer.contents = (__bridge id)image.CGImage;

    //center the image
    self.layerView.layer.contentsGravity = kCAGravityCenter;
}

@end

 

咱們會看到圖片很大(請你們不要糾結我是模擬器的截圖，只是模擬一下)，繼續增長代碼以下

 

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //load an image
    UIImage *image = [UIImage imageNamed:@"Snowman.png"];

    //add it directly to our view's layer
    self.layerView.layer.contents = (__bridge id)image.CGImage;

    //center the image
    self.layerView.layer.contentsGravity = kCAGravityCenter;

    //set the contentsScale to match image
    self.layerView.layer.contentsScale = image.scale;
}

@end

 

添加代碼 self.layerView.layer.contentsScale = image.scale;後圖片大小正常了

 

layer也有對應UIView的clipsToBounds的函數masksToBounds

代碼修改以下

 

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //load an image
    UIImage *image = [UIImage imageNamed:@"Snowman.png"];

    //add it directly to our view's layer
    self.layerView.layer.contents = (__bridge id)image.CGImage;

    //center the image
    self.layerView.layer.contentsGravity = kCAGravityCenter;

    //set the contentsScale to match screen
    self.layerView.layer.contentsScale = image.scale;

    //clip the snowman to fit his bounds
    self.layerView.layer.masksToBounds = YES;
}

@end

再看結果：

 

 

以上太基礎了，後面的相對複雜和有意思些，相對於UIView拉伸效果contentStretch相同的Layer的contentsCenter，

這個函數可不是設置中心座標的，它是個Rect。

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

我作了個簡單效果，以下：

 

#import "ViewController.h"

@interface ViewController ()
{
    NSInteger tick;
}

@end


@implementation ViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)addStretchableImage:(UIImage *)image
          withContentCenter:(CGRect)rect
                    toLayer:(CALayer *)layer
{
    //set image
    layer.contents = (__bridge id)image.CGImage;

    //set contentsCenter
    layer.contentsCenter = rect;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    //self.view.backgroundColor = [UIColor blackColor];

    UIImage *image = [UIImage imageNamed:@"Snowman"];

    self.layerView.layer.contents = (__bridge id)(image.CGImage);
    //self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;
    //self.layerView.layer.masksToBounds = YES;
    //self.layerView.layer.contentsScale = image.scale;
    //self.layerView.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);
    //self.layerView.layer.contentsCenter = CGRectMake(0, 0.5, 1, 1);

    self.layerView1.layer.contents = (__bridge id)(image.CGImage);
    self.layerView1.layer.contentsGravity = kCAGravityResizeAspect;
    //self.layerView.layer.masksToBounds = YES;
    self.layerView1.layer.contentsScale = image.scale;//3;
    //self.layerView1.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);

    tick = 0;

    [self performSelector:@selector(ChangeImage) withObject:nil afterDelay:0.25];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)ChangeImage
{
    UIImage *image = [UIImage imageNamed:@"Snowman"];

    CGRect rect = CGRectMake(0, 0, 1, 1);

    if (tick > 5)
    {
        tick = 0;
    }

    switch (tick)
    {
        case 0:
            rect = CGRectMake(0, 0, 1, 0.75);
            break;

        case 1:
            rect = CGRectMake(0, 0, 1, 0.5);
            break;

        case 2:
            rect = CGRectMake(0, 0.25, 1, 0.5);
            break;

        case 3:
            rect = CGRectMake(0, 0.25, 1, 0.75);
            break;

        case 4:
            rect = CGRectMake(0, 0.5, 1, 1);
            break;

        case 5:
            rect = CGRectMake(0, 0.25, 1, 1);
            break;

        default:
            rect = CGRectMake(0, 0, 1, 1);
            break;
    }

    tick++;

    [self addStretchableImage:image withContentCenter:rect toLayer:self.layerView1.layer];

    [self performSelector:@selector(ChangeImage) withObject:nil afterDelay:0.1];
}

@end

簡單的一個動畫模擬如圖：

 

順帶提一下IOS7的contentStretch更換爲

-[UIImage resizableImageWithCapInsets:]

 

contentsRect這也是layer的一個重要屬性，默認值是{0, 0, 1, 1}

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.view.backgroundColor = [UIColor blackColor];

    UIImage *image = [UIImage imageNamed:@"Snowman"];

    self.layerView.layer.contents = (__bridge id)(image.CGImage);
    self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;
    //self.layerView.layer.masksToBounds = YES;
    self.layerView.layer.contentsScale = image.scale;
}

結果以下：

 

稍微修改一下：

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.view.backgroundColor = [UIColor blackColor];

    UIImage *image = [UIImage imageNamed:@"Snowman"];

    self.layerView.layer.contents = (__bridge id)(image.CGImage);
    self.layerView.layer.contentsGravity = kCAGravityResizeAspect;//kCAGravityResizeAspectFill;
    //self.layerView.layer.masksToBounds = YES;
    self.layerView.layer.contentsScale = image.scale;
    self.layerView.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);
}

結果如圖：

 

你們能夠看到增長了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;

這個不須要在這裏說了吧

 

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

 

 

 

 

 

以上全部例子(除了我本身YY的)都可在 http://www.informit.com/title/9780133440751 下載