iOS開發系列–讓你的應用“動”起來

發表於2015-09-20

概覽

在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程並不複雜，今天將帶大家一窺iOS動畫全貌。在這裡你可以看到iOS中如何使用圖層精簡非互動式繪圖，如何通過核心動畫建立基礎動畫、關鍵幀動畫、動畫組、轉場動畫，如何通過UIView的裝飾方法對這些動畫操作進行簡化等。在今天的文章裡您可以看到動畫操作在iOS中是如何簡單和高效，很多原來想做但是苦於沒有思路的動畫在iOS中將變得越發簡單：

CALayer
1. CALayer簡介
2. CALayer常用屬性
3. CALayer繪圖
Core Animation
1. 基礎動畫
2. 關鍵幀動畫
3. 動畫組
4. 轉場動畫
5. 逐幀動畫
UIView動畫封裝
1. 基礎動畫
2. 關鍵幀動畫
3. 轉場動畫
目錄

CALayer

CALayer簡介

在介紹動畫操作之前我們必須先來了解一個動畫中常用的物件CALayer。CALayer包含在QuartzCore框架中，這是一個跨平臺的框架，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation開發動畫的本質就是將CALayer中的內容轉化為點陣圖從而供硬體操作，所以要熟練掌握動畫操作必須先來熟悉CALayer。

在上一篇文章中使用Quartz 2D繪圖時大家其實已經用到了CALayer，當利用drawRect:方法繪圖的本質就是繪製到了UIView的layer（屬性）中，可是這個過程大家在上一節中根本體會不到。但是在Core Animation中我們操作更多的則不再是UIView而是直接面對CALayer。下圖描繪了CALayer和UIView的關係，在UIView中有一個layer屬性作為根圖層，根圖層上可以放其他子圖層，在UIView中所有能夠看到的內容都包含在layer中：

CALayer常用屬性

在iOS中CALayer的設計主要是了為了內容展示和動畫操作，CALayer本身並不包含在UIKit中，它不能響應事件。由於CALayer在設計之初就考慮它的動畫操作功能，CALayer很多屬性在修改時都能形成動畫效果，這種屬性稱為“隱式動畫屬性”。但是對於UIView的根圖層而言屬性的修改並不形成動畫效果，因為很多情況下根圖層更多的充當容器的做用，如果它的屬性變動形成動畫效果會直接影響子圖層。另外，UIView的根圖層建立工作完全由iOS負責完成，無法重新建立，但是可以往根圖層中新增子圖層或移除子圖層。

下表列出了CALayer常用的屬性：

屬性	說明	是否支援隱式動畫
anchorPoint	和中心點position重合的一個點，稱為“錨點”，錨點的描述是相對於x、y位置比例而言的預設在影象中心點(0.5,0.5)的位置	是
backgroundColor	圖層背景顏色	是
borderColor	邊框顏色	是
borderWidth	邊框寬度	是
bounds	圖層大小	是
contents	圖層顯示內容，例如可以將圖片作為圖層內容顯示	是
contentsRect	圖層顯示內容的大小和位置	是
cornerRadius	圓角半徑	是
doubleSided	圖層背面是否顯示，預設為YES	否
frame	圖層大小和位置，不支援隱式動畫，所以CALayer中很少使用frame，通常使用bounds和position代替	否
hidden	是否隱藏	是
mask	圖層蒙版	是
maskToBounds	子圖層是否剪下圖層邊界，預設為NO	是
opacity	透明度，類似於UIView的alpha	是
position	圖層中心點位置，類似於UIView的center	是
shadowColor	陰影顏色	是
shadowOffset	陰影偏移量	是
shadowOpacity	陰影透明度，注意預設為0，如果設定陰影必須設定此屬性	是
shadowPath	陰影的形狀	是
shadowRadius	陰影模糊半徑	是
sublayers	子圖層	是
sublayerTransform	子圖層形變	是
transform	圖層形變	是

隱式屬性動畫的本質是這些屬性的變動預設隱含了CABasicAnimation動畫實現，詳情大家可以參照Xcode幫助文件中“Animatable Properties”一節。
在CALayer中很少使用frame屬性，因為frame本身不支援動畫效果，通常使用bounds和position代替。
CALayer中透明度使用opacity表示而不是alpha；中心點使用position表示而不是center。
anchorPoint屬性是圖層的錨點，範圍在（0~1,0~1）表示在x、y軸的比例，這個點永遠可以同position（中心點）重合，當圖層中心點固定後，調整anchorPoint即可達到調整圖層顯示位置的作用（因為它永遠和position重合）

為了進一步說明anchorPoint的作用，假設有一個層大小100*100，現在中心點位置（50,50），由此可以得出frame（0,0,100,100）。上面說過anchorPoint預設為（0.5,0.5），同中心點position重合，此時使用圖形描述如圖1；當修改anchorPoint為（0,0），此時錨點處於圖層左上角，但是中心點poition並不會改變，因此圖層會向右下角移動，如圖2；然後修改anchorPoint為（1,1,），position還是保持位置不變，錨點處於圖層右下角，此時圖層如圖3。

下面通過一個簡單的例子演示一下上面幾個屬性，程式初始化階段我們定義一個正方形，但是圓角路徑調整為正方形邊長的一般，使其看起來是一個圓形，在點選螢幕的時候修改圖層的屬性形成動畫效果（注意在程式中沒有直接修改UIView的layer屬性，因為根圖層無法形成動畫效果）：

//
//  KCMainViewController.m
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define WIDTH 50

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self drawMyLayer];
}

#pragma mark 繪製圖層
-(void)drawMyLayer{
    CGSize size=[UIScreen mainScreen].bounds.size;

    //獲得根圖層
    CALayer *layer=[[CALayer alloc]init];
    //設定背景顏色,由於QuartzCore是跨平臺框架，無法直接使用UIColor
    layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor;
    //設定中心點
    layer.position=CGPointMake(size.width/2, size.height/2);
    //設定大小
    layer.bounds=CGRectMake(0, 0, WIDTH,WIDTH);
    //設定圓角,當圓角半徑等於矩形的一半時看起來就是一個圓形
    layer.cornerRadius=WIDTH/2;
    //設定陰影
    layer.shadowColor=[UIColor grayColor].CGColor;
    layer.shadowOffset=CGSizeMake(2, 2);
    layer.shadowOpacity=.9;
    //設定邊框
//    layer.borderColor=[UIColor whiteColor].CGColor;
//    layer.borderWidth=1;

    //設定錨點
//    layer.anchorPoint=CGPointZero;

    [self.view.layer addSublayer:layer];

}

#pragma mark 點選放大
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=[touches anyObject];
    CALayer *layer=self.view.layer.sublayers[0];
    CGFloat width=layer.bounds.size.width;
    if (width==WIDTH) {
        width=WIDTH*4;
    }else{
        width=WIDTH;
    }
    layer.bounds=CGRectMake(0, 0, width, width);
    layer.position=[touch locationInView:self.view];
    layer.cornerRadius=width/2;
}
@end

// KCMainViewController.m

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#define WIDTH 50

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view.

[self drawMyLayer];

}

#pragma mark 繪製圖層

-(void)drawMyLayer{

CGSize size=[UIScreen mainScreen].bounds.size;

//獲得根圖層

CALayer *layer=[[CALayer alloc]init];

//設定背景顏色,由於QuartzCore是跨平臺框架，無法直接使用UIColor

layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor;

//設定中心點

layer.position=CGPointMake(size.width/2, size.height/2);

//設定大小

layer.bounds=CGRectMake(0, 0, WIDTH,WIDTH);

//設定圓角,當圓角半徑等於矩形的一半時看起來就是一個圓形

layer.cornerRadius=WIDTH/2;

//設定陰影

layer.shadowColor=[UIColor grayColor].CGColor;

layer.shadowOffset=CGSizeMake(2, 2);

layer.shadowOpacity=.9;

//設定邊框

// layer.borderColor=[UIColor whiteColor].CGColor;

// layer.borderWidth=1;

//設定錨點

// layer.anchorPoint=CGPointZero;

[self.view.layer addSublayer:layer];

}

#pragma mark 點選放大

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=[touches anyObject];

CALayer *layer=self.view.layer.sublayers[0];

CGFloat width=layer.bounds.size.width;

if (width==WIDTH) {

width=WIDTH*4;

}else{

width=WIDTH;

}

layer.bounds=CGRectMake(0, 0, width, width);

layer.position=[touch locationInView:self.view];

layer.cornerRadius=width/2;

}

@end

執行效果：

CALayer繪圖

上一篇文章中重點討論了使用Quartz 2D繪圖，當時呼叫了UIView的drawRect:方法繪製圖形、影象，這種方式本質還是在圖層中繪製，但是這裡會著重介紹一下如何直接在圖層中繪圖。在圖層中繪圖的方式跟原來基本沒有區別，只是drawRect:方法是由UIKit元件進行呼叫，因此裡面可以使用一些UIKit封裝的方法進行繪圖，而直接繪製到圖層的方法由於並非UIKit直接呼叫因此只能用原生的Core Graphics方法繪製。

圖層繪圖有兩種方法，不管使用哪種方法繪製完必須呼叫圖層的setNeedDisplay方法（注意是圖層的方法，不是UIView的方法，前面我們介紹過UIView也有此方法）

通過圖層代理drawLayer: inContext:方法繪製
通過自定義圖層drawInContext:方法繪製

使用代理方法繪圖

通過代理方法進行圖層繪圖只要指定圖層的代理，然後在代理物件中重寫-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx方法即可。需要注意這個方法雖然是代理方法但是不用手動實現CALayerDelegate，因為CALayer定義中給NSObject做了分類擴充套件，所有的NSObject都包含這個方法。另外設定完代理後必須要呼叫圖層的setNeedDisplay方法，否則繪製的內容無法顯示。

下面的程式碼演示了在一個自定義圖層繪製一張影象並將影象設定成圓形，這種效果在很多應用中很常見，如最新版的手機QQ頭像就是這種效果：

//
//  KCMainViewController.m
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //自定義圖層
    CALayer *layer=[[CALayer alloc]init];
    layer.bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);
    layer.position=CGPointMake(160, 200);
    layer.backgroundColor=[UIColor redColor].CGColor;
    layer.cornerRadius=PHOTO_HEIGHT/2;
    //注意僅僅設定圓角，對於圖形而言可以正常顯示，但是對於圖層中繪製的圖片無法正確顯示
    //如果想要正確顯示則必須設定masksToBounds=YES，剪下子圖層
    layer.masksToBounds=YES;
    //陰影效果無法和masksToBounds同時使用，因為masksToBounds的目的就是剪下外邊框，
    //而陰影效果剛好在外邊框
//    layer.shadowColor=[UIColor grayColor].CGColor;
//    layer.shadowOffset=CGSizeMake(2, 2);
//    layer.shadowOpacity=1;
    //設定邊框
    layer.borderColor=[UIColor whiteColor].CGColor;
    layer.borderWidth=2;

    //設定圖層代理
    layer.delegate=self;

    //新增圖層到根圖層
    [self.view.layer addSublayer:layer];

    //呼叫圖層setNeedDisplay,否則代理方法不會被呼叫
    [layer setNeedsDisplay];
}

#pragma mark 繪製圖形、影象到圖層，注意引數中的ctx是圖層的圖形上下文，其中繪圖位置也是相對圖層而言的
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
//    NSLog(@"%@",layer);//這個圖層正是上面定義的圖層
    CGContextSaveGState(ctx);

    //圖形上下文形變，解決圖片倒立的問題
    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -PHOTO_HEIGHT);

    UIImage *image=[UIImage imageNamed:@"photo.png"];
    //注意這個位置是相對於圖層而言的不是螢幕
    CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage);

//    CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100));
//    CGContextDrawPath(ctx, kCGPathFillStroke);

    CGContextRestoreGState(ctx);
}

@end

// KCMainViewController.m

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//自定義圖層

CALayer *layer=[[CALayer alloc]init];

layer.bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);

layer.position=CGPointMake(160, 200);

layer.backgroundColor=[UIColor redColor].CGColor;

layer.cornerRadius=PHOTO_HEIGHT/2;

//注意僅僅設定圓角，對於圖形而言可以正常顯示，但是對於圖層中繪製的圖片無法正確顯示

//如果想要正確顯示則必須設定masksToBounds=YES，剪下子圖層

layer.masksToBounds=YES;

//陰影效果無法和masksToBounds同時使用，因為masksToBounds的目的就是剪下外邊框，

//而陰影效果剛好在外邊框

// layer.shadowColor=[UIColor grayColor].CGColor;

// layer.shadowOffset=CGSizeMake(2, 2);

// layer.shadowOpacity=1;

//設定邊框

layer.borderColor=[UIColor whiteColor].CGColor;

layer.borderWidth=2;

//設定圖層代理

layer.delegate=self;

//新增圖層到根圖層

[self.view.layer addSublayer:layer];

//呼叫圖層setNeedDisplay,否則代理方法不會被呼叫

[layer setNeedsDisplay];

}

#pragma mark 繪製圖形、影象到圖層，注意引數中的ctx是圖層的圖形上下文，其中繪圖位置也是相對圖層而言的

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

// NSLog(@"%@",layer);//這個圖層正是上面定義的圖層

CGContextSaveGState(ctx);

//圖形上下文形變，解決圖片倒立的問題

CGContextScaleCTM(ctx, 1, -1);

CGContextTranslateCTM(ctx, 0, -PHOTO_HEIGHT);

UIImage *image=[UIImage imageNamed:@"photo.png"];

//注意這個位置是相對於圖層而言的不是螢幕

CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage);

// CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100));

// CGContextDrawPath(ctx, kCGPathFillStroke);

CGContextRestoreGState(ctx);

}

@end

執行效果：

使用代理方法繪製圖形、影象時在drawLayer:inContext:方法中可以通過事件引數獲得繪製的圖層和圖形上下文。在這個方法中繪圖時所有的位置都是相對於圖層而言的，圖形上下文指的也是當前圖層的圖形上下文。

需要注意的是上面程式碼中繪製圖片圓形裁切效果時如果不設定masksToBounds是無法顯示圓形，但是對於其他圖形卻沒有這個限制。原因就是當繪製一張圖片到圖層上的時候會重新建立一個圖層新增到當前圖層，這樣一來如果設定了圓角之後雖然底圖層有圓角效果，但是子圖層還是矩形，只有設定了masksToBounds為YES讓子圖層按底圖層剪下才能顯示圓角效果。同樣的，有些朋友經常在網上提問說為什麼使用UIImageView的layer設定圓角後圖片無法顯示圓角，只有設定masksToBounds才能出現效果，也是類似的問題。

擴充套件1–帶陰影效果的圓形圖片裁切

如果設定了masksToBounds=YES之後確實可以顯示圖片圓角效果，但遺憾的是設定了這個屬性之後就無法設定陰影效果。因為masksToBounds=YES就意味著外邊框不能顯示，而陰影恰恰作為外邊框繪製的，這樣兩個設定就產生了矛盾。要解決這個問題不妨換個思路:使用兩個大小一樣的圖層，下面的圖層負責繪製陰影，上面的圖層用來顯示圖片。

//
//  KCMainViewController.m
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    CGPoint position= CGPointMake(160, 200);
    CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);
    CGFloat cornerRadius=PHOTO_HEIGHT/2;
    CGFloat borderWidth=2;

    //陰影圖層
    CALayer *layerShadow=[[CALayer alloc]init];
    layerShadow.bounds=bounds;
    layerShadow.position=position;
    layerShadow.cornerRadius=cornerRadius;
    layerShadow.shadowColor=[UIColor grayColor].CGColor;
    layerShadow.shadowOffset=CGSizeMake(2, 1);
    layerShadow.shadowOpacity=1;
    layerShadow.borderColor=[UIColor whiteColor].CGColor;
    layerShadow.borderWidth=borderWidth;
    [self.view.layer addSublayer:layerShadow];

    //容器圖層
    CALayer *layer=[[CALayer alloc]init];
    layer.bounds=bounds;
    layer.position=position;
    layer.backgroundColor=[UIColor redColor].CGColor;
    layer.cornerRadius=cornerRadius;
    layer.masksToBounds=YES;
    layer.borderColor=[UIColor whiteColor].CGColor;
    layer.borderWidth=borderWidth;

    //設定圖層代理
    layer.delegate=self;

    //新增圖層到根圖層
    [self.view.layer addSublayer:layer];

    //呼叫圖層setNeedDisplay,否則代理方法不會被呼叫
    [layer setNeedsDisplay];
}

#pragma mark 繪製圖形、影象到圖層，注意引數中的ctx是圖層的圖形上下文，其中繪圖位置也是相對圖層而言的
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
    //    NSLog(@"%@",layer);//這個圖層正是上面定義的圖層
    CGContextSaveGState(ctx);

    //圖形上下文形變，解決圖片倒立的問題
    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -PHOTO_HEIGHT);

    UIImage *image=[UIImage imageNamed:@"photo.jpg"];
    //注意這個位置是相對於圖層而言的不是螢幕
    CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage);

    //    CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100));
    //    CGContextDrawPath(ctx, kCGPathFillStroke);

    CGContextRestoreGState(ctx);
}
@end

// KCMainViewController.m

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

CGPoint position= CGPointMake(160, 200);

CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);

CGFloat cornerRadius=PHOTO_HEIGHT/2;

CGFloat borderWidth=2;

//陰影圖層

CALayer *layerShadow=[[CALayer alloc]init];

layerShadow.bounds=bounds;

layerShadow.position=position;

layerShadow.cornerRadius=cornerRadius;

layerShadow.shadowColor=[UIColor grayColor].CGColor;

layerShadow.shadowOffset=CGSizeMake(2, 1);

layerShadow.shadowOpacity=1;

layerShadow.borderColor=[UIColor whiteColor].CGColor;

layerShadow.borderWidth=borderWidth;

[self.view.layer addSublayer:layerShadow];

//容器圖層

CALayer *layer=[[CALayer alloc]init];

layer.bounds=bounds;

layer.position=position;

layer.backgroundColor=[UIColor redColor].CGColor;

layer.cornerRadius=cornerRadius;

layer.masksToBounds=YES;

layer.borderColor=[UIColor whiteColor].CGColor;

layer.borderWidth=borderWidth;

//設定圖層代理

layer.delegate=self;

//新增圖層到根圖層

[self.view.layer addSublayer:layer];

//呼叫圖層setNeedDisplay,否則代理方法不會被呼叫

[layer setNeedsDisplay];

}

#pragma mark 繪製圖形、影象到圖層，注意引數中的ctx是圖層的圖形上下文，其中繪圖位置也是相對圖層而言的

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

// NSLog(@"%@",layer);//這個圖層正是上面定義的圖層

CGContextSaveGState(ctx);

//圖形上下文形變，解決圖片倒立的問題

CGContextScaleCTM(ctx, 1, -1);

CGContextTranslateCTM(ctx, 0, -PHOTO_HEIGHT);

UIImage *image=[UIImage imageNamed:@"photo.jpg"];

//注意這個位置是相對於圖層而言的不是螢幕

CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage);

// CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100));

// CGContextDrawPath(ctx, kCGPathFillStroke);

CGContextRestoreGState(ctx);

}

@end

執行效果：

擴充套件2–圖層的形變

從上面程式碼中大家不難發現使用Core Graphics繪製圖片時會倒立顯示，對圖層的圖形上下文進行了反轉。在前一篇文章中也採用了類似的方法去解決這個問題，但是在那篇文章中也提到過如果直接讓影象沿著x軸旋轉180度同樣可以達到正確顯示的目的，只是當時的旋轉靠圖形上下文還無法繞x軸旋轉。今天學習了圖層之後，其實可以控制圖層直接旋轉而不用藉助於圖形上下文的形變操作，而且這麼操作起來會更加簡單和直觀。對於上面的程式，只需要設定圖層的transform屬性即可。需要注意的是transform是CATransform3D型別，形變可以在三個維度上進行，使用方法和前面介紹的二維形變是類似的，而且都有對應的形變設定方法（如：CATransform3DMakeTranslation()、CATransform3DMakeScale()、CATransform3DMakeRotation()）。下面的程式碼通過CATransform3DMakeRotation()方法在x軸旋轉180度解決倒立問題：

//
//  形變演示
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    CGPoint position= CGPointMake(160, 200);
    CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);
    CGFloat cornerRadius=PHOTO_HEIGHT/2;
    CGFloat borderWidth=2;

    //陰影圖層
    CALayer *layerShadow=[[CALayer alloc]init];
    layerShadow.bounds=bounds;
    layerShadow.position=position;
    layerShadow.cornerRadius=cornerRadius;
    layerShadow.shadowColor=[UIColor grayColor].CGColor;
    layerShadow.shadowOffset=CGSizeMake(2, 1);
    layerShadow.shadowOpacity=1;
    layerShadow.borderColor=[UIColor whiteColor].CGColor;
    layerShadow.borderWidth=borderWidth;
    [self.view.layer addSublayer:layerShadow];

    //容器圖層
    CALayer *layer=[[CALayer alloc]init];
    layer.bounds=bounds;
    layer.position=position;
    layer.backgroundColor=[UIColor redColor].CGColor;
    layer.cornerRadius=cornerRadius;
    layer.masksToBounds=YES;
    layer.borderColor=[UIColor whiteColor].CGColor;
    layer.borderWidth=borderWidth;

    //利用圖層形變解決影象倒立問題
    layer.transform=CATransform3DMakeRotation(M_PI, 1, 0, 0);

    //設定圖層代理
    layer.delegate=self;

    //新增圖層到根圖層
    [self.view.layer addSublayer:layer];

    //呼叫圖層setNeedDisplay,否則代理方法不會被呼叫
    [layer setNeedsDisplay];
}

#pragma mark 繪製圖形、影象到圖層，注意引數中的ctx時圖層的圖形上下文，其中繪圖位置也是相對圖層而言的
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
    //    NSLog(@"%@",layer);//這個圖層正是上面定義的圖層
    UIImage *image=[UIImage imageNamed:@"photo.jpg"];
    //注意這個位置是相對於圖層而言的不是螢幕
    CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage);
}

@end

// 形變演示

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

CGPoint position= CGPointMake(160, 200);

CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);

CGFloat cornerRadius=PHOTO_HEIGHT/2;

CGFloat borderWidth=2;

//陰影圖層

CALayer *layerShadow=[[CALayer alloc]init];

layerShadow.bounds=bounds;

layerShadow.position=position;

layerShadow.cornerRadius=cornerRadius;

layerShadow.shadowColor=[UIColor grayColor].CGColor;

layerShadow.shadowOffset=CGSizeMake(2, 1);

layerShadow.shadowOpacity=1;

layerShadow.borderColor=[UIColor whiteColor].CGColor;

layerShadow.borderWidth=borderWidth;

[self.view.layer addSublayer:layerShadow];

//容器圖層

CALayer *layer=[[CALayer alloc]init];

layer.bounds=bounds;

layer.position=position;

layer.backgroundColor=[UIColor redColor].CGColor;

layer.cornerRadius=cornerRadius;

layer.masksToBounds=YES;

layer.borderColor=[UIColor whiteColor].CGColor;

layer.borderWidth=borderWidth;

//利用圖層形變解決影象倒立問題

layer.transform=CATransform3DMakeRotation(M_PI, 1, 0, 0);

//設定圖層代理

layer.delegate=self;

//新增圖層到根圖層

[self.view.layer addSublayer:layer];

//呼叫圖層setNeedDisplay,否則代理方法不會被呼叫

[layer setNeedsDisplay];

}

#pragma mark 繪製圖形、影象到圖層，注意引數中的ctx時圖層的圖形上下文，其中繪圖位置也是相對圖層而言的

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

// NSLog(@"%@",layer);//這個圖層正是上面定義的圖層

UIImage *image=[UIImage imageNamed:@"photo.jpg"];

//注意這個位置是相對於圖層而言的不是螢幕

CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage);

}

@end

事實上如果僅僅就顯示一張圖片在圖層中當然沒有必要那麼麻煩，直接設定圖層contents就可以了，不牽涉到繪圖也就沒有倒立的問題了。

//
//  圖層內容設定
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    CGPoint position= CGPointMake(160, 200);
    CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);
    CGFloat cornerRadius=PHOTO_HEIGHT/2;
    CGFloat borderWidth=2;

    //陰影圖層
    CALayer *layerShadow=[[CALayer alloc]init];
    layerShadow.bounds=bounds;
    layerShadow.position=position;
    layerShadow.cornerRadius=cornerRadius;
    layerShadow.shadowColor=[UIColor grayColor].CGColor;
    layerShadow.shadowOffset=CGSizeMake(2, 1);
    layerShadow.shadowOpacity=1;
    layerShadow.borderColor=[UIColor whiteColor].CGColor;
    layerShadow.borderWidth=borderWidth;
    [self.view.layer addSublayer:layerShadow];

    //容器圖層
    CALayer *layer=[[CALayer alloc]init];
    layer.bounds=bounds;
    layer.position=position;
    layer.backgroundColor=[UIColor redColor].CGColor;
    layer.cornerRadius=cornerRadius;
    layer.masksToBounds=YES;
    layer.borderColor=[UIColor whiteColor].CGColor;
    layer.borderWidth=borderWidth;
    //設定內容（注意這裡一定要轉換為CGImage）
    UIImage *image=[UIImage imageNamed:@"photo.jpg"];
//    layer.contents=(id)image.CGImage;
    [layer setContents:(id)image.CGImage];

    //新增圖層到根圖層
    [self.view.layer addSublayer:layer];
}

@end

// 圖層內容設定

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#define PHOTO_HEIGHT 150

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

CGPoint position= CGPointMake(160, 200);

CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT);

CGFloat cornerRadius=PHOTO_HEIGHT/2;

CGFloat borderWidth=2;

//陰影圖層

CALayer *layerShadow=[[CALayer alloc]init];

layerShadow.bounds=bounds;

layerShadow.position=position;

layerShadow.cornerRadius=cornerRadius;

layerShadow.shadowColor=[UIColor grayColor].CGColor;

layerShadow.shadowOffset=CGSizeMake(2, 1);

layerShadow.shadowOpacity=1;

layerShadow.borderColor=[UIColor whiteColor].CGColor;

layerShadow.borderWidth=borderWidth;

[self.view.layer addSublayer:layerShadow];

//容器圖層

CALayer *layer=[[CALayer alloc]init];

layer.bounds=bounds;

layer.position=position;

layer.backgroundColor=[UIColor redColor].CGColor;

layer.cornerRadius=cornerRadius;

layer.masksToBounds=YES;

layer.borderColor=[UIColor whiteColor].CGColor;

layer.borderWidth=borderWidth;

//設定內容（注意這裡一定要轉換為CGImage）

UIImage *image=[UIImage imageNamed:@"photo.jpg"];

// layer.contents=(id)image.CGImage;

[layer setContents:(id)image.CGImage];

//新增圖層到根圖層

[self.view.layer addSublayer:layer];

}

@end

既然如此為什麼還大費周章的說形變呢，因為形變對於動畫有特殊的意義。在動畫開發中形變往往不是直接設定transform，而是通過keyPath進行設定。這種方法設定形變的本質和前面沒有區別，只是利用了KVC可以動態修改其屬性值而已，但是這種方式在動畫中確實很常用的，因為它可以很方便的將幾種形變組合到一起使用。同樣是解決動畫旋轉問題，只要將前面的旋轉程式碼改為下面的程式碼即可：

[layer setValue:@M_PI forKeyPath:@"transform.rotation.x"];

1	[layer setValue:@M_PI forKeyPath:@"transform.rotation.x"];

當然，通過key path設定形變引數就需要了解有哪些key path可以設定，這裡就不再一一列舉，大家可以參照Xcode幫助文件中“CATransform3D Key Paths”一節，裡面描述的很詳細。

使用自定義圖層繪圖

在自定義圖層中繪圖時只要自己編寫一個類繼承於CALayer然後在drawInContext:中繪圖即可。同前面在代理方法繪圖一樣，要顯示圖層中繪製的內容也要呼叫圖層的setNeedDisplay方法，否則drawInContext方法將不會呼叫。

前面的文章中曾經說過，在使用Quartz 2D在UIView中繪製圖形的本質也是繪製到圖層中，為了說明這個問題下面演示自定義圖層繪圖時沒有直接在檢視控制器中呼叫自定義圖層，而是在一個UIView將自定義圖層新增到UIView的根圖層中（例子中的UIView跟自定義圖層繪圖沒有直接關係）。從下面的程式碼中可以看到：UIView在顯示時其根圖層會自動建立一個CGContextRef（CALayer本質使用的是點陣圖上下文），同時呼叫圖層代理（UIView建立圖層會自動設定圖層代理為其自身）的draw: inContext:方法並將圖形上下文作為引數傳遞給這個方法。而在UIView的draw:inContext:方法中會呼叫其drawRect:方法，在drawRect:方法中使用UIGraphicsGetCurrentContext()方法得到的上下文正是前面建立的上下文。

KCLayer.m

//
//  KCLayer.m
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCLayer.h"

@implementation KCLayer

-(void)drawInContext:(CGContextRef)ctx{
    NSLog(@"3-drawInContext:");
    NSLog(@"CGContext:%@",ctx);
//    CGContextRotateCTM(ctx, M_PI_4);
    CGContextSetRGBFillColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
    CGContextSetRGBStrokeColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
//    CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100));
//    CGContextFillEllipseInRect(ctx, CGRectMake(50, 50, 100, 100));
    CGContextMoveToPoint(ctx, 94.5, 33.5);

    //// Star Drawing
    CGContextAddLineToPoint(ctx,104.02, 47.39);
    CGContextAddLineToPoint(ctx,120.18, 52.16);
    CGContextAddLineToPoint(ctx,109.91, 65.51);
    CGContextAddLineToPoint(ctx,110.37, 82.34);
    CGContextAddLineToPoint(ctx,94.5, 76.7);
    CGContextAddLineToPoint(ctx,78.63, 82.34);
    CGContextAddLineToPoint(ctx,79.09, 65.51);
    CGContextAddLineToPoint(ctx,68.82, 52.16);
    CGContextAddLineToPoint(ctx,84.98, 47.39);
    CGContextClosePath(ctx);

    CGContextDrawPath(ctx, kCGPathFillStroke);
}

@end

// KCLayer.m

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCLayer.h"

@implementation KCLayer

-(void)drawInContext:(CGContextRef)ctx{

NSLog(@"3-drawInContext:");

NSLog(@"CGContext:%@",ctx);

// CGContextRotateCTM(ctx, M_PI_4);

CGContextSetRGBFillColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);

CGContextSetRGBStrokeColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);

// CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100));

// CGContextFillEllipseInRect(ctx, CGRectMake(50, 50, 100, 100));

CGContextMoveToPoint(ctx, 94.5, 33.5);

//// Star Drawing

CGContextAddLineToPoint(ctx,104.02, 47.39);

CGContextAddLineToPoint(ctx,120.18, 52.16);

CGContextAddLineToPoint(ctx,109.91, 65.51);

CGContextAddLineToPoint(ctx,110.37, 82.34);

CGContextAddLineToPoint(ctx,94.5, 76.7);

CGContextAddLineToPoint(ctx,78.63, 82.34);

CGContextAddLineToPoint(ctx,79.09, 65.51);

CGContextAddLineToPoint(ctx,68.82, 52.16);

CGContextAddLineToPoint(ctx,84.98, 47.39);

CGContextClosePath(ctx);

CGContextDrawPath(ctx, kCGPathFillStroke);

}

@end

KCView.m

//
//  KCView.m
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCView.h"
#import "KCLayer.h"

@implementation KCView

-(instancetype)initWithFrame:(CGRect)frame{
    NSLog(@"initWithFrame:");
    if (self=[super initWithFrame:frame]) {
        KCLayer *layer=[[KCLayer alloc]init];
        layer.bounds=CGRectMake(0, 0, 185, 185);
        layer.position=CGPointMake(160,284);
        layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor;

        //顯示圖層
        [layer setNeedsDisplay];

        [self.layer addSublayer:layer];
    }
    return self;
}

-(void)drawRect:(CGRect)rect{
    NSLog(@"2-drawRect:");
    NSLog(@"CGContext:%@",UIGraphicsGetCurrentContext());//得到的當前圖形上下文正是drawLayer中傳遞的
    [super drawRect:rect];

}

-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
    NSLog(@"1-drawLayer:inContext:");
    NSLog(@"CGContext:%@",ctx);
    [super drawLayer:layer inContext:ctx];

}

@end

// KCView.m

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCView.h"

#import "KCLayer.h"

@implementation KCView

-(instancetype)initWithFrame:(CGRect)frame{

NSLog(@"initWithFrame:");

if (self=[super initWithFrame:frame]) {

KCLayer *layer=[[KCLayer alloc]init];

layer.bounds=CGRectMake(0, 0, 185, 185);

layer.position=CGPointMake(160,284);

layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor;

//顯示圖層

[layer setNeedsDisplay];

[self.layer addSublayer:layer];

}

return self;

}

-(void)drawRect:(CGRect)rect{

NSLog(@"2-drawRect:");

NSLog(@"CGContext:%@",UIGraphicsGetCurrentContext());//得到的當前圖形上下文正是drawLayer中傳遞的

[super drawRect:rect];

}

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

NSLog(@"1-drawLayer:inContext:");

NSLog(@"CGContext:%@",ctx);

[super drawLayer:layer inContext:ctx];

}

@end

KCMainViewController.m

//
//  KCMainViewController.m
//  CALayer
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#import "KCView.h"

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    KCView *view=[[KCView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    view.backgroundColor=[UIColor colorWithRed:249.0/255.0 green:249.0/255.0 blue:249.0/255.0 alpha:1];

    [self.view addSubview:view];
}

@end

// KCMainViewController.m

// CALayer

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#import "KCView.h"

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

KCView *view=[[KCView alloc]initWithFrame:[UIScreen mainScreen].bounds];

view.backgroundColor=[UIColor colorWithRed:249.0/255.0 green:249.0/255.0 blue:249.0/255.0 alpha:1];

[self.view addSubview:view];

}

@end

執行效果：

Core Animation

大家都知道在iOS中實現一個動畫相當簡單，只要呼叫UIView的塊程式碼即可實現一個動畫效果，這在其他系統開發中基本不可能實現。下面通過一個簡單的UIView進行一個圖片放大動畫效果演示：

//
//  KCMainViewController.m
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIImage *image=[UIImage imageNamed:@"open2.png"];
    UIImageView *imageView=[[UIImageView alloc]init];
    imageView.image=image;
    imageView.frame=CGRectMake(120, 140, 80, 80);
    [self.view addSubview:imageView];

    //兩秒後開始一個持續一分鐘的動畫
    [UIView animateWithDuration:1 delay:2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        imageView.frame=CGRectMake(80, 100, 160, 160);
    } completion:nil];
}
@end

// KCMainViewController.m

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController ()

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

UIImage *image=[UIImage imageNamed:@"open2.png"];

UIImageView *imageView=[[UIImageView alloc]init];

imageView.image=image;

imageView.frame=CGRectMake(120, 140, 80, 80);

[self.view addSubview:imageView];

//兩秒後開始一個持續一分鐘的動畫

[UIView animateWithDuration:1 delay:2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{

imageView.frame=CGRectMake(80, 100, 160, 160);

} completion:nil];

}

@end

使用上面UIView封裝的方法進行動畫設定固然十分方便，但是具體動畫如何實現我們是不清楚的，而且上面的程式碼還有一些問題是無法解決的，例如：如何控制動畫的暫停？如何進行動畫的組合？。。。

這裡就需要了解iOS的核心動畫Core Animation（包含在Quartz Core框架中）。在iOS中核心動畫分為幾類：基礎動畫、關鍵幀動畫、動畫組、轉場動畫。各個類的關係大致如下：

CAAnimation：核心動畫的基礎類，不能直接使用，負責動畫執行時間、速度的控制，本身實現了CAMediaTiming協議。

CAPropertyAnimation：屬性動畫的基類（通過屬性進行動畫設定，注意是可動畫屬性），不能直接使用。

CAAnimationGroup：動畫組，動畫組是一種組合模式設計，可以通過動畫組來進行所有動畫行為的統一控制，組中所有動畫效果可以併發執行。

CATransition：轉場動畫，主要通過濾鏡進行動畫效果設定。

CABasicAnimation：基礎動畫，通過屬性修改進行動畫引數控制，只有初始狀態和結束狀態。

CAKeyframeAnimation：關鍵幀動畫，同樣是通過屬性進行動畫引數控制，但是同基礎動畫不同的是它可以有多個狀態控制。

基礎動畫、關鍵幀動畫都屬於屬性動畫，就是通過修改屬性值產生動畫效果，開發人員只需要設定初始值和結束值，中間的過程動畫（又叫“補間動畫”）由系統自動計算產生。和基礎動畫不同的是關鍵幀動畫可以設定多個屬性值，每兩個屬性中間的補間動畫由系統自動完成，因此從這個角度而言基礎動畫又可以看成是有兩個關鍵幀的關鍵幀動畫。

基礎動畫

在開發過程中很多情況下通過基礎動畫就可以滿足開發需求，前面例子中使用的UIView程式碼塊進行影象放大縮小的演示動畫也是基礎動畫（在iOS7中UIView也對關鍵幀動畫進行了封裝），只是UIView裝飾方法隱藏了更多的細節。如果不使用UIView封裝的方法，動畫建立一般分為以下幾步：

1.初始化動畫並設定動畫屬性

2.設定動畫屬性初始值（可以省略）、結束值以及其他動畫屬性

3.給圖層新增動畫

下面以一個移動動畫為例進行演示，在這個例子中點選螢幕哪個位置落花將飛向哪裡。

//
//  KCMainViewController.m
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];
}

#pragma mark 移動動畫
-(void)translatonAnimation:(CGPoint)location{
    //1.建立動畫並指定動畫屬性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

    //2.設定動畫屬性初始值和結束值
//    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態
    basicAnimation.toValue=[NSValue valueWithCGPoint:location];

    //設定其他動畫屬性
    basicAnimation.duration=5.0;//動畫時間5秒
    //basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果
    //    basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫

    //3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取
    [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];
}

#pragma mark 點選事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=touches.anyObject;
    CGPoint location= [touch locationInView:self.view];
    //建立並開始動畫
    [self translatonAnimation:location];
}

@end

// KCMainViewController.m

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

}

#pragma mark 移動動畫

-(void)translatonAnimation:(CGPoint)location{

//1.建立動畫並指定動畫屬性

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

//2.設定動畫屬性初始值和結束值

// basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態

basicAnimation.toValue=[NSValue valueWithCGPoint:location];

//設定其他動畫屬性

basicAnimation.duration=5.0;//動畫時間5秒

//basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果

// basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫

//3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取

[_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];

}

#pragma mark 點選事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=touches.anyObject;

CGPoint location= [touch locationInView:self.view];

//建立並開始動畫

[self translatonAnimation:location];

}

@end

執行效果：

上面實現了一個基本動畫效果，但是這個動畫存在一個問題：動畫結束後動畫圖層回到了原來的位置，當然是用UIView封裝的方法是沒有這個問題的。如何解決這個問題呢？

前面說過圖層動畫的本質就是將圖層內部的內容轉化為點陣圖經硬體操作形成一種動畫效果，其實圖層本身並沒有任何的變化。上面的動畫中圖層並沒有因為動畫效果而改變它的位置（對於縮放動畫其大小也是不會改變的），所以動畫完成之後圖層還是在原來的顯示位置沒有任何變化，如果這個圖層在一個UIView中你會發現在UIView移動過程中你要觸發UIView的點選事件也只能點選原來的位置（即使它已經運動到了別的位置），因為它的位置從來沒有變過。當然解決這個問題方法比較多，這裡不妨在動畫完成之後重新設定它的位置。

//
//  KCMainViewController.m
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];
}

#pragma mark 移動動畫
-(void)translatonAnimation:(CGPoint)location{
    //1.建立動畫並指定動畫屬性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

    //2.設定動畫屬性初始值和結束值
//    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態
    basicAnimation.toValue=[NSValue valueWithCGPoint:location];

    //設定其他動畫屬性
    basicAnimation.duration=5.0;//動畫時間5秒
    //basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果
    //    basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫
    basicAnimation.delegate=self;
    //儲存當前位置在動畫結束後使用
    [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"];

    //3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取
    [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];
}

#pragma mark 點選事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=touches.anyObject;
    CGPoint location= [touch locationInView:self.view];
    //建立並開始動畫
    [self translatonAnimation:location];
}

#pragma mark - 動畫代理方法
#pragma mark 動畫開始
-(void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
    NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通過前面的設定的key獲得動畫
}

#pragma mark 動畫結束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
    _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];
}
@end

// KCMainViewController.m

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

}

#pragma mark 移動動畫

-(void)translatonAnimation:(CGPoint)location{

//1.建立動畫並指定動畫屬性

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

//2.設定動畫屬性初始值和結束值

// basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態

basicAnimation.toValue=[NSValue valueWithCGPoint:location];

//設定其他動畫屬性

basicAnimation.duration=5.0;//動畫時間5秒

//basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果

// basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫

basicAnimation.delegate=self;

//儲存當前位置在動畫結束後使用

[basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"];

//3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取

[_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];

}

#pragma mark 點選事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=touches.anyObject;

CGPoint location= [touch locationInView:self.view];

//建立並開始動畫

[self translatonAnimation:location];

}

#pragma mark - 動畫代理方法

#pragma mark 動畫開始

-(void)animationDidStart:(CAAnimation *)anim{

NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通過前面的設定的key獲得動畫

}

#pragma mark 動畫結束

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

_layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

}

@end

上面通過給動畫設定一個代理去監聽動畫的開始和結束事件，在動畫開始前給動畫新增一個自定義屬性“KCBasicAnimationLocation”儲存動畫終點位置，然後在動畫結束後設定動畫的位置為終點位置。

如果執行上面的程式碼大家可能會發現另外一個問題，那就是動畫執行完成後會重新從起始點運動到終點。這個問題產生的原因就是前面提到的，對於非根圖層，設定圖層的可動畫屬性（在動畫結束後重新設定了position，而position是可動畫屬性）會產生動畫效果。解決這個問題有兩種辦法：關閉圖層隱式動畫、設定動畫圖層為根圖層。顯然這裡不能採取後者，因為根圖層當前已經作為動畫的背景。

要關閉隱式動畫需要用到動畫事務CATransaction，在事務內將隱式動畫關閉，例如上面的程式碼可以改為：

#pragma mark 動畫結束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
    //開啟事務
    [CATransaction begin];
    //禁用隱式動畫
    [CATransaction setDisableActions:YES];

    _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

    //提交事務
    [CATransaction commit];
}

#pragma mark 動畫結束

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

//開啟事務

[CATransaction begin];

//禁用隱式動畫

[CATransaction setDisableActions:YES];

_layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

//提交事務

[CATransaction commit];

}

補充

上面通過在animationDidStop中重新設定動畫的位置主要為了說明隱式動畫關閉和動畫事件之間傳參的內容，有朋友發現這種方式有可能在動畫執行完之後出現從原點瞬間回到終點的過程，最早在除錯的時候沒有發現這個問題，這裡感謝這位朋友。其實解決這個問題並不難，首先必須設定fromValue，其次在動畫開始前設定動畫position為終點位置（當然也必須關閉隱式動畫）。但是這裡主要還是出於學習的目的，真正開發的時候做平移動畫直接使用隱式動畫即可，沒有必要那麼麻煩。

當然上面的動畫還顯得有些生硬，因為落花飄散的時候可能不僅僅是自由落體運動，本身由於空氣阻力、外界風力還會造成落花在空中的旋轉、搖擺等，這裡不妨給圖層新增一個旋轉的動畫。對於圖層的旋轉前面已經演示過怎麼通過key path設定圖層旋轉的內容了，在這裡需要強調一下，圖層的形變都是基於錨點進行的。例如旋轉，旋轉的中心點就是圖層的錨點。

//
//  KCMainViewController.m
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.anchorPoint=CGPointMake(0.5, 0.6);//設定錨點
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];
}

#pragma mark 移動動畫
-(void)translatonAnimation:(CGPoint)location{
    //1.建立動畫並指定動畫屬性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

    //2.設定動畫屬性初始值、結束值
//    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態
    basicAnimation.toValue=[NSValue valueWithCGPoint:location];

    //設定其他動畫屬性
    basicAnimation.duration=5.0;//動畫時間5秒
    //basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果
    //    basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫
    basicAnimation.delegate=self;
    //儲存當前位置在動畫結束後使用
    [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"];

    //3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該圖層時可以使用此名稱獲取
    [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];
}

#pragma mark 旋轉動畫
-(void)rotationAnimation{
    //1.建立動畫並指定動畫屬性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    //2.設定動畫屬性初始值、結束值
//    basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2];
    basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];

    //設定其他動畫屬性
    basicAnimation.duration=6.0;
    basicAnimation.autoreverses=true;//旋轉後再旋轉到原來的位置

    //4.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取
    [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"];
}

#pragma mark 點選事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=touches.anyObject;
    CGPoint location= [touch locationInView:self.view];
    //建立並開始動畫
    [self translatonAnimation:location];

    [self rotationAnimation];
}

#pragma mark - 動畫代理方法
#pragma mark 動畫開始
-(void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
    NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通過前面的設定的key獲得動畫
}

#pragma mark 動畫結束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
    //開啟事務
    [CATransaction begin];
    //禁用隱式動畫
    [CATransaction setDisableActions:YES];

    _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

    //提交事務
    [CATransaction commit];
}

@end

100

101

102

103

104

// KCMainViewController.m

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.anchorPoint=CGPointMake(0.5, 0.6);//設定錨點

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

}

#pragma mark 移動動畫

-(void)translatonAnimation:(CGPoint)location{

//1.建立動畫並指定動畫屬性

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

//2.設定動畫屬性初始值、結束值

// basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態

basicAnimation.toValue=[NSValue valueWithCGPoint:location];

//設定其他動畫屬性

basicAnimation.duration=5.0;//動畫時間5秒

//basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果

// basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫

basicAnimation.delegate=self;

//儲存當前位置在動畫結束後使用

[basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"];

//3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該圖層時可以使用此名稱獲取

[_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];

}

#pragma mark 旋轉動畫

-(void)rotationAnimation{

//1.建立動畫並指定動畫屬性

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

//2.設定動畫屬性初始值、結束值

// basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2];

basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];

//設定其他動畫屬性

basicAnimation.duration=6.0;

basicAnimation.autoreverses=true;//旋轉後再旋轉到原來的位置

//4.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取

[_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"];

}

#pragma mark 點選事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=touches.anyObject;

CGPoint location= [touch locationInView:self.view];

//建立並開始動畫

[self translatonAnimation:location];

[self rotationAnimation];

}

#pragma mark - 動畫代理方法

#pragma mark 動畫開始

-(void)animationDidStart:(CAAnimation *)anim{

NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通過前面的設定的key獲得動畫

}

#pragma mark 動畫結束

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

//開啟事務

[CATransaction begin];

//禁用隱式動畫

[CATransaction setDisableActions:YES];

_layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

//提交事務

[CATransaction commit];

}

@end

上面程式碼中結合兩種動畫操作，需要注意的是隻給移動動畫設定了代理，在旋轉動畫中並沒有設定代理，否則代理方法會執行兩遍。由於旋轉動畫會無限迴圈執行（上面設定了重複次數無窮大），並且兩個動畫的執行時間沒有必然的關係，這樣一來移動停止後可能還在旋轉，為了讓移動動畫停止後旋轉動畫停止就需要使用到動畫的暫停和恢復方法。

核心動畫的執行有一個媒體時間的概念，假設將一個旋轉動畫設定旋轉一週用時60秒的話，那麼當動畫旋轉90度後媒體時間就是15秒。如果此時要將動畫暫停只需要讓媒體時間偏移量設定為15秒即可，並把動畫執行速度設定為0使其停止運動。類似的，如果又過了60秒後需要恢復動畫（此時媒體時間為75秒），這時只要將動畫開始開始時間設定為當前媒體時間75秒減去暫停時的時間（也就是之前定格動畫時的偏移量）15秒（開始時間=75-15=60秒），那麼動畫就會重新計算60秒後的狀態再開始執行，與此同時將偏移量重新設定為0並且把執行速度設定1。這個過程中真正起到暫停動畫和恢復動畫的其實是動畫速度的調整，媒體時間偏移量以及恢復時的開始時間設定主要為了讓動畫更加連貫。

下面的程式碼演示了移動動畫結束後旋轉動畫暫停，並且當再次點選動畫時旋轉恢復的過程(注意在移動過程中如果再次點選螢幕可以暫停移動和旋轉動畫，再次點選可以恢復兩種動畫。但是當移動結束後觸發了移動動畫的完成事件如果再次點選螢幕則只能恢復旋轉動畫，因為此時移動動畫已經結束而不是暫停，無法再恢復)。

//
//  KCMainViewController.m
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.anchorPoint=CGPointMake(0.5, 0.6);//設定錨點
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];
}

#pragma mark 移動動畫
-(void)translatonAnimation:(CGPoint)location{
    //1.建立動畫並指定動畫屬性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

    //2.設定動畫屬性初始值、結束值
//    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態
    basicAnimation.toValue=[NSValue valueWithCGPoint:location];

    //設定其他動畫屬性
    basicAnimation.duration=5.0;//動畫時間5秒
//    basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果
    basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫
    basicAnimation.delegate=self;
    //儲存當前位置在動畫結束後使用
    [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"];

    //3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該圖層時可以使用此名稱獲取
    [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];
}

#pragma mark 旋轉動畫
-(void)rotationAnimation{
    //1.建立動畫並指定動畫屬性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    //2.設定動畫屬性初始值、結束值
//    basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2];
    basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];

    //設定其他動畫屬性
    basicAnimation.duration=6.0;
    basicAnimation.autoreverses=true;//旋轉後在旋轉到原來的位置
    basicAnimation.repeatCount=HUGE_VALF;//設定無限迴圈
    basicAnimation.removedOnCompletion=NO;
//    basicAnimation.delegate=self;

    //4.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取
    [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"];
}

#pragma mark 點選事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=touches.anyObject;
    CGPoint location= [touch locationInView:self.view];
    //判斷是否已經常見過動畫，如果已經建立則不再建立動畫
    CAAnimation *animation= [_layer animationForKey:@"KCBasicAnimation_Translation"];
    if(animation){
        if (_layer.speed==0) {
            [self animationResume];
        }else{
            [self animationPause];
        }
    }else{
        //建立並開始動畫
        [self translatonAnimation:location];

        [self rotationAnimation];
    }
}

#pragma mark 動畫暫停
-(void)animationPause{
    //取得指定圖層動畫的媒體時間，後面引數用於指定子圖層，這裡不需要
    CFTimeInterval interval=[_layer convertTime:CACurrentMediaTime() fromLayer:nil];
    //設定時間偏移量，保證暫停時停留在旋轉的位置
    [_layer setTimeOffset:interval];
    //速度設定為0，暫停動畫
    _layer.speed=0;
}

#pragma mark 動畫恢復
-(void)animationResume{
    //獲得暫停的時間
    CFTimeInterval beginTime= CACurrentMediaTime()- _layer.timeOffset;
    //設定偏移量
    _layer.timeOffset=0;
    //設定開始時間
    _layer.beginTime=beginTime;
    //設定動畫速度，開始運動
    _layer.speed=1.0;
}

#pragma mark - 動畫代理方法
#pragma mark 動畫開始
-(void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
    NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通過前面的設定的key獲得動畫
}

#pragma mark 動畫結束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

    //開啟事務
    [CATransaction begin];
    //禁用隱式動畫
    [CATransaction setDisableActions:YES];

    _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

    //提交事務
    [CATransaction commit];

    //暫停動畫
    [self animationPause];

}

@end

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

// KCMainViewController.m

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.anchorPoint=CGPointMake(0.5, 0.6);//設定錨點

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

}

#pragma mark 移動動畫

-(void)translatonAnimation:(CGPoint)location{

//1.建立動畫並指定動畫屬性

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];

//2.設定動畫屬性初始值、結束值

// basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不設定，預設為圖層初始狀態

basicAnimation.toValue=[NSValue valueWithCGPoint:location];

//設定其他動畫屬性

basicAnimation.duration=5.0;//動畫時間5秒

// basicAnimation.repeatCount=HUGE_VALF;//設定重複次數,HUGE_VALF可看做無窮大，起到迴圈動畫的效果

basicAnimation.removedOnCompletion=NO;//執行一次是否移除動畫

basicAnimation.delegate=self;

//儲存當前位置在動畫結束後使用

[basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"];

//3.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該圖層時可以使用此名稱獲取

[_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"];

}

#pragma mark 旋轉動畫

-(void)rotationAnimation{

//1.建立動畫並指定動畫屬性

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

//2.設定動畫屬性初始值、結束值

// basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2];

basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];

//設定其他動畫屬性

basicAnimation.duration=6.0;

basicAnimation.autoreverses=true;//旋轉後在旋轉到原來的位置

basicAnimation.repeatCount=HUGE_VALF;//設定無限迴圈

basicAnimation.removedOnCompletion=NO;

// basicAnimation.delegate=self;

//4.新增動畫到圖層，注意key相當於給動畫進行命名，以後獲得該動畫時可以使用此名稱獲取

[_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"];

}

#pragma mark 點選事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=touches.anyObject;

CGPoint location= [touch locationInView:self.view];

//判斷是否已經常見過動畫，如果已經建立則不再建立動畫

CAAnimation *animation= [_layer animationForKey:@"KCBasicAnimation_Translation"];

if(animation){

if (_layer.speed==0) {

[self animationResume];

}else{

[self animationPause];

}

}else{

//建立並開始動畫

[self translatonAnimation:location];

[self rotationAnimation];

}

#pragma mark 動畫暫停

-(void)animationPause{

//取得指定圖層動畫的媒體時間，後面引數用於指定子圖層，這裡不需要

CFTimeInterval interval=[_layer convertTime:CACurrentMediaTime() fromLayer:nil];

//設定時間偏移量，保證暫停時停留在旋轉的位置

[_layer setTimeOffset:interval];

//速度設定為0，暫停動畫

_layer.speed=0;

}

#pragma mark 動畫恢復

-(void)animationResume{

//獲得暫停的時間

CFTimeInterval beginTime= CACurrentMediaTime()- _layer.timeOffset;

//設定偏移量

_layer.timeOffset=0;

//設定開始時間

_layer.beginTime=beginTime;

//設定動畫速度，開始運動

_layer.speed=1.0;

}

#pragma mark - 動畫代理方法

#pragma mark 動畫開始

-(void)animationDidStart:(CAAnimation *)anim{

NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通過前面的設定的key獲得動畫

}

#pragma mark 動畫結束

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));

//開啟事務

[CATransaction begin];

//禁用隱式動畫

[CATransaction setDisableActions:YES];

_layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];

//提交事務

[CATransaction commit];

//暫停動畫

[self animationPause];

}

@end

執行效果：

注意：

動畫暫停針對的是圖層而不是圖層中的某個動畫。
要做無限迴圈的動畫，動畫的removedOnCompletion屬性必須設定為NO，否則執行一次動畫就會銷燬。

關鍵幀動畫

熟悉flash開發的朋友對於關鍵幀動畫應該不陌生，這種動畫方式在flash開發中經常用到。關鍵幀動畫就是在動畫控制過程中開發者指定主要的動畫狀態，至於各個狀態間動畫如何進行則由系統自動運算補充（每兩個關鍵幀之間系統形成的動畫稱為“補間動畫”），這種動畫的好處就是開發者不用逐個控制每個動畫幀，而只要關心幾個關鍵幀的狀態即可。

關鍵幀動畫開發分為兩種形式：一種是通過設定不同的屬性值進行關鍵幀控制，另一種是通過繪製路徑進行關鍵幀控制。後者優先順序高於前者，如果設定了路徑則屬性值就不再起作用。

對於前面的落花動畫效果而言其實落花的過程並不自然，很顯然實際生活中它不可能沿著直線下落，這裡我們不妨通過關鍵幀動畫的values屬性控制它在下落過程中的屬性。假設下落過程如圖：

在這裡需要設定四個關鍵幀（如圖中四個關鍵點），具體程式碼如下（動畫建立過程同基本動畫基本完全一致）：

//
//  通過values設定關鍵幀動畫
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];

    //建立動畫
    [self translationAnimation];
}

#pragma mark 關鍵幀動畫
-(void)translationAnimation{
    //1.建立關鍵幀動畫並設定動畫屬性
    CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

    //2.設定關鍵幀,這裡有四個關鍵幀
    NSValue *key1=[NSValue valueWithCGPoint:_layer.position];//對於關鍵幀動畫初始值不能省略
    NSValue *key2=[NSValue valueWithCGPoint:CGPointMake(80, 220)];
    NSValue *key3=[NSValue valueWithCGPoint:CGPointMake(45, 300)];
    NSValue *key4=[NSValue valueWithCGPoint:CGPointMake(55, 400)];
    NSArray *values=@[key1,key2,key3,key4];
    keyframeAnimation.values=values;
    //設定其他屬性
    keyframeAnimation.duration=8.0;
    keyframeAnimation.beginTime=CACurrentMediaTime()+2;//設定延遲2秒執行

    //3.新增動畫到圖層，新增動畫後就會執行動畫
    [_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];
}

@end

// 通過values設定關鍵幀動畫

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

//建立動畫

[self translationAnimation];

}

#pragma mark 關鍵幀動畫

-(void)translationAnimation{

//1.建立關鍵幀動畫並設定動畫屬性

CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

//2.設定關鍵幀,這裡有四個關鍵幀

NSValue *key1=[NSValue valueWithCGPoint:_layer.position];//對於關鍵幀動畫初始值不能省略

NSValue *key2=[NSValue valueWithCGPoint:CGPointMake(80, 220)];

NSValue *key3=[NSValue valueWithCGPoint:CGPointMake(45, 300)];

NSValue *key4=[NSValue valueWithCGPoint:CGPointMake(55, 400)];

NSArray *values=@[key1,key2,key3,key4];

keyframeAnimation.values=values;

//設定其他屬性

keyframeAnimation.duration=8.0;

keyframeAnimation.beginTime=CACurrentMediaTime()+2;//設定延遲2秒執行

//3.新增動畫到圖層，新增動畫後就會執行動畫

[_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];

}

@end

執行效果(注意執行結束沒有設定圖層位置為動畫運動結束位置)：

上面的方式固然比前面使用基礎動畫效果要好一些，但其實還是存在問題，那就是落花飛落的路徑是直線的，當然這個直線是根據程式中設定的四個關鍵幀自動形成的，那麼如何讓它沿著曲線飄落呢？這就是第二種型別的關鍵幀動畫，通過描繪路徑進行關鍵幀動畫控制。假設讓落花沿著下面的曲線路徑飄落：

當然，這是一條貝塞爾曲線，學習了前篇文章之後相信對於這類曲線應該並不陌生，下面是具體實現程式碼：

//
//  通過path設定關鍵幀動畫
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];

    //建立動畫
    [self translationAnimation];
}

#pragma mark 關鍵幀動畫
-(void)translationAnimation{
    //1.建立關鍵幀動畫並設定動畫屬性
    CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

    //2.設定路徑
    //繪製貝塞爾曲線
    CGPathRef path=CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);//移動到起始點
    CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 55, 400);//繪製二次貝塞爾曲線

    keyframeAnimation.path=path;//設定path屬性
    CGPathRelease(path);//釋放路徑物件
    //設定其他屬性
    keyframeAnimation.duration=8.0;
    keyframeAnimation.beginTime=CACurrentMediaTime()+5;//設定延遲2秒執行

    //3.新增動畫到圖層，新增動畫後就會執行動畫
    [_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];
}

@end

// 通過path設定關鍵幀動畫

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

//建立動畫

[self translationAnimation];

}

#pragma mark 關鍵幀動畫

-(void)translationAnimation{

//1.建立關鍵幀動畫並設定動畫屬性

CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

//2.設定路徑

//繪製貝塞爾曲線

CGPathRef path=CGPathCreateMutable();

CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);//移動到起始點

CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 55, 400);//繪製二次貝塞爾曲線

keyframeAnimation.path=path;//設定path屬性

CGPathRelease(path);//釋放路徑物件

//設定其他屬性

keyframeAnimation.duration=8.0;

keyframeAnimation.beginTime=CACurrentMediaTime()+5;//設定延遲2秒執行

//3.新增動畫到圖層，新增動畫後就會執行動畫

[_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];

}

@end

執行效果(注意執行結束沒有設定圖層位置為動畫運動結束位置)：

看起來動畫不會那麼生硬了，但是這裡需要注意，對於路徑型別的關鍵幀動畫系統是從描繪路徑的位置開始路徑，直到路徑結束。如果上面的路徑不是貝塞爾曲線而是矩形路徑那麼它會從矩形的左上角開始執行，順時針一週回到左上角；如果指定的路徑是一個橢圓，那麼動畫執行的路徑是從橢圓右側開始（0度）順時針一週回到右側。

補充–其他屬性

在關鍵幀動畫中還有一些動畫屬性初學者往往比較容易混淆，這裡專門針對這些屬性做一下介紹。

keyTimes：各個關鍵幀的時間控制。前面使用values設定了四個關鍵幀，預設情況下每兩幀之間的間隔為:8/(4-1)秒。如果想要控制動畫從第一幀到第二針佔用時間4秒，從第二幀到第三幀時間為2秒，而從第三幀到第四幀時間2秒的話，就可以通過keyTimes進行設定。keyTimes中儲存的是時間佔用比例點，此時可以設定keyTimes的值為0.0，0.5，0.75，1.0（當然必須轉換為NSNumber），也就是說1到2幀執行到總時間的50%，2到3幀執行到總時間的75%，3到4幀執行到8秒結束。

caculationMode：動畫計算模式。還拿上面keyValues動畫舉例，之所以1到2幀能形成連貫性動畫而不是直接從第1幀經過8/3秒到第2幀是因為動畫模式是連續的（值為kCAAnimationLinear，這是計算模式的預設值）；而如果指定了動畫模式為kCAAnimationDiscrete離散的那麼你會看到動畫從第1幀經過8/3秒直接到第2幀，中間沒有任何過渡。其他動畫模式還有：kCAAnimationPaced（均勻執行，會忽略keyTimes）、kCAAnimationCubic（平滑執行，對於位置變動關鍵幀動畫執行軌跡更平滑）、kCAAnimationCubicPaced（平滑均勻執行）。

下圖描繪出了幾種動畫模式的關係（橫座標是執行時間，縱座標是動畫屬性[例如位置、透明度等]）：

動畫組

實際開發中一個物體的運動往往是複合運動，單一屬性的運動情況比較少，但恰恰屬性動畫每次進行動畫設定時一次只能設定一個屬性進行動畫控制(不管是基礎動畫還是關鍵幀動畫都是如此)，這樣一來要做一個複合運動的動畫就必須建立多個屬性動畫進行組合。對於一兩種動畫的組合或許處理起來還比較容易，但是對於更多動畫的組合控制往往會變得很麻煩，動畫組的產生就是基於這樣一種情況而產生的。動畫組是一系列動畫的組合，凡是新增到動畫組中的動畫都受控於動畫組，這樣一來各類動畫公共的行為就可以統一進行控制而不必單獨設定，而且放到動畫組中的各個動畫可以併發執行，共同構建出複雜的動畫效果。

動畫組使用起來並不複雜，首先單獨建立單個動畫（可以是基礎動畫也可以是關鍵幀動畫），然後將基礎動畫新增到動畫組，最後將動畫組新增到圖層即可。

前面關鍵幀動畫部分，路徑動畫看起來效果雖然很流暢，但是落花本身的旋轉運動沒有了，這裡不妨將基礎動畫部分的旋轉動畫和路徑關鍵幀動畫進行組合使得整個動畫看起來更加的和諧、順暢。

//
//  動畫組
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    CALayer *_layer;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景(注意這個圖片其實在根圖層)
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //自定義一個圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;
    [self.view.layer addSublayer:_layer];

    //建立動畫
    [self groupAnimation];
}

#pragma mark 基礎旋轉動畫
-(CABasicAnimation *)rotationAnimation{

    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    CGFloat toValue=M_PI_2*3;
    basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];

//    basicAnimation.duration=6.0;
    basicAnimation.autoreverses=true;
    basicAnimation.repeatCount=HUGE_VALF;
    basicAnimation.removedOnCompletion=NO;

    [basicAnimation setValue:[NSNumber numberWithFloat:toValue] forKey:@"KCBasicAnimationProperty_ToValue"];

    return basicAnimation;
}

#pragma mark 關鍵幀移動動畫
-(CAKeyframeAnimation *)translationAnimation{
    CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

    CGPoint endPoint= CGPointMake(55, 400);
    CGPathRef path=CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);
    CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, endPoint.x, endPoint.y);

    keyframeAnimation.path=path;
    CGPathRelease(path);

    [keyframeAnimation setValue:[NSValue valueWithCGPoint:endPoint] forKey:@"KCKeyframeAnimationProperty_EndPosition"];

    return keyframeAnimation;
}

#pragma mark 建立動畫組
-(void)groupAnimation{
    //1.建立動畫組
    CAAnimationGroup *animationGroup=[CAAnimationGroup animation];

    //2.設定組中的動畫和其他屬性
    CABasicAnimation *basicAnimation=[self rotationAnimation];
    CAKeyframeAnimation *keyframeAnimation=[self translationAnimation];
    animationGroup.animations=@[basicAnimation,keyframeAnimation];

    animationGroup.delegate=self;
    animationGroup.duration=10.0;//設定動畫時間，如果動畫組中動畫已經設定過動畫屬性則不再生效
    animationGroup.beginTime=CACurrentMediaTime()+5;//延遲五秒執行

    //3.給圖層新增動畫
    [_layer addAnimation:animationGroup forKey:nil];
}

#pragma mark - 代理方法
#pragma mark 動畫完成
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    CAAnimationGroup *animationGroup=(CAAnimationGroup *)anim;
    CABasicAnimation *basicAnimation=animationGroup.animations[0];
    CAKeyframeAnimation *keyframeAnimation=animationGroup.animations[1];
    CGFloat toValue=[[basicAnimation valueForKey:@"KCBasicAnimationProperty_ToValue"] floatValue];
    CGPoint endPoint=[[keyframeAnimation valueForKey:@"KCKeyframeAnimationProperty_EndPosition"] CGPointValue];

    [CATransaction begin];
    [CATransaction setDisableActions:YES];

    //設定動畫最終狀態
    _layer.position=endPoint;
    _layer.transform=CATransform3DMakeRotation(toValue, 0, 0, 1);

    [CATransaction commit];
}

@end

100

101

102

103

104

105

106

107

108

109

// 動畫組

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

CALayer *_layer;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景(注意這個圖片其實在根圖層)

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//自定義一個圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 10, 20);

_layer.position=CGPointMake(50, 150);

_layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage;

[self.view.layer addSublayer:_layer];

//建立動畫

[self groupAnimation];

}

#pragma mark 基礎旋轉動畫

-(CABasicAnimation *)rotationAnimation{

CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

CGFloat toValue=M_PI_2*3;

basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];

// basicAnimation.duration=6.0;

basicAnimation.autoreverses=true;

basicAnimation.repeatCount=HUGE_VALF;

basicAnimation.removedOnCompletion=NO;

[basicAnimation setValue:[NSNumber numberWithFloat:toValue] forKey:@"KCBasicAnimationProperty_ToValue"];

return basicAnimation;

}

#pragma mark 關鍵幀移動動畫

-(CAKeyframeAnimation *)translationAnimation{

CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

CGPoint endPoint= CGPointMake(55, 400);

CGPathRef path=CGPathCreateMutable();

CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);

CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, endPoint.x, endPoint.y);

keyframeAnimation.path=path;

CGPathRelease(path);

[keyframeAnimation setValue:[NSValue valueWithCGPoint:endPoint] forKey:@"KCKeyframeAnimationProperty_EndPosition"];

return keyframeAnimation;

}

#pragma mark 建立動畫組

-(void)groupAnimation{

//1.建立動畫組

CAAnimationGroup *animationGroup=[CAAnimationGroup animation];

//2.設定組中的動畫和其他屬性

CABasicAnimation *basicAnimation=[self rotationAnimation];

CAKeyframeAnimation *keyframeAnimation=[self translationAnimation];

animationGroup.animations=@[basicAnimation,keyframeAnimation];

animationGroup.delegate=self;

animationGroup.duration=10.0;//設定動畫時間，如果動畫組中動畫已經設定過動畫屬性則不再生效

animationGroup.beginTime=CACurrentMediaTime()+5;//延遲五秒執行

//3.給圖層新增動畫

[_layer addAnimation:animationGroup forKey:nil];

}

#pragma mark - 代理方法

#pragma mark 動畫完成

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

CAAnimationGroup *animationGroup=(CAAnimationGroup *)anim;

CABasicAnimation *basicAnimation=animationGroup.animations[0];

CAKeyframeAnimation *keyframeAnimation=animationGroup.animations[1];

CGFloat toValue=[[basicAnimation valueForKey:@"KCBasicAnimationProperty_ToValue"] floatValue];

CGPoint endPoint=[[keyframeAnimation valueForKey:@"KCKeyframeAnimationProperty_EndPosition"] CGPointValue];

[CATransaction begin];

[CATransaction setDisableActions:YES];

//設定動畫最終狀態

_layer.position=endPoint;

_layer.transform=CATransform3DMakeRotation(toValue, 0, 0, 1);

[CATransaction commit];

}

@end

執行效果：

轉場動畫

轉場動畫就是從一個場景以動畫的形式過渡到另一個場景。轉場動畫的使用一般分為以下幾個步驟：

1.建立轉場動畫

2.設定轉場型別、子型別（可選）及其他屬性

3.設定轉場後的新檢視並新增動畫到圖層

下表列出了常用的轉場型別(注意私有API是蘋果官方沒有公開的動畫型別，但是目前通過仍然可以使用)：

動畫型別	說明	對應常量	是否支援方向設定
公開API
fade	淡出效果	kCATransitionFade	是
movein	新檢視移動到舊檢視上	kCATransitionMoveIn	是
push	新檢視推出舊檢視	kCATransitionPush	是
reveal	移開舊檢視顯示新檢視	kCATransitionReveal	是
私有API		私有API只能通過字串訪問
cube	立方體翻轉效果	無	是
oglFlip	翻轉效果	無	是
suckEffect	收縮效果	無	否
rippleEffect	水滴波紋效果	無	否
pageCurl	向上翻頁效果	無	是
pageUnCurl	向下翻頁效果	無	是
cameralIrisHollowOpen	攝像頭開啟效果	無	否
cameraIrisHollowClose	攝像頭關閉效果	無	否

另外對於支援方向設定的動畫型別還包含子型別：

動畫子型別	說明
kCATransitionFromRight	從右側轉場
kCATransitionFromLeft	從左側轉場
kCATransitionFromTop	從頂部轉場
kCATransitionFromBottom	從底部轉場

在前面的文章“IOS開發系列–無限迴圈的圖片瀏覽器”中為了使用UIScrollView做無限迴圈圖片瀏覽器花費了不少時間在效能優化上面，這裡使用轉場動畫利用一個UIImageView實現一個漂亮的無限迴圈圖片瀏覽器。

//
//  KCMainViewController.m
//  TransitionAnimation
//
//  Created by Kenshin Cui on 14-3-12.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define IMAGE_COUNT 5

@interface KCMainViewController (){
    UIImageView *_imageView;
    int _currentIndex;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //定義圖片控制元件
    _imageView=[[UIImageView alloc]init];
    _imageView.frame=[UIScreen mainScreen].applicationFrame;
    _imageView.contentMode=UIViewContentModeScaleAspectFit;
    _imageView.image=[UIImage imageNamed:@"0.jpg"];//預設圖片
    [self.view addSubview:_imageView];
    //新增手勢
    UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
    leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft;
    [self.view addGestureRecognizer:leftSwipeGesture];

    UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
    rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight;
    [self.view addGestureRecognizer:rightSwipeGesture];
}

#pragma mark 向左滑動瀏覽下一張圖片
-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:YES];
}

#pragma mark 向右滑動瀏覽上一張圖片
-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:NO];
}

#pragma mark 轉場動畫
-(void)transitionAnimation:(BOOL)isNext{
    //1.建立轉場動畫物件
    CATransition *transition=[[CATransition alloc]init];

    //2.設定動畫型別,注意對於蘋果官方沒公開的動畫型別只能使用字串，並沒有對應的常量定義
    transition.type=@"cube";

    //設定子型別
    if (isNext) {
        transition.subtype=kCATransitionFromRight;
    }else{
        transition.subtype=kCATransitionFromLeft;
    }
    //設定動畫時常
    transition.duration=1.0f;

    //3.設定轉場後的新檢視新增轉場動畫
    _imageView.image=[self getImage:isNext];
    [_imageView.layer addAnimation:transition forKey:@"KCTransitionAnimation"];
}

#pragma mark 取得當前圖片
-(UIImage *)getImage:(BOOL)isNext{
    if (isNext) {
        _currentIndex=(_currentIndex+1)%IMAGE_COUNT;
    }else{
        _currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT;
    }
    NSString *imageName=[NSString stringWithFormat:@"%i.jpg",_currentIndex];
    return [UIImage imageNamed:imageName];
}
@end

// KCMainViewController.m

// TransitionAnimation

// Created by Kenshin Cui on 14-3-12.

#import "KCMainViewController.h"

#define IMAGE_COUNT 5

@interface KCMainViewController (){

UIImageView *_imageView;

int _currentIndex;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//定義圖片控制元件

_imageView=[[UIImageView alloc]init];

_imageView.frame=[UIScreen mainScreen].applicationFrame;

_imageView.contentMode=UIViewContentModeScaleAspectFit;

_imageView.image=[UIImage imageNamed:@"0.jpg"];//預設圖片

[self.view addSubview:_imageView];

//新增手勢

UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];

leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft;

[self.view addGestureRecognizer:leftSwipeGesture];

UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];

rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight;

[self.view addGestureRecognizer:rightSwipeGesture];

}

#pragma mark 向左滑動瀏覽下一張圖片

-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{

[self transitionAnimation:YES];

}

#pragma mark 向右滑動瀏覽上一張圖片

-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{

[self transitionAnimation:NO];

}

#pragma mark 轉場動畫

-(void)transitionAnimation:(BOOL)isNext{

//1.建立轉場動畫物件

CATransition *transition=[[CATransition alloc]init];

//2.設定動畫型別,注意對於蘋果官方沒公開的動畫型別只能使用字串，並沒有對應的常量定義

transition.type=@"cube";

//設定子型別

if (isNext) {

transition.subtype=kCATransitionFromRight;

}else{

transition.subtype=kCATransitionFromLeft;

}

//設定動畫時常

transition.duration=1.0f;

//3.設定轉場後的新檢視新增轉場動畫

_imageView.image=[self getImage:isNext];

[_imageView.layer addAnimation:transition forKey:@"KCTransitionAnimation"];

}

#pragma mark 取得當前圖片

-(UIImage *)getImage:(BOOL)isNext{

if (isNext) {

_currentIndex=(_currentIndex+1)%IMAGE_COUNT;

}else{

_currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT;

}

NSString *imageName=[NSString stringWithFormat:@"%i.jpg",_currentIndex];

return [UIImage imageNamed:imageName];

}

@end

執行效果：

程式碼十分簡單，但是效果和效能卻很驚人。當然演示程式碼有限，其他動畫型別大家可以自己實現，效果都很絢麗。

逐幀動畫

前面介紹了核心動畫中大部分動畫型別，但是做過動畫處理的朋友都知道，在動畫製作中還有一種動畫型別“逐幀動畫”。說到逐幀動畫相信很多朋友第一個想到的就是UIImageView，通過設定UIImageView的animationImages屬性，然後呼叫它的startAnimating方法去播放這組圖片。當然這種方法在某些場景下是可以達到逐幀的動畫效果，但是它也存在著很大的效能問題，並且這種方法一旦設定完圖片中間的過程就無法控制了。當然，也許有朋友會想到利用iOS的定時器NSTimer定時更新圖片來達到逐幀動畫的效果。這種方式確實可以解決UIImageView一次性載入大量圖片的問題，而且讓播放過程可控，唯一的缺點就是定時器方法呼叫有時可能會因為當前系統執行某種比較佔用時間的任務造成動畫連續性出現問題。

雖然在核心動畫沒有直接提供逐幀動畫型別，但是卻提供了用於完成逐幀動畫的相關物件CADisplayLink。CADisplayLink是一個計時器，但是同NSTimer不同的是，CADisplayLink的重新整理週期同螢幕完全一致。例如在iOS中螢幕重新整理週期是60次/秒，CADisplayLink重新整理週期同螢幕重新整理一致也是60次/秒，這樣一來使用它完成的逐幀動畫（又稱為“時鐘動畫”）完全感覺不到動畫的停滯情況。

在iOS開篇“IOS開發系列–IOS程式開發概覽”中就曾說過：iOS程式在執行後就進入一個訊息迴圈中（這個訊息迴圈稱為“主執行迴圈”），整個程式相當於進入一個死迴圈中，始終等待使用者輸入。將CADisplayLink加入到主執行迴圈佇列後，它的時鐘週期就和主執行迴圈保持一致，而主執行迴圈週期就是螢幕重新整理週期。在CADisplayLink加入到主執行迴圈佇列後就會迴圈呼叫目標方法，在這個方法中更新檢視內容就可以完成逐幀動畫。

當然這裡不得不強調的是逐幀動畫效能勢必較低，但是對於一些事物的運動又不得不選擇使用逐幀動畫，例如人的運動，這是一個高度複雜的運動，基本動畫、關鍵幀動畫是不可能解決的。所大家一定要注意在迴圈方法中儘可能的降低演算法複雜度，同時保證迴圈過程中記憶體峰值儘可能低。下面以一個魚的運動為例為大家演示一下逐幀動畫。

//
//  KCMainViewController.m
//  DisplayLink
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define IMAGE_COUNT 10

@interface KCMainViewController (){
    CALayer *_layer;
    int _index;
    NSMutableArray *_images;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景
    self.view.layer.contents=(id)[UIImage imageNamed:@"bg.png"].CGImage;

    //建立影象顯示圖層
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 87, 32);
    _layer.position=CGPointMake(160, 284);
    [self.view.layer addSublayer:_layer];

    //由於魚的圖片在迴圈中會不斷建立，而10張魚的照片相對都很小
    //與其在迴圈中不斷建立UIImage不如直接將10張圖片快取起來
    _images=[NSMutableArray array];
    for (int i=0; i&lt;10; ++i) {
        NSString *imageName=[NSString stringWithFormat:@"fish%i.png",i];
        UIImage *image=[UIImage imageNamed:imageName];
        [_images addObject:image];
    }

    //定義時鐘物件
    CADisplayLink *displayLink=[CADisplayLink displayLinkWithTarget:self selector:@selector(step)];
    //新增時鐘物件到主執行迴圈
    [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}

#pragma mark 每次螢幕重新整理就會執行一次此方法(每秒接近60次)
-(void)step{
    //定義一個變數記錄執行次數
    static int s=0;
    //每秒執行6次
    if (++s%10==0) {
        UIImage *image=_images[_index];
        _layer.contents=(id)image.CGImage;//更新圖片
        _index=(_index+1)%IMAGE_COUNT;
    }
}
@end

// KCMainViewController.m

// DisplayLink

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

#define IMAGE_COUNT 10

@interface KCMainViewController (){

CALayer *_layer;

int _index;

NSMutableArray *_images;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景

self.view.layer.contents=(id)[UIImage imageNamed:@"bg.png"].CGImage;

//建立影象顯示圖層

_layer=[[CALayer alloc]init];

_layer.bounds=CGRectMake(0, 0, 87, 32);

_layer.position=CGPointMake(160, 284);

[self.view.layer addSublayer:_layer];

//由於魚的圖片在迴圈中會不斷建立，而10張魚的照片相對都很小

//與其在迴圈中不斷建立UIImage不如直接將10張圖片快取起來

_images=[NSMutableArray array];

for (int i=0; i<10; ++i) {

NSString *imageName=[NSString stringWithFormat:@"fish%i.png",i];

UIImage *image=[UIImage imageNamed:imageName];

[_images addObject:image];

}

//定義時鐘物件

CADisplayLink *displayLink=[CADisplayLink displayLinkWithTarget:self selector:@selector(step)];

//新增時鐘物件到主執行迴圈

[displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

}

#pragma mark 每次螢幕重新整理就會執行一次此方法(每秒接近60次)

-(void)step{

//定義一個變數記錄執行次數

static int s=0;

//每秒執行6次

if (++s%10==0) {

UIImage *image=_images[_index];

_layer.contents=(id)image.CGImage;//更新圖片

_index=(_index+1)%IMAGE_COUNT;

}

@end

執行效果：

注意：上面僅僅演示了逐幀動畫的過程，事實上結合其他動畫型別可以讓整條魚遊動起來，這裡不再贅述。

UIView動畫封裝

有了前面核心動畫的知識，相信大家開發出一般的動畫效果應該不在話下。在核心動畫開篇也給大家說過，其實UIView本身對於基本動畫和關鍵幀動畫、轉場動畫都有相應的封裝，在對動畫細節沒有特殊要求的情況下使用起來也要簡單的多。可以說在日常開發中90%以上的情況使用UIView的動畫封裝方法都可以搞定，因此在熟悉了核心動畫的原理之後還是有必要給大家簡單介紹一下UIView中各類動畫使用方法的。由於前面核心動畫內容已經進行過詳細介紹，學習UIView的封裝方法根本是小菜一碟，這裡對於一些細節就不再贅述了。

基礎動畫

基礎動畫部分和前面的基礎動畫演示相對應，演示點選螢幕落葉飄落到滑鼠點選位置的過程。注意根據前面介紹的隱式動畫知識其實非根圖層直接設定終點位置不需要使用UIView的動畫方法也可以實現動畫效果，因此這裡落花不再放到圖層中而是放到了一個UIImageView中。

下面的程式碼演示了通過block和靜態方法實現動畫控制的過程：

//
//  UIView實現基礎動畫
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    UIImageView *_imageView;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //建立影象顯示控制元件
    _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"petal.png"]];
    _imageView.center=CGPointMake(50, 150);
    [self.view addSubview:_imageView];
}

#pragma mark 點選事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=touches.anyObject;
    CGPoint location= [touch locationInView:self.view];
    //方法1：block方式
    /*開始動畫，UIView的動畫方法執行完後動畫會停留在重點位置，而不需要進行任何特殊處理
     duration:執行時間
     delay:延遲時間
     options:動畫設定，例如自動恢復、勻速運動等
     completion:動畫完成回撥方法
     */
//    [UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
//        _imageView.center=location;
//    } completion:^(BOOL finished) {
//        NSLog(@"Animation end.");
//    }];

    //方法2：靜態方法
    //開始動畫
    [UIView beginAnimations:@"KCBasicAnimation" context:nil];
    [UIView setAnimationDuration:5.0];
    //[UIView setAnimationDelay:1.0];//設定延遲
    //[UIView setAnimationRepeatAutoreverses:NO];//是否回覆
    //[UIView setAnimationRepeatCount:10];//重複次數
    //[UIView setAnimationStartDate:(NSDate *)];//設定動畫開始執行的時間
    //[UIView setAnimationDelegate:self];//設定代理
    //[UIView setAnimationWillStartSelector:(SEL)];//設定動畫開始運動的執行方法
    //[UIView setAnimationDidStopSelector:(SEL)];//設定動畫執行結束後的執行方法

    _imageView.center=location;

    //開始動畫
    [UIView commitAnimations];
}
@end

// UIView實現基礎動畫

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

UIImageView *_imageView;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//建立影象顯示控制元件

_imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"petal.png"]];

_imageView.center=CGPointMake(50, 150);

[self.view addSubview:_imageView];

}

#pragma mark 點選事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=touches.anyObject;

CGPoint location= [touch locationInView:self.view];

//方法1：block方式

/*開始動畫，UIView的動畫方法執行完後動畫會停留在重點位置，而不需要進行任何特殊處理

duration:執行時間

delay:延遲時間

options:動畫設定，例如自動恢復、勻速運動等

completion:動畫完成回撥方法

// [UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{

// _imageView.center=location;

// } completion:^(BOOL finished) {

// NSLog(@"Animation end.");

// }];

//方法2：靜態方法

//開始動畫

[UIView beginAnimations:@"KCBasicAnimation" context:nil];

[UIView setAnimationDuration:5.0];

//[UIView setAnimationDelay:1.0];//設定延遲

//[UIView setAnimationRepeatAutoreverses:NO];//是否回覆

//[UIView setAnimationRepeatCount:10];//重複次數

//[UIView setAnimationStartDate:(NSDate *)];//設定動畫開始執行的時間

//[UIView setAnimationDelegate:self];//設定代理

//[UIView setAnimationWillStartSelector:(SEL)];//設定動畫開始運動的執行方法

//[UIView setAnimationDidStopSelector:(SEL)];//設定動畫執行結束後的執行方法

_imageView.center=location;

//開始動畫

[UIView commitAnimations];

}

@end

補充–彈簧動畫效果

由於在iOS開發中彈性動畫使用很普遍，所以在iOS7蘋果官方直接提供了一個方法用於彈性動畫開發，下面簡單的演示一下：

//
//  UIView實現基礎動畫--彈性動畫
//  Animation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    UIImageView *_imageView;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //建立影象顯示控制元件
    _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"ball.png"]];
    _imageView.center=CGPointMake(160, 50);
    [self.view addSubview:_imageView];
}

#pragma mark 點選事件
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch=touches.anyObject;
    CGPoint location= [touch locationInView:self.view];
    /*建立彈性動畫
     damping:阻尼，範圍0-1，阻尼越接近於0，彈性效果越明顯
     velocity:彈性復位的速度
    */
    [UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
        _imageView.center=location; //CGPointMake(160, 284);
    } completion:nil];
}
@end

// UIView實現基礎動畫--彈性動畫

// Animation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

UIImageView *_imageView;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//建立影象顯示控制元件

_imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"ball.png"]];

_imageView.center=CGPointMake(160, 50);

[self.view addSubview:_imageView];

}

#pragma mark 點選事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *touch=touches.anyObject;

CGPoint location= [touch locationInView:self.view];

/*建立彈性動畫

damping:阻尼，範圍0-1，阻尼越接近於0，彈性效果越明顯

velocity:彈性復位的速度

[UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{

_imageView.center=location; //CGPointMake(160, 284);

} completion:nil];

}

@end

執行效果：

補充–動畫設定引數

在動畫方法中有一個option引數，UIViewAnimationOptions型別，它是一個列舉型別，動畫引數分為三類，可以組合使用：

1.常規動畫屬性設定（可以同時選擇多個進行設定）

UIViewAnimationOptionLayoutSubviews：動畫過程中保證子檢視跟隨運動。

UIViewAnimationOptionAllowUserInteraction：動畫過程中允許使用者互動。

UIViewAnimationOptionBeginFromCurrentState：所有檢視從當前狀態開始執行。

UIViewAnimationOptionRepeat：重複執行動畫。

UIViewAnimationOptionAutoreverse ：動畫執行到結束點後仍然以動畫方式回到初始點。

UIViewAnimationOptionOverrideInheritedDuration：忽略巢狀動畫時間設定。

UIViewAnimationOptionOverrideInheritedCurve：忽略巢狀動畫速度設定。

UIViewAnimationOptionAllowAnimatedContent：動畫過程中重繪檢視（注意僅僅適用於轉場動畫）。

UIViewAnimationOptionShowHideTransitionViews：檢視切換時直接隱藏舊檢視、顯示新檢視，而不是將舊檢視從父檢視移除（僅僅適用於轉場動畫）
UIViewAnimationOptionOverrideInheritedOptions ：不繼承父動畫設定或動畫型別。

2.動畫速度控制（可從其中選擇一個設定）

UIViewAnimationOptionCurveEaseInOut：動畫先緩慢，然後逐漸加速。

UIViewAnimationOptionCurveEaseIn ：動畫逐漸變慢。

UIViewAnimationOptionCurveEaseOut：動畫逐漸加速。

UIViewAnimationOptionCurveLinear ：動畫勻速執行，預設值。

3.轉場型別（僅適用於轉場動畫設定，可以從中選擇一個進行設定，基本動畫、關鍵幀動畫不需要設定）

UIViewAnimationOptionTransitionNone：沒有轉場動畫效果。

UIViewAnimationOptionTransitionFlipFromLeft ：從左側翻轉效果。

UIViewAnimationOptionTransitionFlipFromRight：從右側翻轉效果。

UIViewAnimationOptionTransitionCurlUp：向後翻頁的動畫過渡效果。

UIViewAnimationOptionTransitionCurlDown ：向前翻頁的動畫過渡效果。

UIViewAnimationOptionTransitionCrossDissolve：舊檢視溶解消失顯示下一個新檢視的效果。

UIViewAnimationOptionTransitionFlipFromTop ：從上方翻轉效果。

UIViewAnimationOptionTransitionFlipFromBottom：從底部翻轉效果。

關鍵幀動畫

從iOS7開始UIView動畫中封裝了關鍵幀動畫，下面就來看一下如何使用UIView封裝方法進行關鍵幀動畫控制，這裡實現前面關鍵幀動畫部分對於落花的控制。

//
//  UIView關鍵幀動畫
//  UIViewAnimation
//
//  Created by Kenshin Cui on 14-3-22.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"

@interface KCMainViewController (){
    UIImageView *_imageView;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //設定背景
    UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];
    self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

    //建立影象顯示控制元件
    _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"petal.png"]];
    _imageView.center=CGPointMake(50, 150);
    [self.view addSubview:_imageView];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    //UITouch *touch=touches.anyObject;
    //CGPoint location= [touch locationInView:self.view];

    /*關鍵幀動畫
     options:
     */
    [UIView animateKeyframesWithDuration:5.0 delay:0 options: UIViewAnimationOptionCurveLinear| UIViewAnimationOptionCurveLinear animations:^{
        //第二個關鍵幀（準確的說第一個關鍵幀是開始位置）:從0秒開始持續50%的時間，也就是5.0*0.5=2.5秒
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
            _imageView.center=CGPointMake(80.0, 220.0);
        }];
        //第三個關鍵幀，從0.5*5.0秒開始，持續5.0*0.25=1.25秒
        [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
            _imageView.center=CGPointMake(45.0, 300.0);
        }];
        //第四個關鍵幀：從0.75*5.0秒開始，持所需5.0*0.25=1.25秒
        [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
            _imageView.center=CGPointMake(55.0, 400.0);
        }];

    } completion:^(BOOL finished) {
        NSLog(@"Animation end.");
    }];
}
@end

// UIView關鍵幀動畫

// UIViewAnimation

// Created by Kenshin Cui on 14-3-22.

#import "KCMainViewController.h"

@interface KCMainViewController (){

UIImageView *_imageView;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//設定背景

UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"];

self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage];

//建立影象顯示控制元件

_imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"petal.png"]];

_imageView.center=CGPointMake(50, 150);

[self.view addSubview:_imageView];

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//UITouch *touch=touches.anyObject;

//CGPoint location= [touch locationInView:self.view];

/*關鍵幀動畫

options:

[UIView animateKeyframesWithDuration:5.0 delay:0 options: UIViewAnimationOptionCurveLinear| UIViewAnimationOptionCurveLinear animations:^{

//第二個關鍵幀（準確的說第一個關鍵幀是開始位置）:從0秒開始持續50%的時間，也就是5.0*0.5=2.5秒

[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{

_imageView.center=CGPointMake(80.0, 220.0);

}];

//第三個關鍵幀，從0.5*5.0秒開始，持續5.0*0.25=1.25秒

[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{

_imageView.center=CGPointMake(45.0, 300.0);

}];

//第四個關鍵幀：從0.75*5.0秒開始，持所需5.0*0.25=1.25秒

[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{

_imageView.center=CGPointMake(55.0, 400.0);

}];

} completion:^(BOOL finished) {

NSLog(@"Animation end.");

}];

}

@end

補充–動畫設定引數

對於關鍵幀動畫也有一些動畫引數設定options，UIViewKeyframeAnimationOptions型別，和上面基本動畫引數設定有些差別，關鍵幀動畫設定引數分為兩類，可以組合使用：

1.常規動畫屬性設定（可以同時選擇多個進行設定）

UIViewAnimationOptionLayoutSubviews：動畫過程中保證子檢視跟隨運動。

UIViewAnimationOptionAllowUserInteraction：動畫過程中允許使用者互動。

UIViewAnimationOptionBeginFromCurrentState：所有檢視從當前狀態開始執行。

UIViewAnimationOptionRepeat：重複執行動畫。

UIViewAnimationOptionAutoreverse ：動畫執行到結束點後仍然以動畫方式回到初始點。

UIViewAnimationOptionOverrideInheritedDuration：忽略巢狀動畫時間設定。
UIViewAnimationOptionOverrideInheritedOptions ：不繼承父動畫設定或動畫型別。

2.動畫模式設定（同前面關鍵幀動畫動畫模式一一對應，可以從其中選擇一個進行設定）

UIViewKeyframeAnimationOptionCalculationModeLinear：連續運算模式。

UIViewKeyframeAnimationOptionCalculationModeDiscrete ：離散運算模式。

UIViewKeyframeAnimationOptionCalculationModePaced：均勻執行運算模式。

UIViewKeyframeAnimationOptionCalculationModeCubic：平滑運算模式。

UIViewKeyframeAnimationOptionCalculationModeCubicPaced：平滑均勻運算模式。

注意：前面說過關鍵幀動畫有兩種形式，上面演示的是屬性值關鍵幀動畫，路徑關鍵幀動畫目前UIView還不支援。

轉場動畫

從iOS4.0開始，UIView直接封裝了轉場動畫，使用起來同樣很簡單。

//
//  UIView轉場動畫
//  TransitionAnimation
//
//  Created by Kenshin Cui on 14-3-12.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "KCMainViewController.h"
#define IMAGE_COUNT 5

@interface KCMainViewController (){
    UIImageView *_imageView;
    int _currentIndex;
}

@end

@implementation KCMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //定義圖片控制元件
    _imageView=[[UIImageView alloc]init];
    _imageView.frame=[UIScreen mainScreen].applicationFrame;
    _imageView.contentMode=UIViewContentModeScaleAspectFit;
    _imageView.image=[UIImage imageNamed:@"0.jpg"];//預設圖片
    [self.view addSubview:_imageView];
    //新增手勢
    UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
    leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft;
    [self.view addGestureRecognizer:leftSwipeGesture];

    UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
    rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight;
    [self.view addGestureRecognizer:rightSwipeGesture];
}

#pragma mark 向左滑動瀏覽下一張圖片
-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:YES];
}

#pragma mark 向右滑動瀏覽上一張圖片
-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:NO];
}

#pragma mark 轉場動畫
-(void)transitionAnimation:(BOOL)isNext{
    UIViewAnimationOptions option;
    if (isNext) {
        option=UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromRight;
    }else{
        option=UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromLeft;
    }

    [UIView transitionWithView:_imageView duration:1.0 options:option animations:^{
        _imageView.image=[self getImage:isNext];
    } completion:nil];
}

#pragma mark 取得當前圖片
-(UIImage *)getImage:(BOOL)isNext{
    if (isNext) {
        _currentIndex=(_currentIndex+1)%IMAGE_COUNT;
    }else{
        _currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT;
    }
    NSString *imageName=[NSString stringWithFormat:@"%i.jpg",_currentIndex];
    return [UIImage imageNamed:imageName];
}
@end

// UIView轉場動畫

// TransitionAnimation

// Created by Kenshin Cui on 14-3-12.

#import "KCMainViewController.h"

#define IMAGE_COUNT 5

@interface KCMainViewController (){

UIImageView *_imageView;

int _currentIndex;

}

@end

@implementation KCMainViewController

- (void)viewDidLoad {

[super viewDidLoad];

//定義圖片控制元件

_imageView=[[UIImageView alloc]init];

_imageView.frame=[UIScreen mainScreen].applicationFrame;

_imageView.contentMode=UIViewContentModeScaleAspectFit;

_imageView.image=[UIImage imageNamed:@"0.jpg"];//預設圖片

[self.view addSubview:_imageView];

//新增手勢

UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];

leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft;

[self.view addGestureRecognizer:leftSwipeGesture];

UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];

rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight;

[self.view addGestureRecognizer:rightSwipeGesture];

}

#pragma mark 向左滑動瀏覽下一張圖片

-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{

[self transitionAnimation:YES];

}

#pragma mark 向右滑動瀏覽上一張圖片

-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{

[self transitionAnimation:NO];

}

#pragma mark 轉場動畫

-(void)transitionAnimation:(BOOL)isNext{

UIViewAnimationOptions option;

if (isNext) {

option=UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromRight;

}else{

option=UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromLeft;

}

[UIView transitionWithView:_imageView duration:1.0 options:option animations:^{

_imageView.image=[self getImage:isNext];

} completion:nil];

}

#pragma mark 取得當前圖片

-(UIImage *)getImage:(BOOL)isNext{

if (isNext) {

_currentIndex=(_currentIndex+1)%IMAGE_COUNT;

}else{

_currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT;

}

NSString *imageName=[NSString stringWithFormat:@"%i.jpg",_currentIndex];

return [UIImage imageNamed:imageName];

}

@end

上面的轉場動畫演示中，其實僅僅有一個檢視UIImageView做轉場動畫，每次轉場通過切換UIImageView的內容而已。如果有兩個完全不同的檢視，並且每個檢視佈局都很複雜，此時要在這兩個檢視之間進行轉場可以使用+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0)方法進行兩個檢視間的轉場，需要注意的是預設情況下轉出的檢視會從父檢視移除，轉入後重新新增，可以通過UIViewAnimationOptionShowHideTransitionViews引數設定，設定此引數後轉出的檢視會隱藏（不會移除）轉入後再顯示。

注意：轉場動畫設定引數完全同基本動畫引數設定；同直接使用轉場動畫不同的是使用UIView的裝飾方法進行轉場動畫其動畫效果較少，因為這裡無法直接使用私有API。

接入Tengine，讓你的AI應用飛起來
2019-06-06
AI
27 款 iOS 開源庫，讓你的開發溜到飛起
2016-12-17
iOS
一行程式碼讓你的TableView動起來-iOS動畫
2017-09-07
行程ViewiOS動畫
[iOS]CCache 讓你的編譯時間飛起來
2017-12-21
iOS編譯
讓Web應用程式飛起來的祕訣
2011-09-27
Web
Cinemagraph Pro Mac(讓你的攝影作品動起來)
2023-02-06
Mac
學起來：Flutter將支援桌面應用開發
2019-04-28
Flutter
如何讓開發變得敏捷起來？
2020-03-31
敏捷
Flutter 中使用 AnimatedContainer 讓你的 Widget 動起來
2021-06-03
FlutterAI
用 Pygame 使你的遊戲角色移動起來
2019-05-19
GAM遊戲
不會 Web 開發，也能讓資料“動”起來的開源專案！
2021-06-23
Web
GoodNotes 5 Mac版 - 讓你的筆記靈動起來
2023-11-09
GoMac筆記
CSS——讓“盒子”動起來：① 浮動
2019-04-28
CSS
機器學習與移動應用開發的未來
2019-02-21
機器學習
讓react用起來更得心應手——（react-redux）
2019-03-04
ReactRedux
GPT接入企微應用 - 讓工作快樂起來
2023-03-28
GPT
iOS開發-SiriKit應用
2016-06-20
iOS
開發完 iOS 應用，接下去你該做的事
2016-10-14
iOS
C#開發WPF/Silverlight動畫及遊戲系列教程(Game Course)：(三)讓物體動起來③
2009-07-08
C#動畫遊戲GAM
如何讓你的iOS與Android應用與眾不同
2014-07-02
iOSAndroid
《高效能iOS 應用開發》之影響移動應用效能的因素
2018-02-07
iOS
加上快捷鍵，讓你的網站酷起來
2015-12-24
網站
如何讓Spring Boot 的配置動起來？
2021-07-23
Spring Boot
Adobe After Effects 2024：讓你的創意動起來 mac/win啟用版
2024-01-23
Mac
讓ppt中的資料動起來的方法
2017-01-13
運動APP能否讓“懶人”動起來？
2015-09-03
APP
DRF類檢視讓你的程式碼DRY起來
2020-12-19
如何讓你的專業聽起來逼格更高？
2014-01-20
讓react用起來更得心應手——(React 基礎簡析)
2018-10-22
React
十招讓 Ubuntu 16.04 LTS 用起來更得心應手
2016-06-12
Ubuntu
讓人物在地圖上動起來
2013-07-31
地圖
基於THINKPHP5 多微信開發框架，讓微信開發飛起來
2019-05-11
PHP框架
讓物體動起來，Unity的幾種移動方式
2023-10-27
Unity
《高效能iOS 應用開發》之降低你 APP 的電量消耗
2018-02-07
iOSAPP
運動類App能否讓“懶人”動起來？
2015-09-06
APP
讓react用起來更得心應手——（react-router原理簡析）
2018-10-23
React
這樣配置，讓你的 IDEA 好用到飛起來！
2020-10-09
Idea
讓你的虛擬機器飛起來–VMware workstaion薦
2008-02-18
虛擬機AI

iOS開發系列–讓你的應用“動”起來

概覽

CALayer

CALayer簡介

CALayer常用屬性

CALayer繪圖

使用代理方法繪圖

擴充套件1–帶陰影效果的圓形圖片裁切

擴充套件2–圖層的形變

使用自定義圖層繪圖

Core Animation

基礎動畫

關鍵幀動畫

補充–其他屬性

動畫組

轉場動畫

逐幀動畫

UIView動畫封裝

基礎動畫

關鍵幀動畫

轉場動畫

相關文章