一、簡介
iOS 動畫主要是指Core Animation框架酥泛。官方使用文檔地址為：Core Animation Guide豫尽。Core Animation是IOS和OS X平臺上負責圖形渲染與動畫的基礎(chǔ)框架老翘。Core Animation可以作用與動畫視圖或者其他可視元素缅叠，為你完成了動畫所需的大部分繪幀工作。你只需要配置少量的動畫參數(shù)（如開始點的位置和結(jié)束點的位置）即可使用Core Animation的動畫效果臀脏。Core Animation將大部分實際的繪圖任務(wù)交給了圖形硬件來處理劝堪，圖形硬件會加速圖形渲染的速度。這種自動化的圖形加速技術(shù)讓動畫擁有更高的幀率并且顯示效果更加平滑谁榜，不會加重CPU的負擔而影響程序的運行速度幅聘。
二、Core Animation類圖以及常用字段
Core Animation類的繼承關(guān)系圖
常用屬性duration : 動畫的持續(xù)時間beginTime : 動畫的開始時間repeatCount : 動畫的重復次數(shù)autoreverses : 執(zhí)行的動畫按照原動畫返回執(zhí)行timingFunction : 控制動畫的顯示節(jié)奏系統(tǒng)提供五種值選擇窃植，分別是：
kCAMediaTimingFunctionLinear 線性動畫kCAMediaTimingFunctionEaseIn 先慢后快（慢進快出）kCAMediaTimingFunctionEaseOut 先塊后慢（快進慢出）kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢kCAMediaTimingFunctionDefault 默認帝蒿，也屬于中間比較快delegate ： 動畫代理。能夠檢測動畫的執(zhí)行和結(jié)束巷怜。
?
1
2
3
4

<code
class
=
"hljs objectivec has-numbering"

<span
class
=
"hljs-class"
<span
class
=
"hljs-keyword"

@interface
</span> <span
class
=
"hljs-title"

NSObject</span> (<span
class
=
"hljs-title"
CAAnimationDelegate</span>)</span>

• (<span
  class
  =
  "hljs-keyword"

void
</span>)animationDidStart:(CAAnimation *)anim;

• (<span
  class
  =
  "hljs-keyword"

void
</span>)animationDidStop:(CAAnimation *)anim finished:(<span
class
=
"hljs-built_in"

BOOL</span>)flag;

<span
class
=
"hljs-keyword"

@end
</span></code>

path：關(guān)鍵幀動畫中的執(zhí)行路徑type ： 過渡動畫的動畫類型葛超，系統(tǒng)提供了四種過渡動畫。- kCATransitionFade 漸變效果- kCATransitionMoveIn 進入覆蓋效果- kCATransitionPush 推出效果- kCATransitionReveal 揭露離開效果subtype : 過渡動畫的動畫方向- kCATransitionFromRight 從右側(cè)進入- kCATransitionFromLeft 從左側(cè)進入- kCATransitionFromTop 從頂部進入- kCATransitionFromBottom 從底部進入
三延塑、IOS動畫的調(diào)用方式
第一種：UIView 代碼塊調(diào)用
?
1
2
3
4
5
6

<code
class
=
"hljs avrasm has-numbering"

_demoView<span
class
=
"hljs-preprocessor"
.frame</span> = CGRectMake(<span
class
=
"hljs-number"

0
</span>, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

50
</span>, <span
class
=
"hljs-number"

50
</span>, <span
class
=
"hljs-number"

50
</span>)<span
class
=
"hljs-comment"

;</span>

[UIView animateWithDuration:<span
class
=
"hljs-number"

1.0
</span>f animations:^{

_demoView<span
class
=
"hljs-preprocessor"

.frame</span> = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

50
</span>, <span
class
=
"hljs-number"

50
</span>, <span
class
=
"hljs-number"

50
</span>)<span
class
=
"hljs-comment"

;</span>

} completion:^(BOOL finished) {

_demoView<span
class
=
"hljs-preprocessor"

.frame</span> = CGRectMake(SCREEN_WIDTH/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

25
</span>, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

50
</span>, <span
class
=
"hljs-number"

50
</span>, <span
class
=
"hljs-number"

50
</span>)<span
class
=
"hljs-comment"

;</span>

}]<span
class
=
"hljs-comment"

;</span></code>

第二種：UIView [begin commit]模式
?
1
2
3
4
5
6

<code>_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];

</code>

第三種：使用Core Animation中的類
?
1
2
3
4
5

<code
class
=
"hljs avrasm has-numbering"

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@<span
class
=
"hljs-string"

"position"
</span>]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.fromValue</span> = [NSValue valueWithCGPoint:CGPointMake(<span
class
=
"hljs-number"

0
</span>, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

75
</span>)]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.toValue</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

75
</span>)]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.duration</span> = <span
class
=
"hljs-number"

1.0
</span>f<span
class
=
"hljs-comment"

;</span>

[_demoView<span
class
=
"hljs-preprocessor"

.layer</span> addAnimation:anima forKey:@<span
class
=
"hljs-string"

"positionAnimation"
</span>]<span
class
=
"hljs-comment"

;</span></code>

四绣张、IOS動畫的使用
4.1：基礎(chǔ)動畫（CABaseAnimation）
重要屬性fromValue ： keyPath對應(yīng)的初始值toValue ： keyPath對應(yīng)的結(jié)束值基礎(chǔ)動畫主要提供了對于CALayer對象中的可變屬性進行簡單動畫的操作。比如：位移关带、透明度侥涵、縮放、旋轉(zhuǎn)宋雏、背景色等等芜飘。效果演示：位移動畫代碼演示：
?
1
2
3
4
5
6
7
8

<code
class
=
"hljs avrasm has-numbering"

//使用CABasicAnimation創(chuàng)建基礎(chǔ)動畫

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@<span
class
=
"hljs-string"

"position"
</span>]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.fromValue</span> = [NSValue valueWithCGPoint:CGPointMake(<span
class
=
"hljs-number"

0
</span>, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

75
</span>)]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.toValue</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

75
</span>)]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.duration</span> = <span
class
=
"hljs-number"

1.0
</span>f<span
class
=
"hljs-comment"

;</span>

//anima<span class="hljs-preprocessor">.fillMode</span> = kCAFillModeForwards<span class="hljs-comment">;</span>

//anima<span class="hljs-preprocessor">.removedOnCompletion</span> = NO<span class="hljs-comment">;</span>

[_demoView<span
class
=
"hljs-preprocessor"

.layer</span> addAnimation:anima forKey:@<span
class
=
"hljs-string"

"positionAnimation"
</span>]<span
class
=
"hljs-comment"

;</span></code>

注意點如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動畫執(zhí)行完畢后磨总，圖層會保持顯示動畫執(zhí)行后的狀態(tài)嗦明。但在實質(zhì)上，圖層的屬性值還是動畫執(zhí)行前的初始值蚪燕，并沒有真正被改變娶牌。
4.2：關(guān)鍵幀動畫（CAKeyframeAnimation）
CAKeyframeAnimation和CABaseAnimation都屬于CAPropertyAnimatin的子類奔浅。CABaseAnimation只能從一個數(shù)值（fromValue）變換成另一個數(shù)值（toValue）,而CAKeyframeAnimation則會使用一個NSArray保存一組關(guān)鍵幀。重要屬性values ： 就是上述的NSArray對象诗良。里面的元素稱為”關(guān)鍵幀”(keyframe)汹桦。動畫對象會在指定的時間(duration)內(nèi)，依次顯示values數(shù)組中的每一個關(guān)鍵幀path ： 可以設(shè)置一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動鉴裹。path只對CALayer的anchorPoint和position起作用营勤。如果你設(shè)置了path，那么values將被忽略壹罚。keyTimes ： 可以為對應(yīng)的關(guān)鍵幀指定對應(yīng)的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應(yīng)values中的每一幀.當keyTimes沒有設(shè)置的時候,各個關(guān)鍵幀的時間是平分的。效果演示：圓形路徑動畫代碼演示：
?
1
2
3
4
5

<code
class
=
"hljs avrasm has-numbering"

CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@<span
class
=
"hljs-string"

"position"
</span>]<span
class
=
"hljs-comment"

;</span>

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

100
</span>, SCREEN_HEIGHT/<span
class
=
"hljs-number"

2
</span>-<span
class
=
"hljs-number"

100
</span>, <span
class
=
"hljs-number"

200
</span>, <span
class
=
"hljs-number"

200
</span>)]<span
class
=
"hljs-comment"

;</span>

anima<span
class
=
"hljs-preprocessor"

.path</span> = path<span
class
=
"hljs-preprocessor"
.CGPath</span><span
class
=
"hljs-comment"
;</span>

anima<span
class
=
"hljs-preprocessor"

.duration</span> = <span
class
=
"hljs-number"

2.0
</span>f<span
class
=
"hljs-comment"

;</span>

[_demoView<span
class
=
"hljs-preprocessor"

.layer</span> addAnimation:anima forKey:@<span
class
=
"hljs-string"

"pathAnimation"
</span>]<span
class
=
"hljs-comment"

;</span></code>

說明：CABasicAnimation可看做是最多只有2個關(guān)鍵幀的CAKeyframeAnimation
4.3：組動畫（CAAnimationGroup）
CAAnimation的子類寿羞，可以保存一組動畫對象猖凛，將CAAnimationGroup對象加入層后，組中所有動畫對象可以同時并發(fā)運行绪穆。重要屬性animations : 用來保存一組動畫對象的NSArray效果演示：組動畫代碼演示：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<code
class
=
"hljs perl has-numbering"

CAKeyframeAnimation <span
class
=
"hljs-variable"
*anima1</span> = [CAKeyframeAnimation animationWithKeyPath:<span
class
=
"hljs-variable"
@
"</span>position<span class="
hljs-string
">"
];

NSValue <span
class
=
"hljs-variable"

*value0</span> = [NSValue valueWithCGPoint:CGPointMake(
0
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

*value1</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/
3
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

*value2</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/
3
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

*value3</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH<span
class
=
"hljs-variable"

2
</span>/
3
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

*value4</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH<span
class
=
"hljs-variable"

2
</span>/
3
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

*value5</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/
2

50
)];

anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];

//縮放動畫

CABasicAnimation <span
class
=
"hljs-variable"

*anima2</span> = [CABasicAnimation animationWithKeyPath:<span
class
=
"hljs-variable"
@
"</span>transform.scale"
</span>];

anima2.fromValue = [NSNumber numberWithFloat:<span
class
=
"hljs-number"

0
</span>.<span
class
=
"hljs-number"

8
</span>f];

anima2.toValue = [NSNumber numberWithFloat:<span
class
=
"hljs-number"

2.0
</span>f];

<span
class
=
"hljs-regexp"

//</span>旋轉(zhuǎn)動畫

CABasicAnimation <span
class
=
"hljs-variable"

*anima3</span> = [CABasicAnimation animationWithKeyPath:<span
class
=
"hljs-variable"
@
"</span>transform.rotation<span class="
hljs-string
">"
];

anima3.toValue = [NSNumber numberWithFloat:M_PI<span
class
=
"hljs-variable"

4
</span>];

//組動畫

CAAnimationGroup <span
class
=
"hljs-variable"

*groupAnimation</span> = [CAAnimationGroup animation];

groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil];

groupAnimation.duration =
4
.0f;

[_demoView.layer addAnimation:groupAnimation forKey:<span
class
=
"hljs-variable"

@
"</span>groupAnimation"
</span>];</code>

4.4：過渡動畫（CATransition）
CAAnimation的子類辨泳，用于做過渡動畫或者轉(zhuǎn)場動畫，能夠為層提供移出屏幕和移入屏幕的動畫效果玖院。重要屬性type：動畫過渡類型Apple 官方的SDK其實只提供了四種過渡效果菠红。- kCATransitionFade 漸變效果- kCATransitionMoveIn 進入覆蓋效果- kCATransitionPush 推出效果- kCATransitionReveal 揭露離開效果私有API提供了其他很多非常炫的過渡動畫，比如@”cube”难菌、@”suckEffect”试溯、@”oglFlip”镊尺、 @”rippleEffect”足淆、@”pageCurl”、@”pageUnCurl”讼撒、@”cameraIrisHollowOpen”燎窘、@”cameraIrisHollowClose”等摹闽。注意點私有api，不建議開發(fā)者們使用褐健。因為蘋果公司不提供維護付鹿，并且有可能造成你的app審核不通過。
subtype：動畫過渡方向
kCATransitionFromRight 從右側(cè)進入kCATransitionFromLeft 從左側(cè)進入kCATransitionFromTop 從頂部進入kCATransitionFromBottom 從底部進入startProgress：動畫起點(在整體動畫的百分比)endProgress：動畫終點(在整體動畫的百分比)
效果演示：
4.5：綜合案例
4.5.1 ： 仿Path菜單效果
效果演示：
動畫解析：1蚜迅、點擊紅色按鈕舵匾，紅色按鈕旋轉(zhuǎn)。（旋轉(zhuǎn)動畫）2慢叨、黑色小按鈕依次彈出纽匙，并且?guī)в行D(zhuǎn)效果。（位移動畫拍谐、旋轉(zhuǎn)動畫烛缔、組動畫）3馏段、點擊黑色小按鈕，其他按鈕消失践瓷，被點擊的黑色按鈕變大變淡消失院喜。（縮放動畫、alpha動畫晕翠、組動畫）博主的話：代碼過多喷舀，這里不做演示。文章最后提供代碼下載地址淋肾。
4.5.2： 仿釘釘菜單效果
效果演示：看上去挺炫的硫麻，其實實現(xiàn)很簡單，就是位移動畫+縮放動畫樊卓。
4.5.3： 點贊煙花效果動畫
效果演示：這里其實只有按鈕變大效果使用的縮放動畫拿愧。煙花效果 使用的是一種比較特殊的動畫–粒子動畫。一個粒子系統(tǒng)一般有兩部分組成：1碌尔、CAEmitterCell：可以看作是單個粒子的原型（例如，一個單一的粉撲在一團煙霧）唾戚。當散發(fā)出一個粒子柳洋，UIKit根據(jù)這個發(fā)射粒子和定義的基礎(chǔ)上創(chuàng)建一個隨機粒子。此原型包括一些屬性來控制粒子的圖片叹坦，顏色熊镣，方向，運動立由，縮放比例和生命周期轧钓。2、CAEmitterLayer：主要控制發(fā)射源的位置锐膜、尺寸毕箍、發(fā)射模式、發(fā)射源的形狀等等道盏。以上兩個類的屬性還是比較多的而柑，這里就不細講了。大家可以google一下荷逞，詳細的了解吧媒咳。
五、總結(jié)
任何復雜的動畫其實都是由一個個簡單的動畫組裝而成的种远，只要我們善于分解和組裝涩澡，我們就能實現(xiàn)出滿意的效果。動畫其實也不是那么難坠敷。
六妙同、下載地址
github下載地址：https://github.com/yixiangboy/IOSAnimationDemogithub：https://github.com/yixiangboy

iOS動畫效果與上文相互結(jié)合：

理論 UIview VS UIlayer
UIView只是CALyer之上的封裝射富，更準確的來說，UIView是CALyer的簡版封裝粥帚，加上事件處理的集合類胰耗。 CALayer是QuartzCore庫內(nèi)的類，是iOS上最基本的繪制單元芒涡。其次柴灯，我們知道iOS平臺的Cocoa Touch 是源于OS X平臺的Cocoa)，是在Cocoa的基礎(chǔ)上添加了適用于移動手機設(shè)備的手勢識別费尽、動畫等特性赠群；但從底層實現(xiàn)上來說，Cocoa Touch與Cocoa共用一套底層的庫旱幼，其中就包括了QuartCore.framework乎串；但QuartCore.framework一開始就是為OS X設(shè)計的，所以其中有部分特性是不適合做移動設(shè)備開發(fā)的速警，比如最重要的坐標系統(tǒng)。因此鸯两，我們也就不難理解為何UIView/NSView在CALayer上做了一層封裝闷旧。
基于UIView實現(xiàn)的動畫
簡單的Block動畫

1457663935860701.jpg

1457664573232625.jpg

1457663850180187.jpg

1457663842114629.jpg

1457663689886006.png

kCAMediaTimingFunctionLinear 線性動畫
kCAMediaTimingFunctionEaseIn 先慢后快（慢進快出）
kCAMediaTimingFunctionEaseOut 先塊后慢（快進慢出）
kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
kCAMediaTimingFunctionDefault 默認忙灼，也屬于中間比較快
path：關(guān)鍵幀動畫中的執(zhí)行路徑
type：過渡動畫的動畫類型，系統(tǒng)提供了四種過渡動畫：
kCATransitionFade 漸變效果
kCATransitionMoveIn 進入覆蓋效果
kCATransitionPush 推出效果
kCATransitionReveal 揭露離開效果
subtype : 過渡動畫的動畫方向
kCATransitionFromRight 從右側(cè)進入
kCATransitionFromLeft 從左側(cè)進入
kCATransitionFromTop 從頂部進入
kCATransitionFromBottom 從底部進入
基礎(chǔ)動畫主要提供了對于CALayer對象中的可變屬性進行簡單動畫的操作钝侠。比如：位移该园、透明度、縮放帅韧、旋轉(zhuǎn)里初、背景色等等。 重要屬性 fromValue ： keyPath對應(yīng)的初始值 toValue ： keyPath對應(yīng)的結(jié)束值忽舟。
基礎(chǔ)動畫（CABaseAnimation） 0:1 1:0 實現(xiàn)下拉剪頭的展開和收起

1457663394494561.jpg

1457663422759611.jpg

1457663243155666.jpg

1457663258881584.jpg

1457662432283106.jpg

1457663271950660.gif

1457662577168149.png

1457662590764759.png