核心動畫(關鍵幀動畫)-轉
阿新 • • 發佈:2018-12-11
一.簡單介紹
是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。
二.程式碼示例
第一種方式
@interface ViewController () @property(nonatomic,strong) UIView *customView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _customView = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 100, 100)]; _customView.backgroundColor = [UIColor yellowColor]; [self.view addSubview:_customView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //建立核心動畫 CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation]; //平移 keyAnimation.keyPath = @"position"; //告訴系統要執行什麼動畫 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)]; keyAnimation.values = @[value1,value2,value3,value4,value5]; //設定動畫完畢後,不刪除動畫 keyAnimation.removedOnCompletion = NO; //設定保持動畫的最新狀態 keyAnimation.fillMode = kCAFillModeForwards; //設定動畫執行的時間 keyAnimation.duration = 4.0; //設定動畫的節奏 keyAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //設定代理,開始-結束 keyAnimation.delegate = self; //新增核心動畫 [_customView.layer addAnimation:keyAnimation forKey:nil]; } #pragma mark Core Animation Delegate - (void)animationDidStart:(CAAnimation *)anim{ NSLog(@"開始動畫"); } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ NSLog(@"結束動畫"); } @end
第二種方式(使用path)讓layer在指定的路徑上移動
@interface ViewController () @property(nonatomic,strong) UIView *customView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _customView = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 100, 100)]; _customView.backgroundColor = [UIColor yellowColor]; [self.view addSubview:_customView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //建立核心動畫 CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation]; keyAnimation.keyPath = @"position"; //告訴系統要執行什麼動畫 //建立一條路徑 CGMutablePathRef path = CGPathCreateMutable(); CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100)); keyAnimation.path = path; //有create就一定要有release CGPathRelease(path); //設定動畫執行完畢後,不刪除動畫 keyAnimation.removedOnCompletion = NO; //設定儲存動畫的最新狀態 keyAnimation.fillMode = kCAFillModeForwards; //設定動畫執行的時間 keyAnimation.duration = 5.0; //設定動畫的節奏 keyAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //設定代理,開始-結束 keyAnimation.delegate = self; //新增核心動畫 [_customView.layer addAnimation:keyAnimation forKey:nil]; } #pragma mark Core Animation Delegate - (void)animationDidStart:(CAAnimation *)anim{ NSLog(@"開始動畫"); } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ NSLog(@"結束動畫"); } @end
說明:可以通過path屬性,讓layer在指定的路徑上運動。
停止動畫:
//新增核心動畫 [self.customView.layer addAnimation:keyAnima forKey:@"wendingding"]; //停止self.customView.layer上名稱標示為wendingding的動畫 [self.customView.layer removeAnimationForKey:@"wendingding"];
三.圖示抖動
#import "ViewController.h" #define angle2Radian(angle) ((angle)/180.0*M_PI) @interface ViewController () @property(nonatomic,strong) UIImageView *iconView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _iconView = [[UIImageView alloc] initWithFrame:CGRectMake(160, 150, 100, 100)]; _iconView.image = [UIImage imageNamed:@"logo_100.jpg"]; [self.view addSubview:_iconView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //建立核心動畫 CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation]; keyAnimation.keyPath = @"transform.rotation"; //設定動畫時間 keyAnimation.duration = 0.1; //把度數轉換為弧度 度數/180*M_PI keyAnimation.values = @[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))]; //設定動畫的重複次數(設定為最大值) keyAnimation.repeatCount = MAXFLOAT; keyAnimation.fillMode = kCAFillModeForwards; keyAnimation.removedOnCompletion = NO; //新增動畫 [self.iconView.layer addAnimation:keyAnimation forKey:nil]; } @end