iOS開發筆記--iOS動畫（Core Animation）總結

原文：http://www.cocoachina.com/ios/20160712/17010.html

 

1、簡介

iOS動畫主要是指Core Animation框架。官方使用文檔地址爲：Core Animation Guide。Core Animation是iOS和macOS平臺上負責圖形渲染與動畫的基礎框架。Core Animation能夠做用與動畫視圖或者其餘可視元素，爲你完成了動畫所需的大部分繪幀工做。你只須要配置少許的動畫參數（如開始點的位置和結束點的位置）便可使用Core Animation的動畫效果。Core Animation將大部分實際的繪圖任務交給了圖形硬件來處理，圖形硬件會加速圖形渲染的速度。這種自動化的圖形加速技術讓動畫擁有更高的幀率而且顯示效果更加平滑，不會加劇CPU的負擔而影響程序的運行速度。

2、Core Animation類圖以及經常使用字段

Core Animation類的繼承關係圖

經常使用屬性

duration : 動畫的持續時間

beginTime : 動畫的開始時間

repeatCount : 動畫的重複次數

autoreverses : 執行的動畫按照原動畫返回執行

timingFunction : 控制動畫的顯示節奏系統提供五種值選擇，分別是：

• kCAMediaTimingFunctionLinear 線性動畫

• kCAMediaTimingFunctionEaseIn 先快後慢

• kCAMediaTimingFunctionEaseOut 先慢後快

• kCAMediaTimingFunctionEaseInEaseOut 先慢後快再慢

• kCAMediaTimingFunctionDefault 默認，也屬於中間比較快

delegate ： 動畫代理。可以檢測動畫的執行和結束。

1 2 3 4

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

path：關鍵幀動畫中的執行路徑

type：過渡動畫的動畫類型，系統提供了四種過渡動畫。

• kCATransitionFade 漸變效果

• kCATransitionMoveIn 進入覆蓋效果

• kCATransitionPush 推出效果

• kCATransitionReveal 揭露離開效果

• subtype : 過渡動畫的動畫方向

• kCATransitionFromRight 從右側進入

• kCATransitionFromLeft 從左側進入

• kCATransitionFromTop 從頂部進入

• kCATransitionFromBottom 從底部進入

3、iOS動畫的調用方式

第一種：UIView 代碼塊調用

1 2 3 4 5 6

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); [UIView animateWithDuration:1.0f animations:^{ _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50); } completion:^(BOOL finished) { _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50); }];

第二種：UIView [begin commit]模式

1 2 3 4 5

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1.0f]; _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50); [UIView commitAnimations];

第三種：使用Core Animation中的類

1 2 3 4 5

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@ "position" ]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; [_demoView.layer addAnimation:anima forKey:@ "positionAnimation" ];

4、iOS動畫的使用

4.1：基礎動畫（CABaseAnimation）

重要屬性

• fromValue：keyPath對應的初始值

• toValue：keyPath對應的結束值

基礎動畫主要提供了對於CALayer對象中的可變屬性進行簡單動畫的操做。好比：位移、透明度、縮放、旋轉、背景色等等。

效果演示：

baseAnimation

位移動畫代碼演示：

1 2 3 4 5 6 7 8

//使用CABasicAnimation建立基礎動畫 CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@ "position" ]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; //anima.fillMode = kCAFillModeForwards; //anima.removedOnCompletion = NO; [_demoView.layer addAnimation:anima forKey:@ "positionAnimation" ];

注意點

若是fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值仍是動畫執行前的初始值，並無真正被改變。

4.2：關鍵幀動畫（CAKeyframeAnimation）

CAKeyframeAnimation和CABaseAnimation都屬於CAPropertyAnimatin的子類。CABaseAnimation只能從一個數值（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沒有設置的時候,各個關鍵幀的時間是平分的。

效果演示：

關鍵幀動畫

圓形路徑動畫代碼演示：

1 2 3 4 5

CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@ "position" ]; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)]; anima.path = path.CGPath; anima.duration = 2.0f; [_demoView.layer addAnimation:anima forKey:@ "pathAnimation" ];

說明：CABasicAnimation可看作是最多隻有2個關鍵幀的CAKeyframeAnimation

4.3：組動畫（CAAnimationGroup）

CAAnimation的子類，能夠保存一組動畫對象，將CAAnimationGroup對象加入層後，組中全部動畫對象能夠同時併發運行。

重要屬性

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

效果演示：

組動畫

組動畫代碼演示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@ "position" ]; NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)]; NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)]; anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil]; //縮放動畫 CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@ "transform.scale" ]; anima2.fromValue = [NSNumber numberWithFloat:0.8f]; anima2.toValue = [NSNumber numberWithFloat:2.0f]; //旋轉動畫 CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@ "transform.rotation" ]; anima3.toValue = [NSNumber numberWithFloat:M_PI*4]; //組動畫 CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil]; groupAnimation.duration = 4.0f; [_demoView.layer addAnimation:groupAnimation forKey:@ "groupAnimation" ];

4.4：過渡動畫（CATransition）

CAAnimation的子類，用於作過渡動畫或者轉場動畫，可以爲層提供移出屏幕和移入屏幕的動畫效果。

重要屬性

• type：動畫過渡類型

Apple 官方的SDK其實只提供了四種過渡效果。

• kCATransitionFade 漸變效果

• kCATransitionMoveIn 進入覆蓋效果

• kCATransitionPush 推出效果

• kCATransitionReveal 揭露離開效果

私有API提供了其餘不少很是炫的過渡動畫，好比@"cube"、@"suckEffect"、@"oglFlip"、 @"rippleEffect"、@"pageCurl"、@"pageUnCurl"、@"cameraIrisHollowOpen"、@"cameraIrisHollowClose"等。

注意點

私有api，不建議開發者們使用。由於蘋果公司不提供維護，而且有可能形成你的app審覈不經過。

• subtype：動畫過渡方向

• kCATransitionFromRight 從右側進入

• kCATransitionFromLeft 從左側進入

• kCATransitionFromTop 從頂部進入

• kCATransitionFromBottom 從底部進入

• startProgress：動畫起點(在總體動畫的百分比)

• endProgress：動畫終點(在總體動畫的百分比)

效果演示：

4.5：綜合案例

4.5.1 ： 仿Path菜單效果

效果演示：

仿Path菜單效果

動畫解析：

一、點擊紅色按鈕，紅色按鈕旋轉。（旋轉動畫）

二、黑色小按鈕依次彈出，而且帶有旋轉效果。（位移動畫、旋轉動畫、組動畫）

三、點擊黑色小按鈕，其餘按鈕消失，被點擊的黑色按鈕變大變淡消失。（縮放動畫、alpha動畫、組動畫）

博主的話：代碼過多，這裏不作演示。文章最後提供代碼下載地址。

4.5.2： 仿釘釘菜單效果

效果演示：

仿釘釘菜單效果

看上去挺炫的，其實實現很簡單，就是位移動畫+縮放動畫。

4.5.3： 點贊煙花效果動畫

效果演示：

點贊煙花效果動畫

這裏其實只有按鈕變大效果使用的縮放動畫。煙花效果 使用的是一種比較特殊的動畫--粒子動畫。

一個粒子系統通常有兩部分組成：

一、CAEmitterCell：能夠看做是單個粒子的原型（例如，一個單一的粉撲在一團煙霧）。當散發出一個粒子，UIKit根據這個發射粒子和定義的基礎上建立一個隨機粒子。此原型包括一些屬性來控制粒子的圖片，顏色，方向，運動，縮放比例和生命週期。

二、CAEmitterLayer：主要控制發射源的位置、尺寸、發射模式、發射源的形狀等等。

以上兩個類的屬性仍是比較多的，這裏就不細講了。你們能夠google一下，詳細的瞭解吧。

5、總結

任何複雜的動畫其實都是由一個個簡單的動畫組裝而成的，只要咱們善於分解和組裝，咱們就能實現出滿意的效果。動畫其實也不是那麼難。

6、下載地址：https://github.com/yixiangboy/IOSAnimationDemo