iOS核心動(dòng)畫

簡(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];
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末抚笔,一起剝皮案震驚了整個(gè)濱河市扶认,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌殊橙,老刑警劉巖辐宾,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狱从,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡叠纹,警方通過查閱死者的電腦和手機(jī)矫夯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吊洼,“玉大人,你說我怎么就攤上這事制肮∶扒希” “怎么了?”我有些...
    開封第一講書人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵豺鼻,是天一觀的道長(zhǎng)综液。 經(jīng)常有香客問我,道長(zhǎng)儒飒,這世上最難降的妖魔是什么谬莹? 我笑而不...
    開封第一講書人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮桩了,結(jié)果婚禮上附帽,老公的妹妹穿的比我還像新娘。我一直安慰自己井誉,他們只是感情好蕉扮,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颗圣,像睡著了一般喳钟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上在岂,一...
    開封第一講書人閱讀 52,475評(píng)論 1 312
  • 那天奔则,我揣著相機(jī)與錄音,去河邊找鬼蔽午。 笑死易茬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的祠丝。 我是一名探鬼主播疾呻,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼写半!你這毒婦竟也來了岸蜗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤叠蝇,失蹤者是張志新(化名)和其女友劉穎璃岳,沒想到半個(gè)月后年缎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡铃慷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年单芜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片犁柜。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡洲鸠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出馋缅,到底是詐尸還是另有隱情扒腕,我是刑警寧澤,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布萤悴,位于F島的核電站瘾腰,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏覆履。R本人自食惡果不足惜蹋盆,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望硝全。 院中可真熱鬧栖雾,春花似錦、人聲如沸柳沙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)赂鲤。三九已至噪径,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間数初,已是汗流浹背找爱。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留泡孩,地道東北人车摄。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像仑鸥,于是被迫代替她去往敵國(guó)和親吮播。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一眼俊、關(guān)于核心動(dòng)畫的介紹 1意狠、核心動(dòng)畫作用于layer層, layer有兩個(gè)屬性Position和achroPoin...
    GPUImage閱讀 315評(píng)論 0 0
  • 上一章介紹了隱式動(dòng)畫的概念疮胖。隱式動(dòng)畫是在iOS平臺(tái)創(chuàng)建動(dòng)態(tài)用戶界面的一種直接方式环戈,也是UIKit動(dòng)畫機(jī)制的基礎(chǔ)闷板,不...
    努力奔跑的小男孩閱讀 1,056評(píng)論 0 1
  • 1.基本概念 核心動(dòng)畫作用在CALayer(Core animation layer)上,CALayer從概念上類...
    iOS學(xué)末閱讀 1,357評(píng)論 1 7
  • Core Animation(核心動(dòng)畫)是一組功能強(qiáng)大院塞、效果華麗的動(dòng)畫API遮晚,無(wú)論在iOS系統(tǒng)或者在你開發(fā)的App...
    hello_kity閱讀 274評(píng)論 0 1
  • 今日神評(píng)論, 自己帶節(jié)奏拦止。 一雙淚目县遣, 兩行涕流, 三孔噴火汹族, 四體不勤艺玲, 五心煩熱, 六不起來鞠抑, 七竅不舒, 八...
    Marseille重啟ing閱讀 249評(píng)論 0 0