iOS動畫篇:核心動畫系列(一)開篇

1、什么是核心動畫

Core Animation(核心動畫)是一組功能強(qiáng)大、效果華麗的動畫API,無論在iOS系統(tǒng)或者在你開發(fā)的App中,都有大量應(yīng)用。

核心動畫所在的位置如下圖所示:


什么是核心動畫

可以看到,核心動畫位于UIKit的下一層,相比UIView動畫,它可以實(shí)現(xiàn)更復(fù)雜的動畫效果。

核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應(yīng)事件)。

實(shí)際上,每一個view都有其對應(yīng)的layer,給view加上動畫,本質(zhì)上是對其layer進(jìn)行操作,layer包含了各種支持動畫的屬性,動畫則包含了屬性變化的值、變化的速度、變化的時間等等,兩者結(jié)合產(chǎn)生動畫的過程。

核心動畫和UIView動畫的對比:UIView動畫可以看成是對核心動畫的封裝,和UIView動畫不同的是,通過核心動畫改變layer的狀態(tài)(比如position),動畫執(zhí)行完畢后實(shí)際上是沒有改變的(表面上看起來已改變)。

總體來說核心動畫的優(yōu)點(diǎn)有:

1)性能強(qiáng)大,使用硬件加速,可以同時向多個圖層添加不同的動畫效果
  2)接口易用,只需要少量的代碼就可以實(shí)現(xiàn)復(fù)雜的動畫效果。
  3)運(yùn)行在后臺線程中,在動畫過程中可以響應(yīng)交互事件(UIView動畫默認(rèn)動畫過程中不響應(yīng)交互事件)。

2、核心動畫類的層次結(jié)構(gòu)

核心動畫類的層次結(jié)構(gòu)

CAAnimation是所有動畫對象的父類,實(shí)現(xiàn)CAMediaTiming協(xié)議,負(fù)責(zé)控制動畫的時間、速度和時間曲線等等,是一個抽象類,不能直接使用。

CAPropertyAnimation :是CAAnimation的子類,它支持動畫地顯示圖層的keyPath,一般不直接使用。

iOS9.0之后新增CASpringAnimation類,它實(shí)現(xiàn)彈簧效果的動畫,是CABasicAnimation的子類。

綜上,核心動畫類中可以直接使用的類有:

  • CABasicAnimation
  • CAKeyframeAnimation
  • CATransition
  • CAAnimationGroup
  • CASpringAnimation

3、核心動畫類的核心方法

  1. 初始化CAAnimation對象
    一般使用animation方法生成實(shí)例
 + (instancetype)animation;

如果是CAPropertyAnimation的子類,還可以通過animationWithKeyPath生成實(shí)例

 + (instancetype)animationWithKeyPath:(nullable NSString *)path;
  1. 設(shè)置動畫的相關(guān)屬性

設(shè)置動畫的執(zhí)行時間,執(zhí)行曲線,keyPath的目標(biāo)值,代理等等

  1. 動畫的添加和移除

調(diào)用CALayer的addAnimation:forKey:方法將動畫添加到CALayer中,這樣動畫就開始執(zhí)行了

- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

調(diào)用CALayer的removeAnimation方法停止CALayer中的動畫

- (void)removeAnimationForKey:(NSString *)key;
- (void)removeAllAnimations;

4) 核心動畫類的常用屬性

keyPath:可以指定keyPath為CALayer的屬性值,并對它的值進(jìn)行修改,以達(dá)到對應(yīng)的動畫效果,需要注意的是部分屬性值是不支持動畫效果的。

以下是具有動畫效果的keyPath:

//CATransform3D Key Paths : (example)transform.rotation.z
     //rotation.x
     //rotation.y
     //rotation.z
     //rotation 旋轉(zhuǎn)
     //scale.x
     //scale.y
     //scale.z
     //scale 縮放
     //translation.x
     //translation.y
     //translation.z
     //translation 平移
     //CGPoint Key Paths : (example)position.x
     //x
     //y
     //CGRect Key Paths : (example)bounds.size.width
     //origin.x
     //origin.y
     //origin
     //size.width
     //size.height
     //size
     //opacity
     //backgroundColor
     //cornerRadius 
     //borderWidth
     //contents 
     //Shadow Key Path:
     //shadowColor 
     //shadowOffset 
     //shadowOpacity 
     //shadowRadius
  • duration:動畫的持續(xù)時間

  • repeatCount:動畫的重復(fù)次數(shù)

  • timingFunction:動畫的時間節(jié)奏控制

timingFunctionName的enum值如下:
kCAMediaTimingFunctionLinear 勻速
kCAMediaTimingFunctionEaseIn 慢進(jìn)
kCAMediaTimingFunctionEaseOut 慢出
kCAMediaTimingFunctionEaseInEaseOut 慢進(jìn)慢出
kCAMediaTimingFunctionDefault 默認(rèn)值(慢進(jìn)慢出
  • fillMode:視圖在非Active時的行為

  • removedOnCompletion:動畫執(zhí)行完畢后是否從圖層上移除,默認(rèn)為YES(視圖會恢復(fù)到動畫前的狀態(tài)),可設(shè)置為NO(圖層保持動畫執(zhí)行后的狀態(tài),前提是fillMode設(shè)置為kCAFillModeForwards)

  • beginTime:動畫延遲執(zhí)行時間(通過CACurrentMediaTime() + your time 設(shè)置)

  • delegate:代理

代理方法如下:
 - (void)animationDidStart:(CAAnimation *)anim;  //動畫開始
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //動畫結(jié)束

可以根據(jù)key來區(qū)分不同的動畫

  • 方式一
//動畫開始時
- (void)animationDidStart:(CAAnimation *)anim{
 if ([anim isEqual:[self.imageView.layer animationForKey:@"Animation"]]) { 
NSLog(@"動畫組執(zhí)行了");
 }
}
  • 方式二
    添加動畫的視圖是局部變量時,可使用該方法添加動畫給動畫設(shè)置key-value對
[positionAnima setValue:@"PositionAnima" forKey:@"AnimationKey"];
[transformAnima setValue:@"TransformAnima" forKey:@"AnimationKey"];

所以,可以根據(jù)key中不同的值來進(jìn)行區(qū)分不同的動畫

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

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

  • 在iOS中隨處都可以看到絢麗的動畫效果,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1 23
  • Core Animation Core Animation,中文翻譯為核心動畫,它是一組非常強(qiáng)大的動畫處理API,...
    45b645c5912e閱讀 3,047評論 0 21
  • 前言 本文只要描述了iOS中的Core Animation(核心動畫:隱式動畫、顯示動畫)、貝塞爾曲線、UIVie...
    GitHubPorter閱讀 3,649評論 7 11