iOS核心動畫

簡介

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

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


20150318233521564.png

常用屬性

duration：動畫的持續(xù)時間
repeatCount：動畫的重復(fù)次數(shù)
repeatDuration：動畫的重復(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é)奏
fromValue：keyPath相應(yīng)屬性的初始值
toValue：keyPath相應(yīng)屬性的結(jié)束值
delegate：動畫代理

使用案例

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

subtype過渡方向

NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
分別表示：過渡從右邊、左邊、頂部、底部 開始。

type:動畫過渡效果

 Fade = 1,                   //淡入淡出kCATransitionFade
 Push,                       //推擠kCATransitionPush
 Reveal,                     //將舊視圖移開,顯示下面的新視圖  kCATransitionReveal
 MoveIn,                     //新視圖移到舊視圖上面 kCATransitionMoveIn
 /下面幾個也是過渡效果，但它們是私有API效果，使用的時候要小心，可能會導(dǎo)致app審核不被通過/
 Cube,                       //立方體翻滾效果
 SuckEffect,                 //收縮效果，如一塊布被抽走(不支持過渡方向)
 OglFlip,                    //上下左右翻轉(zhuǎn)效果
 RippleEffect,               //滴水效果(不支持過渡方向)
 PageCurl,                   //向上翻頁效果
 PageUnCurl,                 //向下翻頁效果
 CameraIrisHollowOpen,       //相機鏡頭打開效果(不支持過渡方向)
 CameraIrisHollowClose,      //相機鏡頭關(guān)上效果(不支持過渡方向)
 CurlDown,                   //下翻頁
 CurlUp,                     //上翻頁
 FlipFromLeft,               //左翻轉(zhuǎn)
 FlipFromRight,              //右翻轉(zhuǎn)
  • CABasicAnimation
//1.縮放動畫
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.5;//時長
animation.fromValue = @1; //初始值
animation.toValue = @1.5;//結(jié)束值
//默認為YES，代表動畫執(zhí)行完畢后就從圖層上移除，圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過還要設(shè)置fillMode為kCAFillModeForwards
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.autoreverses = YES; //縮小以后自動恢復(fù)
[self.imageView.layer addAnimation:animation forKey:nil];


 //2.旋轉(zhuǎn)動畫
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)鍵幀動畫
 //1.左右擺動效果
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];
CGFloat currentTx = self.label.transform.tx;
animation.duration = 0.5;
//關(guān)鍵幀數(shù)組對象，里面每一個元素即為一個關(guān)鍵幀，動畫會在對應(yīng)的時間段內(nèi)，依次執(zhí)行數(shù)組中每一個關(guān)鍵幀的動畫
animation.values = @[@(currentTx),@(currentTx+10),@(currentTx-8),@(currentTx+8),@(currentTx-5),@(currentTx+5),@(currentTx)];
//設(shè)置關(guān)鍵幀對應(yīng)的時間點
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.上下擺動類似刪除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彈簧動畫iOS9以后引入
CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position.x"];
//質(zhì)量，影響圖層運動時的彈簧慣性，質(zhì)量越大，彈簧拉伸和壓縮的幅度越大
springAnimation.mass = 1;
//剛度系數(shù)(勁度系數(shù)/彈性系數(shù))，剛度系數(shù)越大，形變產(chǎn)生的力就越大，運動越快
springAnimation.stiffness = 100;
//初始速率，動畫視圖的初始速度大小 ,速率為正數(shù)時，速度方向與運動方向一致，速率為負數(shù)時，速度方向與運動方向相反
springAnimation.initialVelocity = 50;
//阻尼系數(shù)，阻止彈簧伸縮的系數(shù)，阻尼系數(shù)越大，停止越快
springAnimation.damping = 5;
//結(jié)算時間 返回彈簧動畫到停止時的估算時間，根據(jù)當(dāng)前的動畫參數(shù)估算 通常彈簧動畫的時間使用結(jié)算時間比較準(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];

組合動畫實現(xiàn)類似淘寶加入購物車動畫效果

 //1.創(chuàng)建layer會話
self.layer = [CALayer layer];
//在layer的圖層上添加一個image，contents表示接受內(nèi)容 或者指定一個圖片=(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)建移動路徑
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:self.imageView.layer.position]; //起始點
[path addQuadCurveToPoint:self.btn.layer.position controlPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, self.imageView.frame.origin.y-80)];//終止點和方向

//3.創(chuàng)建關(guān)鍵幀動畫
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyAnimation.path = path.CGPath;

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

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

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


#pragma mark - 動畫協(xié)議
- (void)animationDidStart:(CAAnimation *)anim{

  NSLog(@"開始執(zhí)行動畫");

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

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

  • 一、關(guān)于核心動畫的介紹 1、核心動畫作用于layer層， layer有兩個屬性Position和achroPoin...
    GPUImage閱讀 385評論 0贊 0
  • 上一章介紹了隱式動畫的概念。隱式動畫是在iOS平臺創(chuàng)建動態(tài)用戶界面的一種直接方式，也是UIKit動畫機制的基礎(chǔ)，不...
    努力奔跑的小男孩閱讀 1,135評論 0贊 1
  • 1.基本概念 核心動畫作用在CALayer（Core animation layer）上，CALayer從概念上類...
    iOS學(xué)末閱讀 1,432評論 1贊 7
  • Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API，無論在iOS系統(tǒng)或者在你開發(fā)的App...
    hello_kity閱讀 301評論 0贊 1
  • 今日神評論， 自己帶節(jié)奏。 一雙淚目， 兩行涕流， 三孔噴火， 四體不勤， 五心煩熱， 六不起來， 七竅不舒， 八...
    Marseille重啟ing閱讀 274評論 0贊 0

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