簡(jiǎn)介
Core Animation(核心動(dòng)畫)是一組非常強(qiáng)大的動(dòng)畫處理API茵汰,使用它能做出非常炫麗的動(dòng)畫效果。也就是說缘滥,使用少量的代碼就可以實(shí)現(xiàn)非常強(qiáng)大的功能泛烙。
Core Animation可以用在Mac OS X和iOS平臺(tái)坤检。
Core Animation的動(dòng)畫執(zhí)行過程都是在后臺(tái)操作的,不會(huì)阻塞主線程。
CAAnimation的繼承結(jié)構(gòu)
20150318233521564.png
常用屬性
duration:動(dòng)畫的持續(xù)時(shí)間
repeatCount:動(dòng)畫的重復(fù)次數(shù)
repeatDuration:動(dòng)畫的重復(fù)時(shí)間
removedOnCompletion:默認(rèn)為YES瓶殃,代表動(dòng)畫執(zhí)行完畢后就從圖層上移除,圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)副签。如果想讓圖層保持顯示動(dòng)畫執(zhí)行后的狀態(tài)遥椿,那就設(shè)置為NO,不過還要設(shè)置fillMode為kCAFillModeForwards
fillMode:決定當(dāng)前對(duì)象在非active時(shí)間段的行為.比如動(dòng)畫開始之前,動(dòng)畫結(jié)束之后
beginTime:可以用來設(shè)置動(dòng)畫延遲執(zhí)行時(shí)間淆储,若想延遲2s冠场,就設(shè)置為CACurrentMediaTime()+2,CACurrentMediaTime()為圖層的當(dāng)前時(shí)間
timingFunction:速度控制函數(shù)本砰,控制動(dòng)畫運(yùn)行的節(jié)奏
fromValue:keyPath相應(yīng)屬性的初始值
toValue:keyPath相應(yīng)屬性的結(jié)束值
delegate:動(dòng)畫代理
使用案例
- CATransition轉(zhuǎn)場(chǎng)動(dòng)畫
//創(chuàng)建核心動(dòng)畫
CATransition *ca=[CATransition animation];
//告訴要執(zhí)行什么動(dòng)畫
//設(shè)置過渡效果
ca.type=@"push";
//設(shè)置動(dòng)畫的過渡方向(向左)
ca.subtype=kCATransitionFromLeft;
//設(shè)置動(dòng)畫的時(shí)間
ca.duration=2.0;
//添加動(dòng)畫
[self.label.layer addAnimation:ca forKey:nil];
subtype過渡方向
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
分別表示:過渡從右邊碴裙、左邊、頂部、底部 開始舔株。
type:動(dòng)畫過渡效果
Fade = 1, //淡入淡出kCATransitionFade
Push, //推擠kCATransitionPush
Reveal, //將舊視圖移開,顯示下面的新視圖 kCATransitionReveal
MoveIn, //新視圖移到舊視圖上面 kCATransitionMoveIn
/下面幾個(gè)也是過渡效果莺琳,但它們是私有API效果,使用的時(shí)候要小心载慈,可能會(huì)導(dǎo)致app審核不被通過/
Cube, //立方體翻滾效果
SuckEffect, //收縮效果惭等,如一塊布被抽走(不支持過渡方向)
OglFlip, //上下左右翻轉(zhuǎn)效果
RippleEffect, //滴水效果(不支持過渡方向)
PageCurl, //向上翻頁(yè)效果
PageUnCurl, //向下翻頁(yè)效果
CameraIrisHollowOpen, //相機(jī)鏡頭打開效果(不支持過渡方向)
CameraIrisHollowClose, //相機(jī)鏡頭關(guān)上效果(不支持過渡方向)
CurlDown, //下翻頁(yè)
CurlUp, //上翻頁(yè)
FlipFromLeft, //左翻轉(zhuǎn)
FlipFromRight, //右翻轉(zhuǎn)
- CABasicAnimation
//1.縮放動(dòng)畫
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.5;//時(shí)長(zhǎng)
animation.fromValue = @1; //初始值
animation.toValue = @1.5;//結(jié)束值
//默認(rèn)為YES,代表動(dòng)畫執(zhí)行完畢后就從圖層上移除办铡,圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)辞做。如果想讓圖層保持顯示動(dòng)畫執(zhí)行后的狀態(tài),那就設(shè)置為NO寡具,不過還要設(shè)置fillMode為kCAFillModeForwards
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.autoreverses = YES; //縮小以后自動(dòng)恢復(fù)
[self.imageView.layer addAnimation:animation forKey:nil];
//2.旋轉(zhuǎn)動(dòng)畫
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
basicAnimation.repeatCount = NSIntegerMax;
basicAnimation.duration = 40;
basicAnimation.fromValue = @(0);
basicAnimation.toValue = @(M_PI * 2);
[self.imageView.layer addAnimation:basicAnimation forKey:nil]
- CAKeyframeAnimation關(guān)鍵幀動(dòng)畫
//1.左右擺動(dòng)效果
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];
CGFloat currentTx = self.label.transform.tx;
animation.duration = 0.5;
//關(guān)鍵幀數(shù)組對(duì)象秤茅,里面每一個(gè)元素即為一個(gè)關(guān)鍵幀,動(dòng)畫會(huì)在對(duì)應(yīng)的時(shí)間段內(nèi)晒杈,依次執(zhí)行數(shù)組中每一個(gè)關(guān)鍵幀的動(dòng)畫
animation.values = @[@(currentTx),@(currentTx+10),@(currentTx-8),@(currentTx+8),@(currentTx-5),@(currentTx+5),@(currentTx)];
//設(shè)置關(guān)鍵幀對(duì)應(yīng)的時(shí)間點(diǎn)
animation.keyTimes = @[ @(0), @(0.225), @(0.425), @(0.6), @(0.75), @(0.875), @(1) ];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.label.layer addAnimation:animation forKey:nil];
//2.上下擺動(dòng)類似刪除App效果
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
keyAnimation.values = @[@(-M_PI_4/4), @(M_PI_4/4), @(-M_PI_4/4)];
keyAnimation.repeatCount = 2;
[self.label.layer addAnimation:keyAnimation forKey:nil];
- CASpringAnimation彈簧動(dòng)畫iOS9以后引入
CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position.x"];
//質(zhì)量嫂伞,影響圖層運(yùn)動(dòng)時(shí)的彈簧慣性,質(zhì)量越大拯钻,彈簧拉伸和壓縮的幅度越大
springAnimation.mass = 1;
//剛度系數(shù)(勁度系數(shù)/彈性系數(shù))帖努,剛度系數(shù)越大,形變產(chǎn)生的力就越大粪般,運(yùn)動(dòng)越快
springAnimation.stiffness = 100;
//初始速率拼余,動(dòng)畫視圖的初始速度大小 ,速率為正數(shù)時(shí),速度方向與運(yùn)動(dòng)方向一致亩歹,速率為負(fù)數(shù)時(shí)匙监,速度方向與運(yùn)動(dòng)方向相反
springAnimation.initialVelocity = 50;
//阻尼系數(shù),阻止彈簧伸縮的系數(shù)小作,阻尼系數(shù)越大亭姥,停止越快
springAnimation.damping = 5;
//結(jié)算時(shí)間 返回彈簧動(dòng)畫到停止時(shí)的估算時(shí)間,根據(jù)當(dāng)前的動(dòng)畫參數(shù)估算 通常彈簧動(dòng)畫的時(shí)間使用結(jié)算時(shí)間比較準(zhǔn)確
springAnimation.duration = springAnimation.settlingDuration;
springAnimation.fromValue = @(self.label.layer.position.x);
springAnimation.toValue = @(self.label.layer.position.x+50);
[self.label.layer addAnimation:springAnimation forKey:nil];
組合動(dòng)畫實(shí)現(xiàn)類似淘寶加入購(gòu)物車動(dòng)畫效果
//1.創(chuàng)建layer會(huì)話
self.layer = [CALayer layer];
//在layer的圖層上添加一個(gè)image顾稀,contents表示接受內(nèi)容 或者指定一個(gè)圖片=(id)[UIImage imageNamed:@"me"].CGImage;
self.layer.contents = self.imageView.layer.contents;
self.layer.contentsGravity = kCAGravityResizeAspectFill;//拉伸 和cotentMode一樣
self.layer.bounds = self.imageView.frame;//重置圖片的bounds
self.layer.masksToBounds = YES;//切圓角
self.layer.cornerRadius = self.imageView.frame.size.width/2;
[self.view.window.layer addSublayer:self.layer];
//2.創(chuàng)建移動(dòng)路徑
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:self.imageView.layer.position]; //起始點(diǎn)
[path addQuadCurveToPoint:self.btn.layer.position controlPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, self.imageView.frame.origin.y-80)];//終止點(diǎn)和方向
//3.創(chuàng)建關(guān)鍵幀動(dòng)畫
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyAnimation.path = path.CGPath;
//4.創(chuàng)建旋轉(zhuǎn)動(dòng)畫
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
basicAnimation.fromValue = [NSNumber numberWithFloat:0];
basicAnimation.toValue = [NSNumber numberWithFloat:12];
basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//控制動(dòng)畫運(yùn)行的節(jié)奏
//5.創(chuàng)建動(dòng)畫組
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.duration = 1.2f;
groups.animations = @[keyAnimation,basicAnimation];
groups.delegate = self;
//默認(rèn)為YES达罗,代表動(dòng)畫執(zhí)行完畢后就從圖層上移除,圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)静秆。如果想讓圖層保持顯示動(dòng)畫執(zhí)行后的狀態(tài)粮揉,那就設(shè)置為NO,不過還要設(shè)置fillMode為kCAFillModeForwards
groups.removedOnCompletion = NO;
groups.fillMode = kCAFillModeForwards;
[self.layer addAnimation:groups forKey:@"group"];
#pragma mark - 動(dòng)畫協(xié)議
- (void)animationDidStart:(CAAnimation *)anim{
NSLog(@"開始執(zhí)行動(dòng)畫");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
animation.duration = 0.5f;
animation.fromValue = [NSNumber numberWithFloat:-5];
animation.toValue = [NSNumber numberWithFloat:5];
animation.autoreverses = YES;
[self.btn.layer addAnimation:animation forKey:nil];
}