iOS Core Animation詳解

一返帕、CoreGraphics,QuartzCore, CoreAnimation區(qū)別

CoreGraphics(核心圖形)

它是iOS的核心圖形庫,包含Quartz2D繪圖API接口,常用的是point,size,rect等這些圖形烈掠,都定義在這個框架中,類名以CG開頭的都屬于CoreGraphics框架缸托,它提供的都是C語言函數(shù)接口左敌,是可以在iOS和mac OS 通用的

QuartzCore

Quartz是位于Mac OS X的Drawin核心之上的繪圖層

Core Animation

Core Animation,中文翻譯為核心動畫俐镐,它是一組非常強大的動畫處理API矫限,使用它能做出非常酷炫的動畫效果佩抹。CoreAnimation是跨平臺的叼风,既可以支持IOS,也支持MAC OS棍苹。Core Animation的動畫執(zhí)行過程都是在后臺操作的无宿,不會阻塞主線程。要注意的是枢里,Core Animation是直接作用在CALayer上的孽鸡,并非UIView蹂午。

image.png

二、Core Animation的繼承結(jié)構(gòu)

CAAnimation是所有動畫對象的父類彬碱,負(fù)責(zé)控制動畫的持續(xù)時間和速度画侣、是個抽象類,不能直接使用堡妒,應(yīng)該使用具體子類。需要注意的是CAAnimation 和 CAPropertyAnimation 都是抽象類溉卓。

view是負(fù)責(zé)響應(yīng)事件的皮迟,layer是負(fù)責(zé)顯示的。


image.png

黃色的區(qū)塊是常用的屬性桑寨、方法或者需要遵守的協(xié)議伏尼,灰色是類名。
核心動畫中所有類都遵守CAMediaTiming尉尾。

  • CAAnaimation是個抽象類爆阶,不具備動畫效果,必須用它的子類CAAnimationGroup和CATransition)才有動畫效果沙咏。
  • CAAnimationGroup(動畫組)辨图,可以同時進(jìn)行縮放,旋轉(zhuǎn)肢藐。
  • CATransition(轉(zhuǎn)場動畫)故河,界面之間跳轉(zhuǎn)都可以用轉(zhuǎn)場動畫。
  • CAPropertyAnimation也是個抽象類吆豹,本身不具備動畫效果鱼的,只有子類(CABasicAnimation和CAKeyframeAnimation)才有動畫效果。
  • CABasicAnimation(基礎(chǔ)動畫)痘煤,做一些簡單效果凑阶。
  • CAKeyframeAnimation(幀動畫),做一些連續(xù)的流暢的動畫衷快。

三宙橱、Core Animation使用步驟及相關(guān)屬性

1、簡單使用步驟
第一步:初始化一個CAAnimation對象烦磁,并設(shè)置一些動畫相關(guān)屬性养匈。
第二步:通過調(diào)用CALayer的addAnimation:forKey:方法增加CAAnimation對象到CALayer中,這樣就能開始執(zhí)行動畫了都伪。
第三步:通過調(diào)用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫呕乎。

2、常用屬性

duration:持續(xù)時間陨晶,默認(rèn)值是0.25秒

repeatCount:重復(fù)次數(shù)猬仁,無線循環(huán)可以設(shè)置HUGE_VALF或者CGFLOAT_MAX

repeatDuration:重復(fù)時間

removeOnCompletion: 默認(rèn)為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é)奏

delegate:動畫代理

動畫代理能夠檢測動畫的執(zhí)行和結(jié)束:

@interface NSObject (CAAnimationDelegate)
 - (void)animationDidStart:(CAAnimation *)anim;
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

3襟雷、動畫填充模式(fillMode)

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

kCAFillModeBackwards:在動畫開始前仁烹,只需要將動畫加入了一個layer耸弄,layer便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始

kCAFillModeBoth:這個其實就是上面兩個合成,動畫加入后卓缰,開始之前计呈,layer便處于動畫初始狀態(tài),動畫結(jié)束后layer保持動畫最后的狀態(tài)

kCAFillModeRemoved:這個是默認(rèn)值征唬,也就是說當(dāng)動畫開始前和動畫結(jié)束后捌显,動畫對layer都沒有影響,動畫結(jié)束后总寒,layer會恢復(fù)到之前的狀態(tài)

4苇瓣、動畫速度控制函數(shù)(timingFunction)

kCAMediaTimingFunctionLinear(線性):勻速,給你一個相對靜態(tài)的感覺

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

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

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

5 画切、CALayer上動畫的暫停和恢復(fù)
CALayer都是實現(xiàn)了CAMediaTiming協(xié)議(或者叫做接口)竣稽。所以layer的動畫有一個屬性speed。如果一個layer的速度變成0.0的時候霍弹,很顯然這個動畫就不再動了毫别。設(shè)置layer的speed為0時,layer的動畫暫停典格。speed屬性設(shè)置為任意大于0的值時岛宦,動畫恢復(fù)。

#pragma mark 暫停CALayer的動畫
-(void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

    // 讓CALayer的時間停止走動
      layer.speed = 0.0;
    // 讓CALayer的時間停留在pausedTime這個時刻
    layer.timeOffset = pausedTime;
}
#pragma mark 恢復(fù)CALayer的動畫
-(void)resumeLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = layer.timeOffset;
    // 1. 讓CALayer的時間繼續(xù)行走
      layer.speed = 1.0;
    // 2. 取消上次記錄的停留時刻
      layer.timeOffset = 0.0;
    // 3. 取消上次設(shè)置的時間
      layer.beginTime = 0.0;
    // 4. 計算暫停的時間(這里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    // 5. 設(shè)置相對于父坐標(biāo)系的開始時間(往后退timeSincePause)
      layer.beginTime = timeSincePause;
}

四耍缴、動畫的調(diào)用方式

(1)UIView 代碼塊調(diào)用:

_demoView.frame = CGRectMake(0, 0, 50, 50);

UIView animateWithDuration:1.0f animations:^{
        _demoView.frame = CGRectMake(50, 50 50, 50);
    } completion:^(BOOL finished) {
        _demoView.frame = CGRectMake(100, 100, 50, 50);
    }];

(2)UIView [begin commit]模式

_demoView.frame = CGRectMake(0, 100, 50, 50);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
_demoView.frame = CGRectMake(self.view.frame.size.width, self.view.frame.size.height/2, 50, 50);
[UIView commitAnimations];

(3)通過調(diào)用CALayer的addAnimation:forKey:

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, self.view.frame.size.height/2)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width, self.view.frame.size.height/2)];
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

addanimation:forkey: 中的key可以設(shè)置為任意值

五砾肺、CAAnimation幾個常用的子類

1挽霉、CABaseAnimation 基礎(chǔ)動畫
一些重要屬性

fromValue : keyPath對應(yīng)的初始值

toValue : keyPath對應(yīng)的結(jié)束值

基礎(chǔ)動畫主要提供了對于CALayer對象中的可變屬性進(jìn)行簡單動畫的操作。比如:位移变汪、透明度侠坎、縮放、旋轉(zhuǎn)裙盾、背景色等等实胸。

2、CAKeyframeAnimation 關(guān)鍵幀動畫
Keyframe顧名思義就是關(guān)鍵點的frame番官,你可以通過設(shè)定CALayer的始點童芹、中間關(guān)鍵點、終點的frame鲤拿,時間,動畫會沿你設(shè)定的軌跡進(jìn)行移動 署咽。
一些重要屬性

path:這是一個 CGPathRef 對象近顷,默認(rèn)是空的,當(dāng)我們創(chuàng)建好CAKeyframeAnimation的實例的時候宁否,可以通過制定一個自己定義的path來讓某一個物體按照這個路徑進(jìn)行動畫窒升。這個值默認(rèn)是nil,當(dāng)其被設(shè)定的時候慕匠,values 這個屬性就被覆蓋饱须。

values:一個數(shù)組,提供了一組關(guān)鍵幀的值台谊,當(dāng)使用path的 時候 values的值自動被忽略蓉媳。

對比基礎(chǔ)動畫跟關(guān)鍵幀動畫,關(guān)鍵幀動畫引入了動畫占比時長的概念锅铅,這讓我們能控制每個關(guān)鍵幀動畫的占用比例而不是傳入一個無意義的動畫時長 —— 這讓我們的代碼更加難以理解酪呻。當(dāng)然,除了動畫占比之外盐须,關(guān)鍵幀動畫的options參數(shù)也讓動畫變得更加平滑玩荠,下面是關(guān)鍵幀特有的配置參數(shù):

UIViewKeyframeAnimationOptionCalculationModeLinear // 連續(xù)運算模式,線性

UIViewKeyframeAnimationOptionCalculationModeDiscrete // 離散運算模式贼邓,只顯示關(guān)鍵幀

UIViewKeyframeAnimationOptionCalculationModePaced // 均勻執(zhí)行運算模式阶冈,線性

UIViewKeyframeAnimationOptionCalculationModeCubic // 平滑運算模式

UIViewKeyframeAnimationOptionCalculationModeCubicPaced // 平滑均勻運算模式

3、CAAnimationGroup 組合動畫
Group也就是組合的意思塑径,可以保存一組動畫對象女坑,將CAAnimationGroup對象加入圖層后,組中所有動畫對象可以同時并發(fā)運行统舀。
其重要屬性為:

animations:用來保存一組動畫對象的NSArray

4堂飞、CATransition 過渡動畫
CAAnimation的子類灌旧,用于做過渡動畫或者轉(zhuǎn)場動畫,能夠為層提供移出屏幕和移入屏幕的動畫效果绰筛。
重要屬性:

type:動畫過渡類型

subtype:動畫過渡方向

startProgress:動畫起點(在整體動畫的百分比)

endProgress:動畫終點(在整體動畫的百分比)

有以下幾種type:


image.png

有以下幾種subtype:

kCATransitionFromRight 從右側(cè)進(jìn)入
kCATransitionFromLeft 從左側(cè)進(jìn)入
kCATransitionFromTop 從頂部進(jìn)入
kCATransitionFromBottom 從底部進(jìn)入
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末枢泰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子铝噩,更是在濱河造成了極大的恐慌衡蚂,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件骏庸,死亡現(xiàn)場離奇詭異毛甲,居然都是意外死亡,警方通過查閱死者的電腦和手機具被,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門玻募,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人一姿,你說我怎么就攤上這事七咧。” “怎么了叮叹?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵艾栋,是天一觀的道長。 經(jīng)常有香客問我蛉顽,道長蝗砾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任携冤,我火速辦了婚禮悼粮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘曾棕。我一直安慰自己矮锈,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布睁蕾。 她就那樣靜靜地躺著苞笨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪子眶。 梳的紋絲不亂的頭發(fā)上瀑凝,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機與錄音臭杰,去河邊找鬼粤咪。 笑死,一個胖子當(dāng)著我的面吹牛渴杆,可吹牛的內(nèi)容都是我干的寥枝。 我是一名探鬼主播宪塔,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼囊拜!你這毒婦竟也來了某筐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤冠跷,失蹤者是張志新(化名)和其女友劉穎南誊,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜜托,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡抄囚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了橄务。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片幔托。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蜂挪,靈堂內(nèi)的尸體忽然破棺而出重挑,到底是詐尸還是另有隱情,我是刑警寧澤锅劝,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站蟆湖,受9級特大地震影響故爵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜隅津,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一诬垂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧伦仍,春花似錦结窘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至谓苟,卻和暖如春官脓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背涝焙。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工卑笨, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人仑撞。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓赤兴,卻偏偏與公主長得像妖滔,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子桶良,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

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