iOS核心動(dòng)畫(huà)

簡(jiǎn)介

Core Animation(核心動(dòng)畫(huà))是一組非常強(qiáng)大的動(dòng)畫(huà)處理API，使用它能做出非常炫麗的動(dòng)畫(huà)效果。也就是說(shuō)，使用少量的代碼就可以實(shí)現(xiàn)非常強(qiáng)大的功能。
Core Animation可以用在Mac OS X和iOS平臺(tái)。
Core Animation的動(dòng)畫(huà)執(zhí)行過(guò)程都是在后臺(tái)操作的，不會(huì)阻塞主線(xiàn)程。

CAAnimation的繼承結(jié)構(gòu)


20150318233521564.png

常用屬性

duration：動(dòng)畫(huà)的持續(xù)時(shí)間
repeatCount：動(dòng)畫(huà)的重復(fù)次數(shù)
repeatDuration：動(dòng)畫(huà)的重復(fù)時(shí)間
removedOnCompletion：默認(rèn)為YES，代表動(dòng)畫(huà)執(zhí)行完畢后就從圖層上移除，圖形會(huì)恢復(fù)到動(dòng)畫(huà)執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動(dòng)畫(huà)執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過(guò)還要設(shè)置fillMode為kCAFillModeForwards
fillMode：決定當(dāng)前對(duì)象在非active時(shí)間段的行為.比如動(dòng)畫(huà)開(kāi)始之前,動(dòng)畫(huà)結(jié)束之后
beginTime：可以用來(lái)設(shè)置動(dòng)畫(huà)延遲執(zhí)行時(shí)間，若想延遲2s，就設(shè)置為CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當(dāng)前時(shí)間
timingFunction：速度控制函數(shù)，控制動(dòng)畫(huà)運(yùn)行的節(jié)奏
fromValue：keyPath相應(yīng)屬性的初始值
toValue：keyPath相應(yīng)屬性的結(jié)束值
delegate：動(dòng)畫(huà)代理

使用案例

  • CATransition轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
 //創(chuàng)建核心動(dòng)畫(huà)
 CATransition *ca=[CATransition animation];
 //告訴要執(zhí)行什么動(dòng)畫(huà)
 //設(shè)置過(guò)渡效果
 ca.type=@"push";
//設(shè)置動(dòng)畫(huà)的過(guò)渡方向（向左）
ca.subtype=kCATransitionFromLeft;
//設(shè)置動(dòng)畫(huà)的時(shí)間
ca.duration=2.0;
//添加動(dòng)畫(huà)
[self.label.layer addAnimation:ca forKey:nil];

subtype過(guò)渡方向

NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
分別表示：過(guò)渡從右邊、左邊、頂部、底部 開(kāi)始。

type:動(dòng)畫(huà)過(guò)渡效果

 Fade = 1,                   //淡入淡出kCATransitionFade
 Push,                       //推擠kCATransitionPush
 Reveal,                     //將舊視圖移開(kāi),顯示下面的新視圖  kCATransitionReveal
 MoveIn,                     //新視圖移到舊視圖上面 kCATransitionMoveIn
 /下面幾個(gè)也是過(guò)渡效果，但它們是私有API效果，使用的時(shí)候要小心，可能會(huì)導(dǎo)致app審核不被通過(guò)/
 Cube,                       //立方體翻滾效果
 SuckEffect,                 //收縮效果，如一塊布被抽走(不支持過(guò)渡方向)
 OglFlip,                    //上下左右翻轉(zhuǎn)效果
 RippleEffect,               //滴水效果(不支持過(guò)渡方向)
 PageCurl,                   //向上翻頁(yè)效果
 PageUnCurl,                 //向下翻頁(yè)效果
 CameraIrisHollowOpen,       //相機(jī)鏡頭打開(kāi)效果(不支持過(guò)渡方向)
 CameraIrisHollowClose,      //相機(jī)鏡頭關(guān)上效果(不支持過(guò)渡方向)
 CurlDown,                   //下翻頁(yè)
 CurlUp,                     //上翻頁(yè)
 FlipFromLeft,               //左翻轉(zhuǎn)
 FlipFromRight,              //右翻轉(zhuǎn)
  • CABasicAnimation
//1.縮放動(dòng)畫(huà)
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)畫(huà)執(zhí)行完畢后就從圖層上移除，圖形會(huì)恢復(fù)到動(dòng)畫(huà)執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動(dòng)畫(huà)執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過(guò)還要設(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)畫(huà)
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)畫(huà)
 //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à)會(huì)在對(duì)應(yīng)的時(shí)間段內(nèi)，依次執(zhí)行數(shù)組中每一個(gè)關(guān)鍵幀的動(dòng)畫(huà)
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)類(lèi)似刪除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)畫(huà)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)畫(huà)視圖的初始速度大小 ,速率為正數(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)畫(huà)到停止時(shí)的估算時(shí)間，根據(jù)當(dāng)前的動(dòng)畫(huà)參數(shù)估算 通常彈簧動(dòng)畫(huà)的時(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)畫(huà)實(shí)現(xiàn)類(lèi)似淘寶加入購(gòu)物車(chē)動(dòng)畫(huà)效果

 //1.創(chuàng)建layer會(huì)話(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)畫(huà)
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyAnimation.path = path.CGPath;

//4.創(chuàng)建旋轉(zhuǎn)動(dòng)畫(huà)
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
basicAnimation.fromValue = [NSNumber numberWithFloat:0];
basicAnimation.toValue = [NSNumber numberWithFloat:12];
basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//控制動(dòng)畫(huà)運(yùn)行的節(jié)奏

//5.創(chuàng)建動(dòng)畫(huà)組
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.duration = 1.2f;
groups.animations = @[keyAnimation,basicAnimation];
groups.delegate = self;
//默認(rèn)為YES，代表動(dòng)畫(huà)執(zhí)行完畢后就從圖層上移除，圖形會(huì)恢復(fù)到動(dòng)畫(huà)執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動(dòng)畫(huà)執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過(guò)還要設(shè)置fillMode為kCAFillModeForwards
groups.removedOnCompletion = NO;
groups.fillMode = kCAFillModeForwards;

[self.layer addAnimation:groups forKey:@"group"];


#pragma mark - 動(dòng)畫(huà)協(xié)議
- (void)animationDidStart:(CAAnimation *)anim{

  NSLog(@"開(kāi)始執(zhí)行動(dòng)畫(huà)");

}
- (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];
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容