iOS開發UI篇—核心動畫(主要畫面格動畫)

標籤：

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 @end15 16 @implementation YYViewController17 18 19 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event20 {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 *)anim48 {49     NSLog(@"開始動畫");50 }51 52 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag53 {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 *)event12 {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就一定要有release25     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 *)anim42 {43     NSLog(@"開始動畫");44 }45 46 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag47 {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 YYViewController10 11 12 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event13 {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就一定要有release26     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 @end16 17 18 @implementation YYViewController19 20 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event21 {22     //1.建立核心動畫23     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];24     [email protected]"transform.rotation";25     //設定動畫時間26     keyAnima.duration=0.1;27     //設定表徵圖抖動弧度28     //把度數轉換為弧度  度數/180*M_PI29     [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），產生抖動的視覺效果。

程式介面：

iOS開發UI篇—核心動畫(主要畫面格動畫)