iOS動畫--核心動畫

? ? ? 核心動畫,即Core Animation,是Apple封裝的一組非常好用且強大的動畫API。它直接作用于Layer層,通過 - (void)addAnimation:(CAAnimation*)anim forKey:(nullableNSString*)key ,即可讓動畫生效。

? ? ? ?創建核心動畫,使用的是CAAnimation的子類,分別是基礎動畫(CABasicAnimation),關鍵幀動畫(CAKeyframeAnimation),轉場動畫(CATransition)和組動畫(CAAnimationGroup)。我做了個他們之間的關系草圖如下。


關系圖(CAMediaTimingFunction為動畫節奏)

? ? ? CAAnimationDelegate是核心動畫的代理,通過其可以在動畫開始與結束階段進行一些操作,不過需要注意的是在iOS9以前CAAnimationDelegate是CAAnimation的類別,之后才是代理,且為強引用。因此使用CAAnimationDelegate需判斷當前系統版本,并且在當前頁面dealloc之前需先動畫移除,否則會出現無法釋放的內存問題。

? 下圖為我寫過的一個小動畫,分析一下其中使用的動畫來簡單介紹一下核心動畫。


核心動畫


1、CABasicAnimation基礎動畫

? ? ? ? GIF圖中,血量彈性變化,猴子轉身以及受傷抖動動畫都都使用了基礎動畫。受傷抖動動畫的代碼如下,

CABasicAnimation*Animation = [CABasicAnimationanimationWithKeyPath:@"position"];

Animation.fromValue= [NSValuevalueWithCGPoint:CGPointMake(pet.centerX, pet.centerY)];

Animation.toValue= [NSValuevalueWithCGPoint:CGPointMake(pet.centerX+5, pet.centerY)];

Animation.autoreverses=YES;

//Animation.beginTime=CACurrentMediaTime()+0.8;

//Animation.removedOnCompletion=NO;

Animation.fillMode=kCAFillModeBackwards;

Animation.repeatCount=10;

Animation.duration=0.02;//一次時間

屬性解析

? ? ? CABasicAnimationanimationWithKeyPath? ? 動畫路徑,告訴系統需要執行的動畫類型 。position為位置,而猴子旋轉路徑則為transform.rotation.z。

? ? ? ?fromValue,toValue ? ?動畫的起始值與終止值

? ? ? ?autoreverses ? ?動畫是否沿原路徑返回

? ? ? fillMode? 分kCAFillModeForwards,kCAFillModeBackwards,kCAFillModeBoth,kCAFillModeRemoved四中模式。當你設置removedOnCompletion值為NO時,kCAFillModeForwards可以讓當前視圖保持在動畫最后的位置;當你設置了延遲執行時(beginTime),kCAFillModeBackwards會在代碼執行時,使layer層進入動畫開始階段的位置,而結束后會返回layer本身位置;kCAFillModeBoth就很好理解了,如果removedOnCompletion = NO那layer會在動畫開始之前就會迅速進入動畫的初始位置并在執行完動畫后停在動畫結束的位置,如果removedOnCompletion = YES那layer會在動畫開始之前就會迅速進入動畫的初始位置并在執行完動畫后迅速返回到layer的本身位置。

? ? ? ?repeatCount ? 重復次數

? ? ? ? duration 動畫時間

血量彈性變化,使用的是基礎動畫的子類CASpringAnimation。它有幾個屬性,分別是

mass,對象質量質量越大彈性越大需要的動畫時間越長。

stiffness,剛度系數,剛度系數越大,產生形變的力就越大,運動越快。

damping,阻尼系數阻止彈簧伸縮的系數阻尼系數越大,停止越快。時間越短。

initialVelocity,初始速度,正負代表方向,數值代表大小。

2,關鍵幀動畫與組動畫

GIF圖中,香蕉茄子的飛行動畫使用的為組動畫,組動畫中包含了兩個關鍵幀動畫和一個旋轉組動畫。CAAnimationGroup的animations屬性可以將動畫放到數組中,同時執行。

其中物品的飛行過程中的大小變化代碼

CGFloatfrom3DScale =1+arc4random() %10*0.1;

CGFloatto3DScale =1;

CAKeyframeAnimation*Animation = [CAKeyframeAnimationanimationWithKeyPath:@"transform"];

Animation.values=@[[NSValuevalueWithCATransform3D:CATransform3DMakeScale(from3DScale, from3DScale, from3DScale)], [NSValuevalueWithCATransform3D:CATransform3DMakeScale(to3DScale, to3DScale, to3DScale)]];

Animation.timingFunctions=@[[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseOut], [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn]];

? ? ? ? ? 關鍵幀動畫相對于基礎動畫的區別是,CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue),而CAKeyframeAnimation會使用一個NSArray保存這些數值。timingFunctions則是動畫的節奏。

飛行動畫代碼

CGMutablePathRefpathOne =CGPathCreateMutable();

CGPathMoveToPoint(pathOne,NULL, start.x, start.y);

CGPathAddQuadCurveToPoint(pathOne,NULL, start.x, -1, end.x, end.y);

CAKeyframeAnimation*animationOne = [CAKeyframeAnimationanimationWithKeyPath:@"position"];

[animationOnesetPath:pathOne];

animationOne.duration=1.2;

animationOne.fillMode=kCAFillModeForwards;

animationOne.removedOnCompletion=NO;

CFRelease(pathOne);

pathOne =nil;

? ? ? ? 飛行路徑的path可以通過CGPathRef\CGMutablePathRef繪制,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設置了path,那么values將被忽略。需要注意的是,需要手動繪制的路徑釋放。若想細致控制動畫,還可設置keyTimes,為對應的關鍵幀指定對應的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀。當keyTimes沒有設置的時候,各個關鍵幀的時間是平分的。

3,轉場動畫

? ? ? ? ?此GIF中沒有用到,它能夠為層提供移出屏幕和移入屏幕的動畫效果。其實UINavigationController就是通過CATransition實現了將控制器的視圖推入屏幕的動畫效果。說明一下它的幾個屬性。

type:動畫過渡類型

subtype:動畫過渡方向

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,001評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,786評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,986評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,204評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,964評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,354評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,410評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,554評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,106評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,918評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,093評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,648評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,342評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,755評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,009評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,839評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,107評論 2 375

推薦閱讀更多精彩內容