iOSUI篇—核心動畫(主要畫面格動畫CAKeyframeAnimation)，

iOSUI篇—核心動畫(主要畫面格動畫CAKeyframeAnimation)，

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

一、簡單介紹

CAKeyframeAnimation是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

二、程式碼範例

第一種方式：

代碼：

 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     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 *)anim48 {49     NSLog(@"開始動畫");50 }51 52 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag53 {54     NSLog(@"結束動畫");55 }56 @end

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

效果和列印結果：

補充：設定動畫的節奏

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

代碼：

 #import "YYViewController.h"         @interface YYViewController ()     @property (weak, nonatomic) IBOutlet UIView *customView;         @end         @implementation YYViewController     -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event     {        //1.建立動畫對象        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];                anim.duration = 2;                UIBezierPath *path = [UIBezierPath bezierPath];        [path moveToPoint:CGPointMake(50, 50)];        [path addLineToPoint:CGPointMake(300, 50)];        [path addLineToPoint:CGPointMake(300, 400)];                anim.keyPath =  @"position";        anim.path = path.CGPath;                //設定代理，開始—結束        keyAnima.delegate=self;        [self.imageV.layer addAnimation:anim forKey:nil];            }        -(void)animationDidStart:(CAAnimation *)anim42    {        NSLog(@"開始動畫");    }        -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag47    {        NSLog(@"結束動畫");    }    @end

說明：可以通過path屬性，讓layer在指定的軌跡上運動。

停止動畫：

40 - (IBAction)stopOnClick:(UIButton *)sender {41     //停止self.customView.layer上名稱標示為wendingding的動畫42     [self.customView.layer removeAnimationForKey:@"wendingding"];43 }

點擊停止動畫，程式內部會調用? [self.customView.layer removeAnimationForKey:@"wendingding"];

停止self.customView.layer上名稱標示為wendingding的動畫。

三、表徵圖抖動

程式碼範例：

 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     keyAnima.keyPath=@"transform.rotation";25     //設定動畫時間26     keyAnima.duration=0.1;27     //設定表徵圖抖動弧度28     //把度數轉換為弧度  度數/180*M_PI29     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），產生抖動的視覺效果。

程式介面：