iOS開發UI篇—核心動畫(關鍵幀動畫)

1、簡單介紹

是CApropertyAnimation的子類，跟CABasicAnimation的區別是：CABasicAnimation只能從一個數值(fromValue)變到另外一個數值(toValue)，而CAKeyframeAnimation會使用一個NSArray保存這些數值

屬性解析：

values：就是上述的NSArray對象。裏面的元素稱爲」關鍵幀」(keyframe)。動畫對象會在指定的時間(duration)內，依次顯示values數組中的每個關鍵幀

path：能夠設置一個CGPathRef\CGMutablePathRef,讓層跟着路徑移動。path只對CALayer的anchorPoint和position起做用。若是你設置了path，那麼values將被忽略

keyTimes：能夠爲對應的關鍵幀指定對應的時間點,其取值範圍爲0到1.0,keyTimes中的每個時間值都對應values中的每一幀.當keyTimes沒有設置的時候,各個關鍵幀的時間是平分的

說明：CABasicAnimation可看作是最多隻有2個關鍵幀的CAKeyframeAnimation

2、代碼示例

第一種方式：

代碼：

 1 //
 2 //  YYViewController.m
 3 //  10-核心動畫（關鍵幀動畫1）
 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 (weak, nonatomic) IBOutlet UIView *customView;
13 
14 @end
15 
16 @implementation YYViewController
17 
18 
19 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
20 {
21     //1.建立核心動畫
22     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
23     //平移
24     keyAnima.keyPath=@"position";
25     //1.1告訴系統要執行什麼動畫
26     NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
27     NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
28     NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
29     NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
30     NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
31     keyAnima.values=@[value1,value2,value3,value4,value5];
32     //1.2設置動畫執行完畢後，不刪除動畫
33     keyAnima.removedOnCompletion=NO;
34     //1.3設置保存動畫的最新狀態
35     keyAnima.fillMode=kCAFillModeForwards;
36     //1.4設置動畫執行的時間
37     keyAnima.duration=4.0;
38     //1.5設置動畫的節奏
39     keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
40     
41     //設置代理，開始—結束
42     keyAnima.delegate=self;
43     //2.添加核心動畫
44     [self.customView.layer addAnimation:keyAnima forKey:nil];
45 }
46 
47 -(void)animationDidStart:(CAAnimation *)anim
48 {
49     NSLog(@"開始動畫");
50 }
51 
52 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
53 {
54     NSLog(@"結束動畫");
55 }
56 @end

說明：這個項目在storyboard中拖入了一個view，並和控制器中的custom進行了關聯。

效果和打印結果：

 　　

補充：設置動畫的節奏

第二種方式（使用path）讓layer在指定的路徑上移動（畫圓）：

代碼：

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 
 6 @end
 7 
 8 @implementation YYViewController
 9 
10 
11 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
12 {
13     //1.建立核心動畫
14     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
15     //平移
16     keyAnima.keyPath=@"position";
17     //1.1告訴系統要執行什麼動畫
18     //建立一條路徑
19     CGMutablePathRef path=CGPathCreateMutable();
20     //設置一個圓的路徑
21     CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
22     keyAnima.path=path;
23     
24     //有create就必定要有release
25     CGPathRelease(path);
26     //1.2設置動畫執行完畢後，不刪除動畫
27     keyAnima.removedOnCompletion=NO;
28     //1.3設置保存動畫的最新狀態
29     keyAnima.fillMode=kCAFillModeForwards;
30     //1.4設置動畫執行的時間
31     keyAnima.duration=5.0;
32     //1.5設置動畫的節奏
33     keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
34     
35     //設置代理，開始—結束
36     keyAnima.delegate=self;
37     //2.添加核心動畫
38     [self.customView.layer addAnimation:keyAnima forKey:nil];
39 }
40 
41 -(void)animationDidStart:(CAAnimation *)anim
42 {
43     NSLog(@"開始動畫");
44 }
45 
46 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
47 {
48     NSLog(@"結束動畫");
49 }
50 @end

說明：能夠經過path屬性，讓layer在指定的軌跡上運動。

中止動畫：

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 - (IBAction)stopOnClick:(UIButton *)sender;
 6 
 7 @end
 8 
 9 @implementation YYViewController
10 
11 
12 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
13 {
14     //1.建立核心動畫
15     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
16     //平移
17     keyAnima.keyPath=@"position";
18     //1.1告訴系統要執行什麼動畫
19     //建立一條路徑
20     CGMutablePathRef path=CGPathCreateMutable();
21     //設置一個圓的路徑
22     CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
23     keyAnima.path=path;
24     
25     //有create就必定要有release
26     CGPathRelease(path);
27     //1.2設置動畫執行完畢後，不刪除動畫
28     keyAnima.removedOnCompletion=NO;
29     //1.3設置保存動畫的最新狀態
30     keyAnima.fillMode=kCAFillModeForwards;
31     //1.4設置動畫執行的時間
32     keyAnima.duration=5.0;
33     //1.5設置動畫的節奏
34     keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
35     
36     //2.添加核心動畫
37     [self.customView.layer addAnimation:keyAnima forKey:@"wendingding"];
38 }
39 
40 - (IBAction)stopOnClick:(UIButton *)sender {
41     //中止self.customView.layer上名稱標示爲wendingding的動畫
42     [self.customView.layer removeAnimationForKey:@"wendingding"];
43 }
44 @end

點擊中止動畫，程序內部會調用  [self.customView.layer removeAnimationForKey:@"wendingding"];中止self.customView.layer上名稱標示爲wendingding的動畫。

3、圖標抖動

代碼示例：

 1 //
 2 //  YYViewController.m
 3 //  12-圖標抖動
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #define angle2Radian(angle)  ((angle)/180.0*M_PI)
11 
12 @interface YYViewController ()
13 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
14 
15 @end
16 
17 
18 @implementation YYViewController
19 
20 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
21 {
22     //1.建立核心動畫
23     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
24     keyAnima.keyPath=@"transform.rotation";
25     //設置動畫時間
26     keyAnima.duration=0.1;
27     //設置圖標抖動弧度
28     //把度數轉換爲弧度  度數/180*M_PI
29     keyAnima.values=@[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))];
30     //設置動畫的重複次數(設置爲最大值)
31     keyAnima.repeatCount=MAXFLOAT;
32     
33     keyAnima.fillMode=kCAFillModeForwards;
34     keyAnima.removedOnCompletion=NO;
35     //2.添加動畫
36     [self.iconView.layer addAnimation:keyAnima forKey:nil];
37 }
38 
39 @end

說明：圖標向左向右偏轉一個弧度（4），產生抖動的視覺效果。

程序界面：