iOS動畫篇:核心動畫

基本概念

1、什么是核心動畫

Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API,無論在iOS系統或者在你開發的App中,都有大量應用。
  核心動畫所在的位置如下圖所示:


Core Animation.png

  可以看到,核心動畫位于UIKit的下一層,相比UIView動畫,它可以實現更復雜的動畫效果。

核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應事件)。
  實際上,每一個view都有其對應的layer,這個layer是root layer:

    @property(nonatomic,readonly,strong)                 CALayer  *layer;

給view加上動畫,本質上是對其layer進行操作,layer包含了各種支持動畫的屬性,動畫則包含了屬性變化的值、變化的速度、變化的時間等等,兩者結合產生動畫的過程。

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

總體來說核心動畫的優點有:

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

2、核心動畫類的層次結構
Core Animation classes and protocol.png

  CAAnimation是所有動畫對象的父類,實現CAMediaTiming協議,負責控制動畫的時間、速度和時間曲線等等,是一個抽象類,不能直接使用。
  CAPropertyAnimation :是CAAnimation的子類,它支持動畫地顯示圖層的keyPath,一般不直接使用。
  iOS9.0之后新增CASpringAnimation類,它實現彈簧效果的動畫,是CABasicAnimation的子類。

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

CABasicAnimation
  CAKeyframeAnimation
  CATransition
  CAAnimationGroup
  CASpringAnimation

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

1.初始化CAAnimation對象
  一般使用animation方法生成實例

     + (instancetype)animation;

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

     + (instancetype)animationWithKeyPath:(nullable NSString *)path;

2.設置動畫的相關屬性
  設置動畫的執行時間,執行曲線,keyPath的目標值,代理等等

3.動畫的添加和移除
  調用CALayer的addAnimation:forKey:方法將動畫添加到CALayer中,這樣動畫就開始執行了

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

調用CALayer的removeAnimation方法停止CALayer中的動畫

     - (void)removeAnimationForKey:(NSString *)key;
     - (void)removeAllAnimations;
4、核心動畫類的常用屬性

keyPath:可以指定keyPath為CALayer的屬性值,并對它的值進行修改,以達到對應的動畫效果,需要注意的是部分屬性值是不支持動畫效果的。
  以下是具有動畫效果的keyPath:

     //CATransform3D Key Paths : (example)transform.rotation.z
     //rotation.x
     //rotation.y
     //rotation.z
     //rotation 旋轉
     //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:動畫的持續時間
  repeatCount:動畫的重復次數
  timingFunction:動畫的時間節奏控制

     timingFunctionName的enum值如下:
     kCAMediaTimingFunctionLinear 勻速
     kCAMediaTimingFunctionEaseIn 慢進
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢進慢出
     kCAMediaTimingFunctionDefault 默認值(慢進慢出)

fillMode:視圖在非Active時的行為
  removedOnCompletion:動畫執行完畢后是否從圖層上移除,默認為YES(視圖會恢復到動畫前的狀態),可設置為NO(圖層保持動畫執行后的狀態,前提是fillMode設置為kCAFillModeForwards)
  beginTime:動畫延遲執行時間(通過CACurrentMediaTime() + your time 設置)
  delegate:代理

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

CABasicAnimation

CABasicAnimation可以設定keyPath的起點,終點的值,動畫會沿著設定點進行移動,CABasicAnimation可以看成是只有兩個關鍵點的特殊的CAKeyFrameAnimation。

下面以改變視圖的position為例演示其使用:

- (void)position {
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
    ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}

動畫效果:

position.gif

下面是部分keyPath對應的動畫效果(圖片名為其對應的keyPath):

positionX.gif
positionY.gif
rotation.gif
rotationX.gif
rotationY.gif
rotationZ.gif
scale.gif
translation.gif
transform的組合效果.gif
bounds.gif
size.gif
sizeW.gif
sizeH.gif
opacity.gif
backgroundColor.gif
cornerRadius.gif
borderWidth.gif
contents.gif
shadowColor.gif
shadowOffset.gif
shadowOpacity.gif
shadowRadius.gif

CAKeyframeAnimation

可以設定keyPath起點、中間關鍵點(不止一個)、終點的值,每一幀所對應的時間,動畫會沿著設定點進行移動。

CAKeyframeAnimation的重要屬性:

values:關鍵幀數組對象,里面每一個元素即為一個關鍵幀,動畫會在對應的時間段內,依次執行數組中每一個關鍵幀的動畫。
  path:動畫路徑對象,可以指定一個路徑,在執行動畫時路徑會沿著路徑移動,Path在動畫中只會影響視圖的Position。
  keyTimes:設置關鍵幀對應的時間點,范圍:0-1。如果沒有設置該屬性,則每一幀的時間平分。

下面以讓視圖繞圈為例演示其使用:

1、設置values使其沿正方形運動
- (void)valueKeyframeAni {
    CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    ani.duration = 4.0;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    NSValue * value1 = [NSValue valueWithCGPoint:CGPointMake(150, 200)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(250, 200)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(250, 300)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(150, 300)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(150, 200)];
    ani.values = @[value1, value2, value3, value4, value5];
    [self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframeValueAni"];
}

動畫效果:


valueKeyframeAni.gif
2、設置path使其繞圓圈運動
- (void)pathKeyframeAni {
    CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
    ani.path = path;
    CGPathRelease(path);
    ani.duration = 4.0;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    [self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframePathAni"];
}

動畫效果:


pathKeyframeAni.gif

CATransition

轉場動畫,比UIVIew轉場動畫具有更多的動畫效果,比如Nav的默認Push視圖的效果就是通過CATransition的kCATransitionPush類型來實現。

CAKeyframeAnimation的重要屬性:

type:過渡動畫的類型

    type的enum值如下:
    kCATransitionFade 漸變
    kCATransitionMoveIn 覆蓋
    kCATransitionPush 推出
    kCATransitionReveal 揭開

還有一些私有動畫類型,效果很炫酷,不過不推薦使用。
  私有動畫類型的值有:"cube"、"suckEffect"、"oglFlip"、 "rippleEffect"、"pageCurl"、"pageUnCurl"等等。

subtype: 過渡動畫的方向

    subtype的enum值如下:
    kCATransitionFromRight 從右邊
    kCATransitionFromLeft 從左邊
    kCATransitionFromTop 從頂部
    kCATransitionFromBottom 從底部

以漸變效果為例

- (void)transitionAni {
    CATransition * ani = [CATransition animation];
    ani.type = kCATransitionFade;
    ani.subtype = kCATransitionFromLeft;
    ani.duration = 1.5;
    self.centerShow.image = [UIImage imageNamed:@"Raffle"];
    [self.centerShow.layer addAnimation:ani forKey:@"transitionAni"];
}

動畫效果:

kCATransitionFade.gif

以下是另外三種轉場類型的動畫效果(圖片名稱對應其type類型):

kCATransitionMoveIn.gif
kCATransitionPush.gif
kCATransitionReveal.gif

以下是部分私有轉場類型的動畫效果(圖片名稱對應其type類型):


transitionAni - rippleEffect.gif
transitionAni - cube.gif
transitionAni - pageCurl.gif
transitionAni - suckEffect.gif

CASpringAnimation

CASpringAnimation是iOS9新加入動畫類型,是CABasicAnimation的子類,用于實現彈簧動畫。

CASpringAnimation的重要屬性:

mass:質量(影響彈簧的慣性,質量越大,彈簧慣性越大,運動的幅度越大)
  stiffness:彈性系數(彈性系數越大,彈簧的運動越快)
  damping:阻尼系數(阻尼系數越大,彈簧的停止越快)
  initialVelocity:初始速率(彈簧動畫的初始速度大小,彈簧運動的初始方向與初始速率的正負一致,若初始速率為0,表示忽略該屬性)
  settlingDuration:結算時間(根據動畫參數估算彈簧開始運動到停止的時間,動畫設置的時間最好根據此時間來設置)

CASpringAnimation和UIView的SpringAnimation對比:

1.CASpringAnimation 可以設置更多影響彈簧動畫效果的屬性,可以實現更復雜的彈簧動畫效果,且可以和其他動畫組合。
  2.UIView的SpringAnimation實際上就是通過CASpringAnimation來實現。

以實現視圖的bounds變化的彈簧動畫效果為例:

- (void)springAni {
    CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
    ani.mass = 10.0; //質量,影響圖層運動時的彈簧慣性,質量越大,彈簧拉伸和壓縮的幅度越大
    ani.stiffness = 5000; //剛度系數(勁度系數/彈性系數),剛度系數越大,形變產生的力就越大,運動越快
    ani.damping = 100.0;//阻尼系數,阻止彈簧伸縮的系數,阻尼系數越大,停止越快
    ani.initialVelocity = 5.f;//初始速率,動畫視圖的初始速度大小;速率為正數時,速度方向與運動方向一致,速率為負數時,速度方向與運動方向相反
    ani.duration = ani.settlingDuration;
    ani.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenter.layer addAnimation:ani forKey:@"boundsAni"];
}

動畫效果:

springAni.gif

CAAnimationGroup

使用Group可以將多個動畫合并一起加入到層中,Group中所有動畫并發執行,可以方便地實現需要多種類型動畫的場景。

以實現視圖的position、bounds和opacity改變的組合動畫為例

- (void)groupAni {
    CABasicAnimation * posAni = [CABasicAnimation animationWithKeyPath:@"position"];
    posAni.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
    
    CABasicAnimation * opcAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opcAni.toValue = [NSNumber numberWithFloat:1.0];
    opcAni.toValue = [NSNumber numberWithFloat:0.7];
    
    CABasicAnimation * bodAni = [CABasicAnimation animationWithKeyPath:@"bounds"];
    bodAni.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
    
    CAAnimationGroup * groupAni = [CAAnimationGroup animation];
    groupAni.animations = @[posAni, opcAni, bodAni];
    groupAni.duration = 1.0;
    groupAni.fillMode = kCAFillModeForwards;
    groupAni.removedOnCompletion = NO;
    groupAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenter.layer addAnimation:groupAni forKey:@"groupAni"];
}

動畫效果:

groupAni.gif

CATransaction

最后講一下事務,在核心動畫里面存在事務(CATransaction)這樣一個概念,它負責協調多個動畫原子更新顯示操作。
  簡單來說事務是核心動畫里面的一個基本的單元,動畫的產生必然伴隨著layer的Animatable屬性的變化,而layer屬性的變化必須屬于某一個事務。
  因此,核心動畫依賴事務。

事務的作用:保證一個或多個layer的一個或多個屬性變化同時進行
  事務分為隱式和顯式:
  1.隱式:沒有明顯調用事務的方法,由系統自動生成事務。比如直接設置一個layer的position屬性,則會在當前線程自動生成一個事務,并在下一個runLoop中自動commit事務。
  2.顯式:明顯調用事務的方法([CATransaction begin]和[CATransaction commit])。

CA事務的可設置屬性(會覆蓋隱式動畫的設置):

    animationDuration:動畫時間
    animationTimingFunction:動畫時間曲線
    disableActions:是否關閉動畫
    completionBlock:動畫執行完畢的回調

事務支持嵌套使用:當最外層的事務commit后動畫才會開始。

使用實例:

    [CATransaction begin];
    [CATransaction setAnimationDuration:2.0];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
//    [CATransaction setDisableActions:YES]; //設置為YES就關閉動畫
    self.subLayer.bounds = self.centerShow.layer.bounds;
    [CATransaction commit];

注意:只有非root layer才有隱式動畫,如果你是直接設置self.cartCenter.layer.bounds = self.centerShow.layer.bounds;是不會有動畫效果的。

本文demo地址:

https://github.com/DaMingShen/CAAnimation

Next

接下來將更新iOS繪圖引擎Quartz2D

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

推薦閱讀更多精彩內容

  • Demo代碼https://github.com/ZeMingXianSheng/CABasicAnimation...
    kakukeme閱讀 697評論 0 50
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,548評論 6 30
  • 1、什么是核心動畫 Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API,無論在iOS系統...
    我是七月閱讀 290評論 0 1
  • 在iOS實際開發中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,136評論 1 23
  • 這是我的第一篇簡書文章,希望大家多多關注 關于核心動畫的內容網上有很多,但是都不全或者沒有demo。我參考了下結合...
    BossMoney閱讀 514評論 0 4