iOS動畫(Core Animation)

1.核心動畫(Core Animation):強大的動畫API

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


核心動畫位于UIKit的下一層,相比UIView動畫,它可以實現更復雜的動畫效果。核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應事件)。實際上,每一個view都有其對應的layer,這個layer是root layer:給view加上動畫,本質上是對其layer進行操作,layer包含了各種支持動畫的屬性,動畫則包含了屬性變化的值、變化的速度、變化的時間等等,兩者結合產生動畫的過程。核心動畫和UIView動畫的對比:UIView動畫可以看成是對核心動畫的封裝,和UIView動畫不同的是,通過核心動畫改變layer的狀態(比如position),動畫執行完畢后實際上是沒有改變的(表面上看起來已改變)。

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

1)性能強大,使用硬件加速,可以同時向多個圖層添加不同的動畫效果

2)接口易用,只需要少量的代碼就可以實現復雜的動畫效果。

3)運行在后臺線程中,在動畫過程中可以響應交互事件(UIView動畫默認動畫過程中不響應交互事件)。

2、核心動畫類的層次結構


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;//動畫結束

1)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"];

}

```

2)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"];

}

(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"];

}

3)CATransition

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

CATransition的重要屬性

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"];

}

4)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"];

}

5)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"];

}

6)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;是不會有動畫效果的。

原文作者: 明仔Su(簡書作者)

原文鏈接:http://www.lxweimin.com/p/d05d19f70bac

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

推薦閱讀更多精彩內容