1巢寡、核心動畫簡介
CoreAnimation蓬戚，中文翻譯為核心動畫夸楣，它是一組非常強大的動畫處理API，使用它能做出非常炫麗的動畫效果子漩，而且往往是事半功倍豫喧。也就是說，使用少量的代碼就可以實現(xiàn)非常強大的功能痛单。
?CoreAnimation可以用在MacOS X和iOS平臺嘿棘。
?CoreAnimation的動畫執(zhí)行過程都是在后臺操作的，不會阻塞主線程旭绒。
?要注意的是鸟妙，CoreAnimation是直接作用在CALayer上的，并非UIView挥吵。
2重父、核心動畫的操作步驟
1、創(chuàng)建動畫對象【使用核心動畫需要先添加QuartzCore.framework框架和引入主頭文件<QuartzCore/QuartzCore.h>(iOS7+不需要忽匈，因為iOS7以后系統(tǒng)默認已經(jīng)添加了QuartzCore框架)】
2房午、設(shè)置動畫屬性【初始化一個CAAnimation對象，并設(shè)置一些動畫相關(guān)屬性】
3丹允、把動畫對象添加到要作用的圖層(CALayer對象)之上【通過調(diào)用CALayer的addAnimation:forKey:方法增加CAAnimation對象到CALayer中郭厌，這樣就能開始執(zhí)行動畫了】
4、需要停止動畫：可以調(diào)用remove方法移除動畫【通過調(diào)用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫】
3雕蔽、核心動畫的繼承結(jié)構(gòu)
CAAnimation是所有動畫類的父類折柠，但是它不能直接使用，應(yīng)該使用它的子類批狐。
常見屬性有：
duration：動畫的持續(xù)時間
repeatCount：動畫的重復(fù)次數(shù)
timingFunction：控制動畫運行的節(jié)奏
說明：（1）能用的動畫類只有4個子類：CABasicAnimation扇售、CAKeyframeAnimation、CATransition、CAAnimationGroup
（2）CAMediaTiming是一個協(xié)議(protocol)承冰。
CAPropertyAnimation是CAAnimation的子類华弓，但是不能直接使用，要想創(chuàng)建動畫對象困乒，應(yīng)該使用它的兩個子類：CABasicAnimation和CAKeyframeAnimation
它有個NSString類型的keyPath屬性寂屏，你可以指定CALayer的某個屬性名為keyPath，并且對CALayer的這個屬性的值進行修改顶燕，達到相應(yīng)的動畫效果凑保。比如，指定@"position"為keyPath涌攻，就會修改CALayer的position屬性的值欧引，以達到平移的動畫效果
所有動畫對象的父類，負責(zé)控制動畫的持續(xù)時間和速度恳谎，是個抽象類芝此，不能直接使用，應(yīng)該使用它具體的子類
屬性解析：
duration(CAMediaTiming協(xié)議的屬性)：動畫的持續(xù)時間
repeatCount(CAMediaTiming協(xié)議的屬性)：動畫的重復(fù)次數(shù)
repeatDuration(CAMediaTiming協(xié)議的屬性)：動畫的重復(fù)時間
removedOnCompletion：默認為YES因痛，代表動畫執(zhí)行完畢后就從圖層上移除婚苹，圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài)鸵膏，那就設(shè)置為NO膊升，不過還要設(shè)置fillMode為kCAFillModeForwards
fillMode：決定當(dāng)前對象在非active時間段的行為.比如動畫開始之前,動畫結(jié)束之后
beginTime：可以用來設(shè)置動畫延遲執(zhí)行時間，若想延遲2s谭企，就設(shè)置為CACurrentMediaTime()+2廓译，CACurrentMediaTime()為圖層的當(dāng)前時間
timingFunction：速度控制函數(shù)，控制動畫運行的節(jié)奏
delegate：動畫代理
4债查、基礎(chǔ)動畫CABasicAnimation
CABasicAnimation是CAPropertyAnimation的子類非区，是屬性動畫№锿ⅲ基礎(chǔ)類型的動畫有平移動畫征绸，縮放動畫和旋轉(zhuǎn)動畫。
fromValue：keyPath相應(yīng)屬性的初始值
toValue：keyPath相應(yīng)屬性的結(jié)束值
隨著動畫的進行俄占，在長度為duration的持續(xù)時間內(nèi)管怠，keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue
如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動畫執(zhí)行完畢后缸榄，圖層會保持顯示動畫執(zhí)行后的狀態(tài)渤弛。但在實質(zhì)上，圖層的屬性值還是動畫執(zhí)行前的初始值碰凶，并沒有真正被改變暮芭。
這里詳細講講FillMode這個參數(shù)。
iOS提供的默認kCAFillMode一共有四種
kCAFillModeRemoved 這個是默認值,也就是說當(dāng)動畫開始前和動畫結(jié)束后,動畫對layer都沒有影響,動畫結(jié)束后,layer會恢復(fù)到之前的狀態(tài)
kCAFillModeForwards 當(dāng)動畫結(jié)束后,layer會一直保持著動畫最后的狀態(tài)
kCAFillModeBackwards 這個和kCAFillModeForwards是相對的,就是在動畫開始前,你只要將動畫加入了一個layer,layer便立即進入動畫的初始狀態(tài)并等待動畫開始.你可以這樣設(shè)定測試代碼,將一個動畫加入一個layer的時候延遲5秒執(zhí)行欲低。然后就會發(fā)現(xiàn)在動畫沒有開始的時候,只要動畫被加入了layer,layer便處于動畫初始狀態(tài)辕宏。
kCAFillModeBoth 理解了上面兩個,這個就很好理解了,這個其實就是上面兩個的合成.動畫加入后開始之前,layer便處于動畫初始狀態(tài),動畫結(jié)束后layer保持動畫最后的狀態(tài)。
5示例：平移動畫
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,strong) UIView *redView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.redView];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CABasicAnimation *anima = [CABasicAnimation animation];
// 1砾莱、告訴系統(tǒng)執(zhí)行什么樣式的動畫
anima.keyPath = @"position";
// 2瑞筐、執(zhí)行動畫的起點
anima.fromValue = [NSValue valueWithCGPoint:CGPointZero];
// 3、動畫執(zhí)行的終點
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(150, 450)];
// anima.repeatCount = MAXFLOAT;
// anima.repeatDuration = 10.0;
// 4腊瑟、動畫之行結(jié)束之后不刪除動畫 表示圖層還是保持動畫完成后的狀態(tài)
anima.removedOnCompletion = NO;
// 5聚假、設(shè)置保存動畫的最新狀態(tài)
anima.fillMode = kCAFillModeForwards;
/*如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動畫執(zhí)行完畢后闰非，圖層會保持顯示動畫執(zhí)行后的狀態(tài)膘格。但在實質(zhì)上，圖層的屬性值還是動畫執(zhí)行前的初始值财松，并沒有真正被改變瘪贱。
*/
// 6、添加核心動畫到圖層之上
[self.redView.layer addAnimation:anima forKey:nil];
NSValue *positionValue = [NSValue valueWithCGPoint:self.redView.layer.position];
NSLog(@"動畫執(zhí)行后圖層的位置---%@",positionValue);}
// 懶加載創(chuàng)建一個紅色的view到控制器的視圖上
-(UIView *)redView{
if (_redView == nil) {
_redView = [[UIView alloc]initWithFrame:CGRectMake(50, 0, 50, 50)];
_redView.backgroundColor = [UIColor redColor];
self.redView = _redView;
}
return _redView;
}
@end
執(zhí)行效果與效果
6辆毡、縮放動畫
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,strong) UIView *redView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.redView];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CABasicAnimation *anima = [CABasicAnimation animation];
// 1菜秦、告訴系統(tǒng)執(zhí)行什么樣式的動畫
anima.keyPath = @"bounds"; // 設(shè)置為frame無效
// 3、動畫執(zhí)行的終點
anima.toValue = [NSValue valueWithCGRect:CGRectMake(70, 100, 150, 150)];
// anima.repeatCount = MAXFLOAT;
// anima.repeatDuration = 10.0;
// 4舶掖、動畫之行結(jié)束之后不刪除動畫 表示圖層還是保持動畫完成后的狀態(tài)
anima.removedOnCompletion = NO;
// 5球昨、設(shè)置保存動畫的最新狀態(tài)
anima.fillMode = kCAFillModeForwards;
/*如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動畫執(zhí)行完畢后眨攘，圖層會保持顯示動畫執(zhí)行后的狀態(tài)主慰。但在實質(zhì)上，圖層的屬性值還是動畫執(zhí)行前的初始值期犬，并沒有真正被改變河哑。
*/
// 6、添加核心動畫到圖層之上
[self.redView.layer addAnimation:anima forKey:nil];
}
// 懶加載創(chuàng)建一個紅色的view到控制器的視圖上
-(UIView *)redView{
if (_redView == nil) {
_redView = [[UIView alloc]initWithFrame:CGRectMake(70, 100, 50, 50)];
_redView.backgroundColor = [UIColor redColor];
self.redView = _redView;
}
return _redView;
}
@end
執(zhí)行效果
7龟虎、旋轉(zhuǎn)動畫
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,strong) UIView *redView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.redView];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CABasicAnimation *anima = [CABasicAnimation animation];
// 1璃谨、告訴系統(tǒng)執(zhí)行什么樣式的動畫
anima.keyPath = @"transform";
// 3、動畫執(zhí)行的終點
anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];
// anima.repeatCount = MAXFLOAT;
// anima.repeatDuration = 10.0;
// 4鲤妥、動畫之行結(jié)束之后不刪除動畫 表示圖層還是保持動畫完成后的狀態(tài)
anima.removedOnCompletion = NO;
// 5佳吞、設(shè)置保存動畫的最新狀態(tài)
anima.fillMode = kCAFillModeForwards;
/*如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動畫執(zhí)行完畢后棉安，圖層會保持顯示動畫執(zhí)行后的狀態(tài)底扳。但在實質(zhì)上，圖層的屬性值還是動畫執(zhí)行前的初始值贡耽，并沒有真正被改變衷模。
*/
// 6鹊汛、添加核心動畫到圖層之上
[self.redView.layer addAnimation:anima forKey:nil];
}
// 懶加載創(chuàng)建一個紅色的view到控制器的視圖上
-(UIView *)redView{
if (_redView == nil) {
_redView = [[UIView alloc]initWithFrame:CGRectMake(70, 100, 150, 50)];
_redView.layer.cornerRadius = 15;
_redView.layer.masksToBounds = YES;
_redView.backgroundColor = [UIColor redColor];
self.redView = _redView;
}
return _redView;
}
@end
說明：
CATransform3DMakeRotation(M_PI_4, 0, 0, 1) 中的參數(shù)：第一個參數(shù)表示旋轉(zhuǎn)的角度，第二個參數(shù)表示以y軸和Z軸所在的平面旋轉(zhuǎn)阱冶，第三個參數(shù)表示以X軸和Z軸所在的平面旋轉(zhuǎn)刁憋，第四個參數(shù)表示以X軸和Y軸所在的平面旋轉(zhuǎn)
執(zhí)行效果
8、CAKeyFrameAnimation(關(guān)鍵幀動畫)
關(guān)鍵幀動畫是CApropertyAnimation的子類木蹬，跟CABasicAnimation的區(qū)別是：CABasicAnimation只能從一個數(shù)值(fromValue)變到另一個數(shù)值(toValue)至耻，而CAKeyframeAnimation會使用一個NSArray保存這些數(shù)值
屬性解析：
values：就是上述的NSArray對象。里面的元素稱為”關(guān)鍵幀”(keyframe)镊叁。動畫對象會在指定的時間(duration)內(nèi)尘颓，依次顯示values數(shù)組中的每一個關(guān)鍵幀
path：可以設(shè)置一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用晦譬。如果你設(shè)置了path疤苹，那么values將被忽略
keyTimes：可以為對應(yīng)的關(guān)鍵幀指定對應(yīng)的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應(yīng)values中的每一幀.當(dāng)keyTimes沒有設(shè)置的時候,各個關(guān)鍵幀的時間是平分的
說明：CABasicAnimation可看做是最多只有2個關(guān)鍵幀的CAKeyframeAnimation
關(guān)鍵幀代碼
// ViewController.m
// CAKeyFrameAnimation
// Created by JackChen on 2016/11/3.
// Copyright ? 2016年 JackChen. All rights reserved.
#import "ViewController.h"
@interface ViewController ()<CAAnimationDelegate>
@property (nonatomic,strong) CALayer *redLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view.layer addSublayer:self.redLayer];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animation];
keyFrame.keyPath = @"position";
// 貝澤爾曲線
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 150, 320, 200)];
keyFrame.path = bezierPath.CGPath;
// 設(shè)置動畫執(zhí)行完成之后，動畫不刪除
keyFrame.removedOnCompletion = NO;
// 設(shè)置保存動畫的最新狀態(tài)
keyFrame.fillMode = kCAFillModeForwards;
// 設(shè)置動畫的執(zhí)行時間
keyFrame.duration = 5.0;
// 設(shè)置動畫重復(fù)次數(shù)
keyFrame.repeatDuration = MAXFLOAT;
// 設(shè)置動畫的執(zhí)行節(jié)奏
keyFrame.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// 設(shè)置代理 確定動畫開始/ 結(jié)束
keyFrame.delegate = self;
[self.redLayer addAnimation:keyFrame forKey:nil];
}
-(CALayer *)redLayer{
if (_redLayer ==nil) {
_redLayer = [CALayer layer];
_redLayer.frame = CGRectMake(50, 75, 50, 50);
_redLayer.backgroundColor = [UIColor redColor].CGColor;
self.redLayer = _redLayer ;
}
return _redLayer;
}
-(void)animationDidStart:(CAAnimation *)anim
{
NSLog(@"開始動畫");
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
NSLog(@"結(jié)束動畫");
}
@end
運行效果
關(guān)鍵幀動畫示例
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animation];
// 設(shè)置動畫屬性
keyFrame.keyPath = @"transform.rotation";
// 設(shè)置動畫的關(guān)鍵幀
keyFrame.values = @[@(-M_PI_4/8),@(0),@(M_PI_4/8)];
// 設(shè)置動畫時間
keyFrame.duration = 0.2;
// 設(shè)置動畫重復(fù)次數(shù)
keyFrame.repeatDuration = MAXFLOAT;
// 設(shè)置動畫完成之后不刪除動畫
keyFrame.removedOnCompletion = NO;
// 設(shè)置動畫保持最新狀態(tài)
keyFrame.fillMode = kCAFillModeForwards;
// 添加動畫到圖層之上
[self.iconView.layer addAnimation:keyFrame forKey:nil];
}
@end
代碼執(zhí)行效果
// 添加動畫到圖層之上
[self.iconView.layer addAnimation:keyFrame forKey:@"transform.rotation"];
// 延時3秒后執(zhí)行 刪除動畫的操作
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 這個key用來標(biāo)記動畫 方便刪除動畫效果
[self.iconView.layer removeAnimationForKey:@"transform.rotation"];
});
*** 這里的Key是用來標(biāo)記動畫的敛腌，便于刪除動畫的時候用來區(qū)分***
