iOS核心動畫－關鍵幀動畫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

二、代碼示例

第一種方式：

代碼：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@end

@implementation YYViewController

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    //1.創建核心動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告訴系統要執行什麼動畫
    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    keyAnima.values=@[value1,value2,value3,value4,value5];
    //1.2設置動畫執行完畢後，不刪除動畫
    keyAnima.removedOnCompletion=NO;
    //1.3設置保存動畫的最新狀態
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4設置動畫執行的時間
    keyAnima.duration=4.0;
    //1.5設置動畫的節奏
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //設置代理，開始—結束
    keyAnima.delegate=self;
    //2.添加核心動畫
    [self.customView.layer addAnimation:keyAnima forKey:nil];
}

-(void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"開始動畫");
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"結束動畫");
}
@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 *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告訴系統要執行什麼動畫
    //創建一條路徑
    CGMutablePathRef path=CGPathCreateMutable();
    //設置一個圓的路徑
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnima.path=path;
    
    //有create就一定要有release
    CGPathRelease(path);
    //1.2設置動畫執行完畢後，不刪除動畫
    keyAnima.removedOnCompletion=NO;
    //1.3設置保存動畫的最新狀態
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4設置動畫執行的時間
    keyAnima.duration=5.0;
    //1.5設置動畫的節奏
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //設置代理，開始—結束
    keyAnima.delegate=self;
    //2.添加核心動畫
    [self.customView.layer addAnimation:keyAnima forKey:nil];
}

- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"開始動畫");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"結束動畫");
}
@end

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

停止動畫：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
- (IBAction)stopOnClick:(UIButton *)sender;
@end

@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    //1.創建核心動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告訴系統要執行什麼動畫
    //創建一條路徑
    CGMutablePathRef path=CGPathCreateMutable();
    //設置一個圓的路徑
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnima.path=path;
    
    //有create就一定要有release
    CGPathRelease(path);
    //1.2設置動畫執行完畢後，不刪除動畫
    keyAnima.removedOnCompletion=NO;
    //1.3設置保存動畫的最新狀態
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4設置動畫執行的時間
    keyAnima.duration=5.0;
    //1.5設置動畫的節奏
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //2.添加核心動畫
    [self.customView.layer addAnimation:keyAnima forKey:@"wendingding"];
}

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

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

三、圖標抖動

代碼示例：

#import "YYViewController.h"
#define angle2Radian(angle)  ((angle)/180.0*M_PI)

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@end

@implementation YYViewController
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    //1.創建核心動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    keyAnima.keyPath=@"transform.rotation";
    //設置動畫時間
    keyAnima.duration=0.1;
    //設置圖標抖動弧度
    //把度數轉換爲弧度  度數/180*M_PI
    keyAnima.values=@[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))];
    //設置動畫的重複次數(設置爲最大值)
    keyAnima.repeatCount=MAXFLOAT;
    
    keyAnima.fillMode=kCAFillModeForwards;
    keyAnima.removedOnCompletion=NO;
    //2.添加動畫
    [self.iconView.layer addAnimation:keyAnima forKey:nil];
}
@end

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

程序界面：