iOS開發UI篇—核心動畫(關鍵幀動畫)
阿新 • • 發佈：2018-12-24
一、簡單介紹
是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
二、程式碼示例
第一種方式：
程式碼：
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
說明：這個專案在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 [email protected]"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 [email protected]"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的動畫。
三、圖示抖動
程式碼示例：
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 [email protected]"transform.rotation";
25 //設定動畫時間
26 keyAnima.duration=0.1;
27 //設定圖示抖動弧度
28 //把度數轉換為弧度 度數/180*M_PI
29 [email protected][@(-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），產生抖動的視覺效果。
程式介面：
