動畫

一、簡單介紹

CAPropertyAnimation的子類

屬性解析:

fromValue：keyPath相應屬性的初始值

toValue：keyPath相應屬性的結束值

隨着動畫的進行，在長度爲duration的持續時間內，keyPath相應屬性的值從fromValue漸漸地變爲toValue

如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值還是動畫執行前的初始值，並沒有真正被改變。

比如，CALayer的position初始值爲(0,0)，CABasicAnimation的fromValue爲(10,10)，toValue爲(100,100)，雖然動畫執行完畢後圖層保持在(100,100)這個位置，實質上圖層的position還是爲(0,0)

 

二、平移動畫

代碼示例：

 1 //
 2 //  YYViewController.m
 3 //  07-核心動畫（基礎動畫）
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *myLayer;
13 @end
14 
15 @implementation YYViewController
16 
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20     
21     //創建layer
22     CALayer *myLayer=[CALayer layer];
23     //設置layer的屬性
24     myLayer.bounds=CGRectMake(0, 0, 50, 80);
25     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
26     myLayer.position=CGPointMake(50, 50);
27     myLayer.anchorPoint=CGPointMake(0, 0);
28     myLayer.cornerRadius=20;
29     //添加layer
30     [self.view.layer addSublayer:myLayer];
31     self.myLayer=myLayer;
32 }
33 
34 //設置動畫（基礎動畫）
35 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
36 {
37     //1.創建核心動畫
38     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
39     CABasicAnimation *anima=[CABasicAnimation animation];
40     
41     //1.1告訴系統要執行什麼樣的動畫
42     anima.keyPath=@"position";
43     //設置通過動畫，將layer從哪兒移動到哪兒
44     anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
45     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
46     
47     //1.2設置動畫執行完畢之後不刪除動畫
48     anima.removedOnCompletion=NO;
49     //1.3設置保存動畫的最新狀態
50     anima.fillMode=kCAFillModeForwards;
51 
52     //2.添加核心動畫到layer
53     [self.myLayer addAnimation:anima forKey:nil];
54 
55 }
　　@end

代碼說明：

 第42行設置的keyPath是@"position"，說明要修改的是CALayer的position屬性，也就是會執行平移動畫

 第44，45行，這裏的屬性接收的時id類型的參數，因此並不能直接使用CGPoint這種結構體類型，而是要先包裝成NSValue對象後再使用。

 默認情況下，動畫執行完畢後，動畫會自動從CALayer上移除，CALayer又會回到原來的狀態。爲了保持動畫執行後的狀態，可以加入第48，50行代碼

byValue和toValue的區別，前者是在當前的位置上增加多少，後者是到指定的位置。

 

執行效果：

  

設置代理：設置動畫的代理，可以監聽動畫的執行過程，這裏設置控制器爲代理。

代碼示例：

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property(nonatomic,strong)CALayer *myLayer;
 5 @end
 6 
 7 @implementation YYViewController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12     
13     //創建layer
14     CALayer *myLayer=[CALayer layer];
15     //設置layer的屬性
16     myLayer.bounds=CGRectMake(0, 0, 50, 80);
17     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
18     myLayer.position=CGPointMake(50, 50);
19     myLayer.anchorPoint=CGPointMake(0, 0);
20     myLayer.cornerRadius=20;
21     //添加layer
22     [self.view.layer addSublayer:myLayer];
23     self.myLayer=myLayer;
24 }
25 
26 //設置動畫（基礎動畫）
27 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
28 {
29     //1.創建核心動畫
30     //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
31     CABasicAnimation *anima=[CABasicAnimation animation];
32     
33     //1.1告訴系統要執行什麼樣的動畫
34     anima.keyPath=@"position";
35     //設置通過動畫，將layer從哪兒移動到哪兒
36     anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
37     anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
38     
39     //1.2設置動畫執行完畢之後不刪除動畫
40     anima.removedOnCompletion=NO;
41     //1.3設置保存動畫的最新狀態
42     anima.fillMode=kCAFillModeForwards;
43     anima.delegate=self;
44     //打印
45     NSString *str=NSStringFromCGPoint(self.myLayer.position);
46     NSLog(@"執行前：%@",str);
47     
48     //2.添加核心動畫到layer
49     [self.myLayer addAnimation:anima forKey:nil];
50 
51 }
52 
53 -(void)animationDidStart:(CAAnimation *)anim
54 {
55     NSLog(@"開始執行動畫");
56 }
57 
58 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
59 {
60     //動畫執行完畢，打印執行完畢後的position值
61     NSString *str=NSStringFromCGPoint(self.myLayer.position);
62     NSLog(@"執行後：%@",str);
63 }
64 
65 @end

打印position的屬性值，驗證圖層的屬性值還是動畫執行前的初始值{50，50}，並沒有真正被改變爲{200，300}。

三、縮放動畫

實現縮放動畫的代碼示例：

 1 //
 2 //  YYViewController.m
 3 //  08-核心動畫平移
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *myLayer;
13 @end
14 
15 @implementation YYViewController
16 
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20     
21     //創建layer
22     CALayer *myLayer=[CALayer layer];
23     //設置layer的屬性
24     myLayer.bounds=CGRectMake(0, 0, 150, 60);
25     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
26     myLayer.position=CGPointMake(50, 50);
27     myLayer.anchorPoint=CGPointMake(0, 0);
28     myLayer.cornerRadius=40;
29     //添加layer
30     [self.view.layer addSublayer:myLayer];
31     self.myLayer=myLayer;
32 }
33 
34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
35 {
36     //1.創建動畫
37     CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];
38     //1.1設置動畫執行時間
39     anima.duration=2.0;
40     //1.2設置動畫執行完畢後不刪除動畫
41     anima.removedOnCompletion=NO;
42     //1.3設置保存動畫的最新狀態
43     anima.fillMode=kCAFillModeForwards;
44     //1.4修改屬性，執行動畫
45     anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
46     //2.添加動畫到layer
47     [self.myLayer addAnimation:anima forKey:nil];
48 }
49 
50 @end

實現效果：

  

四、旋轉動畫

代碼示例：

 1 //
 2 //  YYViewController.m
 3 //  09-核心動畫旋轉
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *myLayer;
13 @end
14 
15 @implementation YYViewController
16 - (void)viewDidLoad
17 {
18     [super viewDidLoad];
19     
20     //創建layer
21     CALayer *myLayer=[CALayer layer];
22     //設置layer的屬性
23     myLayer.bounds=CGRectMake(0, 0, 150, 60);
24     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
25     myLayer.position=CGPointMake(50, 50);
26     myLayer.anchorPoint=CGPointMake(0, 0);
27     myLayer.cornerRadius=40;
28     //添加layer
29     [self.view.layer addSublayer:myLayer];
30     self.myLayer=myLayer;
31 }
32 
33 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
34 {
35     //1.創建動畫
36     CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];
37     //1.1設置動畫執行時間
38     anima.duration=2.0;
39     //1.2修改屬性，執行動畫
40     anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
41     //1.3設置動畫執行完畢後不刪除動畫
42     anima.removedOnCompletion=NO;
43     //1.4設置保存動畫的最新狀態
44     anima.fillMode=kCAFillModeForwards;
45     
46     //2.添加動畫到layer
47     [self.myLayer addAnimation:anima forKey:nil];
48 }
49 @end

實現效果：

   

提示：如果要讓圖形以2D的方式旋轉，只需要把CATransform3DMakeRotation在z方向上的值改爲1即可。

anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];

四、補充

可以通過transform（KVC）的方式來進行設置。

代碼示例（平移）：

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property(nonatomic,strong)CALayer *myLayer;
 5 @end
 6 
 7 @implementation YYViewController
 8 - (void)viewDidLoad
 9 {
10     [super viewDidLoad];
11     
12     //創建layer
13     CALayer *myLayer=[CALayer layer];
14     //設置layer的屬性
15     myLayer.bounds=CGRectMake(0, 0, 150, 60);
16     myLayer.backgroundColor=[UIColor yellowColor].CGColor;
17     myLayer.position=CGPointMake(50, 50);
18     myLayer.anchorPoint=CGPointMake(0, 0);
19     myLayer.cornerRadius=40;
20     //添加layer
21     [self.view.layer addSublayer:myLayer];
22     self.myLayer=myLayer;
23 }
24 
25 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
26 {
27     //1.創建動畫
28     CABasicAnimation *anima=[CABasicAnimation animation];
29     anima.keyPath=@"transform";
30     //1.1設置動畫執行時間
31     anima.duration=2.0;
32     //1.2修改屬性，執行動畫
33   
34     anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
35     //1.3設置動畫執行完畢後不刪除動畫
36     anima.removedOnCompletion=NO;
37     //1.4設置保存動畫的最新狀態
38     anima.fillMode=kCAFillModeForwards;
39     
40     //2.添加動畫到layer
41     [self.myLayer addAnimation:anima forKey:nil];
42 }

實現效果：

繪製的圖形在y的方向上移動100個單位。