iOS開發UI篇—核心動畫(關鍵幀動畫)
一、簡單介紹
是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[email protected]"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[email protected][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 [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),產生抖動的視覺效果。
程式介面: