iOS基礎(chǔ) - 核心動(dòng)畫(轉(zhuǎn))

iOS基礎(chǔ) - 核心動(dòng)畫

一、核心動(dòng)畫

l?核心動(dòng)畫基本概念

l?基本動(dòng)畫

l?關(guān)鍵幀動(dòng)畫

l?動(dòng)畫組

l?轉(zhuǎn)場(chǎng)動(dòng)畫

l?Core?Animation是一組非常強(qiáng)大的動(dòng)畫處理API,使用它能做出非常炫麗的動(dòng)畫效果,而且往往是事半功倍!

l?使用它需要先添加QuartzCore.framework和引入對(duì)應(yīng)的框架

l?開發(fā)步驟:

初始化一個(gè)動(dòng)畫對(duì)象(CAAnimation)并設(shè)置一些動(dòng)畫相關(guān)屬性

CALayer中很多屬性都可以通過CAAnimation實(shí)現(xiàn)動(dòng)畫效果,包括:opacity、position、transform、bounds、contents等(可以在API文檔中搜索:CALayer?Animatable?Properties)

添加動(dòng)畫對(duì)象到層(CALayer)中,開始執(zhí)行動(dòng)畫

通過調(diào)用CALayer的addAnimation:forKey增加動(dòng)畫到層(CALayer)中,這樣就能觸發(fā)動(dòng)畫了。通過調(diào)用removeAnimationForKey可以停止層中的動(dòng)畫

Core?Animation的動(dòng)畫執(zhí)行過程都是在后臺(tái)操作的,不會(huì)阻塞主線程

二、CAAnimation——簡(jiǎn)介

l?是所有動(dòng)畫對(duì)象的父類,負(fù)責(zé)控制動(dòng)畫的持續(xù)時(shí)間和速度,是個(gè)抽象類,不能直接使用,應(yīng)該使用它具體的子類

l?屬性說明:(紅色代表來自CAMediaTiming協(xié)議的屬性)

-?duration:動(dòng)畫的持續(xù)時(shí)間

-?repeatCount:重復(fù)次數(shù),無限循環(huán)可以設(shè)置HUGE_VALF或者M(jìn)AXFLOAT

-?repeatDuration:重復(fù)時(shí)間

-?removedOnCompletion:默認(rèn)為YES,代表動(dòng)畫執(zhí)行完畢后就從圖層上移除,圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動(dòng)畫執(zhí)行后的狀態(tài),那就設(shè)置為NO,同時(shí)還要設(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é)奏

-?delegate:動(dòng)畫代理

三、CAAnimation——?jiǎng)赢嬏畛淠J?/p>

l?fillMode屬性值(要想fillMode有效,最好設(shè)置removedOnCompletion?=?NO)

l?kCAFillModeRemoved這個(gè)是默認(rèn)值,也就是說當(dāng)動(dòng)畫開始前和動(dòng)畫結(jié)束后,動(dòng)畫對(duì)layer都沒有影響,動(dòng)畫結(jié)束后,layer會(huì)恢復(fù)到之前的狀態(tài)

l?kCAFillModeForwards當(dāng)動(dòng)畫結(jié)束后,layer會(huì)一直保持著動(dòng)畫最后的狀態(tài)?

l?kCAFillModeBackwards在動(dòng)畫開始前,只需要將動(dòng)畫加入了一個(gè)layer,layer便立即進(jìn)入動(dòng)畫的初始狀態(tài)并等待動(dòng)畫開始。

l?kCAFillModeBoth這個(gè)其實(shí)就是上面兩個(gè)的合成,動(dòng)畫加入之后在開始之前,layer便處于動(dòng)畫初始狀態(tài),動(dòng)畫結(jié)束后layer保持動(dòng)畫最后的狀態(tài)

四、CAAnimation——速度控制函數(shù)

l?速度控制函數(shù)(CAMediaTimingFunction)?

kCAMediaTimingFunctionLinear(線性):勻速

kCAMediaTimingFunctionEaseIn(漸進(jìn)):動(dòng)畫緩慢進(jìn)入,然后加速離開

kCAMediaTimingFunctionEaseOut(漸出):動(dòng)畫全速進(jìn)入,然后減速的到達(dá)目的地

kCAMediaTimingFunctionEaseInEaseOut(漸進(jìn)漸出):動(dòng)畫緩慢的進(jìn)入,中間加速,然后減速的到達(dá)目的地。這個(gè)是默認(rèn)的動(dòng)畫行為。

五、CAAnimation——?jiǎng)赢嫶矸椒?/p>

CAAnimation在分類中定義了代理方法

@interface?NSObject?(CAAnimationDelegate)

/*?Called?when?the?animation?begins?its?active?duration.?*/

-?(void)animationDidStart:(CAAnimation?*)anim;

/*?Called?when?the?animation?either?completes?its?active?duration?or

?*?is?removed?from?the?object?it?is?attached?to?(i.e.?the?layer).?'flag'

?*?is?true?if?the?animation?reached?the?end?of?its?active?duration

?*?without?being?removed.?*/

-?(void)animationDidStop:(CAAnimation?*)anim?finished:(BOOL)flag;

@end

六、CALayer上動(dòng)畫的暫停和恢復(fù)

#pragma?mark暫停CALayer的動(dòng)畫

-(void)pauseLayer:(CALayer*)layer

{

????CFTimeInterval?pausedTime?=?[layer?convertTime:CACurrentMediaTime()?fromLayer:nil];

//讓CALayer的時(shí)間停止走動(dòng)

??????layer.speed?=?0.0;

//讓CALayer的時(shí)間停留在pausedTime這個(gè)時(shí)刻

????layer.timeOffset?=?pausedTime;

}

#pragma?mark恢復(fù)CALayer的動(dòng)畫

-(void)resumeLayer:(CALayer*)layer

{

????CFTimeInterval?pausedTime?=?layer.timeOffset;

//?1.讓CALayer的時(shí)間繼續(xù)行走

??????layer.speed?=?1.0;

//?2.取消上次記錄的停留時(shí)刻

??????layer.timeOffset?=?0.0;

//?3.取消上次設(shè)置的時(shí)間

??????layer.beginTime?=?0.0;

//?4.計(jì)算暫停的時(shí)間(這里也可以用CACurrentMediaTime()-pausedTime)

????CFTimeInterval?timeSincePause?=?[layer?convertTime:CACurrentMediaTime()?fromLayer:nil]?-?pausedTime;

//?5.設(shè)置相對(duì)于父坐標(biāo)系的開始時(shí)間(往后退timeSincePause)

??????layer.beginTime?=?timeSincePause;

}

七、CAPropertyAnimation

l?是CAAnimation的子類,也是個(gè)抽象類,要想創(chuàng)建動(dòng)畫對(duì)象,應(yīng)該使用它的兩個(gè)子類:

-?CABasicAnimation

-?CAKeyframeAnimation

l?屬性說明:

-?keyPath:通過指定CALayer的一個(gè)屬性名稱為keyPath(NSString類型),并且對(duì)CALayer的這個(gè)屬性的值進(jìn)行修改,達(dá)到相應(yīng)的動(dòng)畫效果。比如,指定@“position”為keyPath,就修改CALayer的position屬性的值,以達(dá)到平移的動(dòng)畫效果

八、CABasicAnimation——基本動(dòng)畫

l?基本動(dòng)畫,是CAPropertyAnimation的子類

l?屬性說明:

-?fromValue:keyPath屬性的初始值

-?toValue:keyPath屬性的結(jié)束值

-?byValue:keyPath屬性的變化值(使用較少)

l?動(dòng)畫過程說明:

-?隨著動(dòng)畫的進(jìn)行,在長(zhǎng)度為duration的持續(xù)時(shí)間內(nèi),keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue

-?keyPath內(nèi)容是CALayer的可動(dòng)畫Animatable屬性

-?如果fillMode=kCAFillModeForwards同時(shí)removedOnComletion=NO,那么在動(dòng)畫執(zhí)行完畢后,圖層會(huì)保持顯示動(dòng)畫執(zhí)行后的狀態(tài)。但在實(shí)質(zhì)上,圖層的屬性值還是動(dòng)畫執(zhí)行前的初始值,并沒有真正被改變。

九、CAKeyframeAnimation——關(guān)鍵幀動(dòng)畫

l?關(guān)鍵幀動(dòng)畫,也是CAPropertyAnimation的子類,與CABasicAnimation的區(qū)別是:

-?CABasicAnimation只能從一個(gè)數(shù)值(fromValue)變到另一個(gè)數(shù)值(toValue),而CAKeyframeAnimation會(huì)使用一個(gè)NSArray保存這些數(shù)值

l?屬性說明:

-?values:上述的NSArray對(duì)象。里面的元素稱為“關(guān)鍵幀”(keyframe)。動(dòng)畫對(duì)象會(huì)在指定的時(shí)間(duration)內(nèi),依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀

-?path:可以設(shè)置一個(gè)CGPathRef、CGMutablePathRef,讓圖層按照路徑軌跡移動(dòng)。path只對(duì)CALayer的anchorPoint和position起作用。如果設(shè)置了path,那么values將被忽略

-?keyTimes:可以為對(duì)應(yīng)的關(guān)鍵幀指定對(duì)應(yīng)的時(shí)間點(diǎn),其取值范圍為0到1.0,keyTimes中的每一個(gè)時(shí)間值都對(duì)應(yīng)values中的每一幀。如果沒有設(shè)置keyTimes,各個(gè)關(guān)鍵幀的時(shí)間是平分的

l?CABasicAnimation可看做是只有2個(gè)關(guān)鍵幀的CAKeyframeAnimation

十、CAKeyframeAnimation——計(jì)算模式屬性

l?在關(guān)鍵幀動(dòng)畫中還有一個(gè)非常重要的參數(shù),那便是calculationMode,所謂計(jì)算模式:其主要針對(duì)的是每一幀的內(nèi)容為一個(gè)座標(biāo)點(diǎn)的情況,也就是對(duì)anchorPoint和?position進(jìn)行的動(dòng)畫

l?當(dāng)在平面座標(biāo)系中有多個(gè)離散的點(diǎn)的時(shí)候,可以是離散的,也可以直線相連后進(jìn)行插值計(jì)算,也可以使用圓滑的曲線將他們相連后進(jìn)行插值計(jì)算

l?calculationMode目前提供如下幾種模式:

-?kCAAnimationLinear默認(rèn)值,表示當(dāng)關(guān)鍵幀為座標(biāo)點(diǎn)的時(shí)候,關(guān)鍵幀之間直接直線相連進(jìn)行插值計(jì)算?

-?kCAAnimationDiscrete離散的,不進(jìn)行插值計(jì)算,所有關(guān)鍵幀直接逐個(gè)進(jìn)行顯示

-?kCAAnimationPaced使得動(dòng)畫均勻進(jìn)行,而不是按keyTimes設(shè)置的或者按關(guān)鍵幀平分時(shí)間,此時(shí)keyTimes和timingFunctions無效

-?kCAAnimationCubic對(duì)關(guān)鍵幀為座標(biāo)點(diǎn)的關(guān)鍵幀進(jìn)行圓滑曲線相連后插值計(jì)算,這里的主要目的是使得運(yùn)行的軌跡變得圓滑

-?kCAAnimationCubicPaced看這個(gè)名字就知道和kCAAnimationCubic有一定聯(lián)系,其實(shí)就是在kCAAnimationCubic的基礎(chǔ)上使得動(dòng)畫運(yùn)行變得均勻,就是系統(tǒng)時(shí)間內(nèi)運(yùn)動(dòng)的距離相同,此時(shí)keyTimes以及timingFunctions也是無效的

l?注意:就目前而言,此屬性研究的意義不大,知道有這么一個(gè)屬性即可,只有再做復(fù)雜動(dòng)畫,同時(shí)動(dòng)畫效果不夠理想的時(shí)候,才需要考慮使用這一屬性

十一、CAAnimationGroup——?jiǎng)赢嫿M

l?動(dòng)畫組,是CAAnimation的子類,可以保存一組動(dòng)畫對(duì)象,將CAAnimationGroup對(duì)象加入層后,組中所有動(dòng)畫對(duì)象可以同時(shí)并發(fā)運(yùn)行

l?屬性說明:

-?animations:用來保存一組動(dòng)畫對(duì)象的NSArray

-?默認(rèn)情況下,一組動(dòng)畫對(duì)象是同時(shí)運(yùn)行的,也可以通過設(shè)置動(dòng)畫對(duì)象的beginTime屬性來更改動(dòng)畫的開始時(shí)間

十二、CATransition——轉(zhuǎn)場(chǎng)動(dòng)畫

l?CATransition是CAAnimation的子類,用于做轉(zhuǎn)場(chǎng)動(dòng)畫,能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果。iOS比Mac?OS?X的轉(zhuǎn)場(chǎng)動(dòng)畫效果少一點(diǎn)

l?UINavigationController就是通過CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫效果

l?動(dòng)畫屬性:

-?type:動(dòng)畫過渡類型

-?subtype:動(dòng)畫過渡方向

-?startProgress:動(dòng)畫起點(diǎn)(在整體動(dòng)畫的百分比)

-?endProgress:動(dòng)畫終點(diǎn)(在整體動(dòng)畫的百分比)

十三、使用UIView動(dòng)畫函數(shù)實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫——單視圖

l?+?(void)transitionWithView:(UIView?*)view?duration:(NSTimeInterval)duration?options:(UIViewAnimationOptions)options?animations:(void?(^)(void))animations?completion:(void?(^)(BOOL?finished))completion;

l?參數(shù)說明:

-?duration:動(dòng)畫的持續(xù)時(shí)間

-?view:需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫的視圖

-?options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型

-?animations:將改變視圖屬性的代碼放在這個(gè)block中

-?completion:動(dòng)畫結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block

十四、使用UIView動(dòng)畫函數(shù)實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫——雙視圖

l?+?(void)transitionFromView:(UIView?*)fromView?toView:(UIView?*)toView?duration:(NSTimeInterval)duration?options:(UIViewAnimationOptions)options?completion:(void?(^)(BOOL?finished))completion;

l?參數(shù)說明:

-?duration:動(dòng)畫的持續(xù)時(shí)間

-?options:轉(zhuǎn)場(chǎng)動(dòng)畫的類型

-?animations:將改變視圖屬性的代碼放在這個(gè)block中

-?completion:動(dòng)畫結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,578評(píng)論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,701評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,691評(píng)論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,974評(píng)論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,694評(píng)論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,026評(píng)論 1 329
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,015評(píng)論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,193評(píng)論 0 290
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,719評(píng)論 1 336
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,668評(píng)論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,151評(píng)論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,846評(píng)論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評(píng)論 1 295
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,394評(píng)論 3 400
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,635評(píng)論 2 380

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

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,140評(píng)論 5 13
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種:UIView動(dòng)畫,核心動(dòng)畫,幀動(dòng)畫,自定義轉(zhuǎn)場(chǎng)動(dòng)畫。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,142評(píng)論 1 23
  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,183評(píng)論 3 23
  • Core Animation Core Animation,中文翻譯為核心動(dòng)畫,它是一組非常強(qiáng)大的動(dòng)畫處理API,...
    45b645c5912e閱讀 3,047評(píng)論 0 21