Core Animation 核心動畫

Core Animation 核心動畫

Core Animation是一組非常強大的動畫處理API猎拨,使用它能做出非常炫麗的動畫效果,而且往往是事半功倍。也就是說腺阳,使用少量的代碼就可以實現非常強大的功能。

Core Animation可以用在Mac OS X和iOS平臺穿香。

Core Animation的動畫執(zhí)行過程都是在后臺操作的亭引,不會阻塞主線程。

要注意的是扔水,Core Animation是直接作用在CALayer上的痛侍,并非UIView

核心動畫的繼承結構如圖

Core Animation的使用步驟

如果不是xcode5之后的版本,使用它需要先添加QuartzCore.framework和引入對應的框架

開發(fā)步驟:

1.首先得有CALayer

2.初始化一個CAAnimation對象,并設置一些動畫相關屬性

3.通過調用CALayer的addAnimation:forKey:方法主届,增加CAAnimation對象到CALayer中赵哲,這樣就能開始執(zhí)行動畫了

4.通過調用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫

CAAnimation

是所有動畫對象的父類,負責控制動畫的持續(xù)時間和速度君丁,是個抽象類枫夺,不能直接使用,應該使用它具體的子類

屬性說明:(代表來自CAMediaTiming協議的屬性)

*duration*:動畫的持續(xù)時間*repeatCount*:重復次數绘闷,無限循環(huán)可以設置HUGE_VALF或者MAXFLOAT*repeatDuration*:重復時間removedOnCompletion:默認為YES橡庞,代表動畫執(zhí)行完畢后就從圖層上移除,圖形會恢復到動畫執(zhí)行前的狀態(tài)印蔗。如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài)扒最,那就設置為NO,不過還要設置fillMode為kCAFillModeForwards*fillMode*:決定當前對象在非active時間段的行為华嘹。比如動畫開始之前或者動畫結束之后*beginTime*:可以用來設置動畫延遲執(zhí)行時間吧趣,若想延遲2s,就設置為CACurrentMediaTime()+2耙厚,CACurrentMediaTime()為圖層的當前時間timingFunction:速度控制函數强挫,控制動畫運行的節(jié)奏delegate:動畫代理

CAAnimation——動畫填充模式

fillMode屬性值(要想fillMode有效,最好設置removedOnCompletion =NO)kCAFillModeRemoved這個是默認值薛躬,也就是說當動畫開始前和動畫結束后俯渤,動畫對layer都沒有影響,動畫結束后型宝,layer會恢復到之前的狀態(tài)kCAFillModeForwards當動畫結束后八匠,layer會一直保持著動畫最后的狀態(tài) kCAFillModeBackwards在動畫開始前,只需要將動畫加入了一個layer趴酣,layer便立即進入動畫的初始狀態(tài)并等待動畫開始臀叙。kCAFillModeBoth這個其實就是上面兩個的合成.動畫加入后開始之前,layer便處于動畫初始狀態(tài)价卤,動畫結束后layer保持動畫最后的狀態(tài)

CAAnimation——速度控制函數

速度控制函數(CAMediaTimingFunction) kCAMediaTimingFunctionLinear(線性):勻速劝萤,給你一個相對靜態(tài)的感覺kCAMediaTimingFunctionEaseIn(漸進):動畫緩慢進入,然后加速離開kCAMediaTimingFunctionEaseOut(漸出):動畫全速進入慎璧,然后減速的到達目的地kCAMediaTimingFunctionEaseInEaseOut(漸進漸出):動畫緩慢的進入床嫌,中間加速,然后減速的到達目的地胸私。這個是默認的動畫行為厌处。

CABasicAnimation——基本動畫

基本動畫,是CAPropertyAnimation的子類

屬性說明: fromValue:keyPath相應屬性的初始值 toValue:keyPath相應屬性的結束值

動畫過程說明: 隨著動畫的進行岁疼,在長度為duration的持續(xù)時間內阔涉,keyPath相應屬性的值從fromValue漸漸地變?yōu)閠oValue keyPath內容是CALayer的可動畫Animatable屬性 如果fillMode=kCAFillModeForwards同時removedOnComletion=NO缆娃,那么在動畫執(zhí)行完畢后,圖層會保持顯示動畫執(zhí)行后的狀態(tài)瑰排。但在實質上贯要,圖層的屬性值還是動畫執(zhí)行前的初始值,并沒有真正被改變椭住。

CABasicAnimation基礎核心動畫? ? 核心動畫之作用在層上面.? ? 動畫的本質是改圖層的某一個屬性.CABasicAnimation*anim = [CABasicAnimationanimation];? ? 圖層有那些屬性,這里才能寫那些屬性.? ? anim.keyPath=@"transform.scale";? ? anim.toValue= @0.5;? ? 告訴動畫完成的時候不要移除? ? anim.removedOnCompletion=NO;? ? 保存動畫最前面的效果.? ? anim.fillMode= kCAFillModeForwards;? ? 把動畫添加到層上面.? ? [self.redView.layeraddAnimation:anim forKey:nil];

例子心跳效果

思路:就是讓一張圖片做一個放大縮放小的動畫.? ? 代碼實現:CABasicAnimation*anim =[CABasicAnimationanimation];? ? 設置縮放屬性? ? anim.keyPath=@"transform.scale";? ? 縮放到最小? ? anim.toValue= @0;? ? 設置動畫執(zhí)行的次數? ? anim.repeatCount= MAXFLOAT;? ? 設置動畫執(zhí)行的時長? ? anim.duration=0.25;? ? 設置動畫自動反轉(怎么去, 怎么回)? ? anim.autoreverses=YES;? ? 添加動畫? ? [self.heartView.layeraddAnimation:anim forKey:nil];

CAKeyframeAnimation——關鍵幀動畫

關鍵幀動畫崇渗,也是CAPropertyAnimation的子類,與CABasicAnimation的區(qū)別是: CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue)京郑,而CAKeyframeAnimation會使用一個NSArray保存這些數值

屬性說明: values:上述的NSArray對象宅广。里面的元素稱為“關鍵幀”(keyframe)。動畫對象會在指定的時間(duration)內些举,依次顯示values數組中的每一個關鍵幀 path:可以設置一個CGPathRef跟狱、CGMutablePathRef,讓圖層按照路徑軌跡移動户魏。path只對CALayer的anchorPoint和position起作用兽肤。如果設置了path,那么values將被忽略 keyTimes:可以為對應的關鍵幀指定對應的時間點绪抛,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀电禀。如果沒有設置keyTimes幢码,各個關鍵幀的時間是平分的

CABasicAnimation可看做是只有2個關鍵幀的CAKeyframeAnimation

例子圖片抖動

1.幀動畫介紹:CAKeyframeAnimation它可以在多個值之間進行動畫.? ? ? ? 設置多值之間的屬性為:? ? ? ? 后面是一個數組,就是要設置的多個值.? ? ? ? anim.values= @[];? ? ? ? 它還可以根據一個路徑做動畫.? ? ? ? anim.path= 自己創(chuàng)建的路徑.2.圖片抖動思路:? ? ? ? 其實就是做一個左右旋轉的動畫.先讓它往左邊旋轉-5,再往右邊旋轉5度,再從5度旋轉到-5度.? ? ? ? 就會有左右搖擺的效果了.? ? ? ? 具體實現代碼? ? ? ? 創(chuàng)建幀動畫CAKeyframeAnimation*anim = [CAKeyframeAnimationanimation];? ? ? ? 設置動畫屬性為旋轉? ? ? ? anim.keyPath=@"transform.rotation";? ? ? ? 設置屬性值為多個屬性? ? ? ? anim.values= @[@(angle2radio(-5)),@(angle2radio(5)),@(angle2radio(-5))];? ? ? ? 設置動畫執(zhí)行次數? ? ? ? anim.repeatCount= MAXFLOAT;? ? ? ? 添加動畫? ? ? ? [_imageView.layeraddAnimation:anim forKey:nil];3.根據圓形的路徑做移動的效果.? ? ? ? 創(chuàng)建路徑UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(50,50,100,100)];? ? ? [path addLineToPoint:CGPointMake(200,500)];? ? ? 把路徑設為動畫的屬性? ? ? ? anim.path= path.CGPath;

CAAnimationGroup——動畫組

動畫組,是CAAnimation的子類尖飞,可以保存一組動畫對象症副,將CAAnimationGroup對象加入層后,組中所有動畫對象可以同時并發(fā)運行

屬性說明: animations:用來保存一組動畫對象的NSArray 默認情況下政基,一組動畫對象是同時運行的贞铣,也可以通過設置動畫對象的beginTime屬性來更改動畫的開始時間

例子

可以同時執(zhí)行多個動畫.? ? 創(chuàng)建組動畫CAAnimationGroup*group = [CAAnimationGroupanimation];? ? 平移CABasicAnimation*anim = [CABasicAnimationanimation];? ? anim.keyPath=@"position.y";? ? anim.toValue= @400;? ? 縮放CABasicAnimation*scaleAnim = [CABasicAnimationanimation];? ? scaleAnim.keyPath=@"transform.scale";? ? scaleAnim.toValue= @0.5;? ? 設置動畫組屬性? ? group.animations= @[anim,scaleAnim];? ? group.removedOnCompletion=NO;? ? group.fillMode= kCAFillModeForwards;? ? 添加組動畫? ? [self.redView.layeraddAnimation:group forKey:nil];? ? 使用動畫組的好處,不需要每次都去添加動畫,設置動畫完成時的屬性.? ? 只需要把要執(zhí)行的動畫,添加到動畫組的animations數組當中即可,? ? 最后把組動畫添加到層上面,就會自動執(zhí)行數組當中的動畫.? ? 動畫完成時設置的屬性也只需要設置一次.

轉場動畫

轉場動畫就是從一個場景轉換到另一個場景,像導航控制器的push效果,就是一個轉場.

CATransition是CAAnimation的子類,用于做轉場動畫沮明,能夠為層提供移出屏幕和移入屏幕的動畫效果辕坝。iOS比Mac,OSX的轉場動畫效果少一點

UINavigationController就是通過CATransition實現了將控制器的視圖推入屏幕的動畫效果

動畫屬性:

type:動畫過渡類型

subtype:動畫過渡方向

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

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

轉場動畫的過渡效果

一,CALayer進行轉場動畫1.創(chuàng)建轉場動畫CATransition*anim = [CATransitionanimation];2.設置轉場類型? ? ? anim.type=@"cube";? ? ? anim.duration=1;3設置轉場的方向? ? ? anim.subtype= kCATransitionFromLeft;4設置動畫的開始位置? ? ? anim.startProgress=0.5;5設置動畫的結束位置? ? ? anim.endProgress=0.8;6添加動畫.了? ? [_imageV.layeraddAnimation:anim forKey:nil];? ? 要執(zhí)行動畫的代碼稱為轉場代碼.? ? 轉場動畫要和轉場代碼寫在同一個方法當中才有動畫效果.二,UIView進行轉場動畫? ? ? [UIViewtransitionWithView:self.imageVduration:1options:UIViewAnimationOptionTransitionFlipFromRightanimations:^{? ? ? ? ? ? 轉場代碼? ? ? ? } completion:^(BOOLfinished) {? ? ? ? ? ? 動畫執(zhí)行完畢時調用.? ? ? ? }];? ? ? ? 使用UIView轉場的類型比較少.

UIView與核心動畫對比

1.UIView和核心動畫區(qū)別

核心動畫只能添加到CALayer

核心動畫一切都是假象,并不會改變真實的值荐健。

2.什么時候使用UIView的動畫

如果需要與用戶交互就使用UIView的動畫.

不需要與用戶交互可以使用核心動畫

3.什么場景使用核心動畫最多

在轉場動畫中酱畅,核心動畫的類型比較多

根據一個路徑做動畫,只能用核心動畫(幀動畫)

動畫組:同時做多個動畫

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末江场,一起剝皮案震驚了整個濱河市纺酸,隨后出現的幾起案子,更是在濱河造成了極大的恐慌址否,老刑警劉巖餐蔬,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡樊诺,警方通過查閱死者的電腦和手機仗考,發(fā)現死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來啄骇,“玉大人痴鳄,你說我怎么就攤上這事「准校” “怎么了痪寻?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長虽惭。 經常有香客問我橡类,道長,這世上最難降的妖魔是什么芽唇? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任顾画,我火速辦了婚禮,結果婚禮上匆笤,老公的妹妹穿的比我還像新娘研侣。我一直安慰自己吵护,他們只是感情好潭苞,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著堕阔,像睡著了一般咆课。 火紅的嫁衣襯著肌膚如雪末誓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天书蚪,我揣著相機與錄音喇澡,去河邊找鬼。 笑死殊校,一個胖子當著我的面吹牛晴玖,可吹牛的內容都是我干的。 我是一名探鬼主播为流,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼窜醉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了艺谆?” 一聲冷哼從身側響起榨惰,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎静汤,沒想到半個月后琅催,有當地人在樹林里發(fā)現了一具尸體居凶,經...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年藤抡,在試婚紗的時候發(fā)現自己被綠了侠碧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡缠黍,死狀恐怖弄兜,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情瓷式,我是刑警寧澤替饿,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站贸典,受9級特大地震影響视卢,放射性物質發(fā)生泄漏。R本人自食惡果不足惜廊驼,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一据过、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妒挎,春花似錦绳锅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至庸队,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間闯割,已是汗流浹背彻消。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宙拉,地道東北人宾尚。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像谢澈,于是被迫代替她去往敵國和親煌贴。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內容