IOS动画（Core Animation）总结（参考多方文章）

作者: LZM轮回 | 来源:发表于2016-06-05 10:09 被阅读1522次

一、简介
iOS 动画主要是指Core Animation框架。官方使用文档地址为：Core Animation Guide。Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画视图或者其他可视元素，为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数（如开始点的位置和结束点的位置）即可使用Core Animation的动画效果。Core Animation将大部分实际的绘图任务交给了图形硬件来处理，图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑，不会加重CPU的负担而影响程序的运行速度。
二、Core Animation类图以及常用字段
Core Animation类的继承关系图![](http:https://img.haomeiwen.com/i1663804/9a94cb409695222a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
常用属性duration : 动画的持续时间beginTime : 动画的开始时间repeatCount : 动画的重复次数autoreverses : 执行的动画按照原动画返回执行timingFunction : 控制动画的显示节奏系统提供五种值选择，分别是：
kCAMediaTimingFunctionLinear 线性动画kCAMediaTimingFunctionEaseIn 先慢后快（慢进快出）kCAMediaTimingFunctionEaseOut 先块后慢（快进慢出）kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢kCAMediaTimingFunctionDefault 默认，也属于中间比较快delegate ：动画代理。能够检测动画的执行和结束。
?
1
2
3
4

<code
class
=
"hljs objectivec has-numbering"

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

@interface
 <span
class
=
"hljs-title"

NSObject ()

(<span
class
=
"hljs-keyword"

void
)animationDidStart:(CAAnimation *)anim;

(<span
class
=
"hljs-keyword"

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

BOOL)flag;

<span
class
=
"hljs-keyword"

@end
</code>

path：关键帧动画中的执行路径type ：过渡动画的动画类型，系统提供了四种过渡动画。- kCATransitionFade 渐变效果- kCATransitionMoveIn 进入覆盖效果- kCATransitionPush 推出效果- kCATransitionReveal 揭露离开效果subtype : 过渡动画的动画方向- kCATransitionFromRight 从右侧进入- kCATransitionFromLeft 从左侧进入- kCATransitionFromTop 从顶部进入- kCATransitionFromBottom 从底部进入
三、IOS动画的调用方式
第一种：UIView 代码块调用
?
1
2
3
4
5
6

<code
class
=
"hljs avrasm has-numbering"

_demoView = CGRectMake(<span
class
=
"hljs-number"

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

2
-<span
class
=
"hljs-number"

50
, <span
class
=
"hljs-number"

50
)<span
class
=
"hljs-comment"

;

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

1.0
f animations:^{

_demoView<span
class
=
"hljs-preprocessor"

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

2
-<span
class
=
"hljs-number"

50
, <span
class
=
"hljs-number"

50
)<span
class
=
"hljs-comment"

;

} completion:^(BOOL finished) {

_demoView<span
class
=
"hljs-preprocessor"

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

2
-<span
class
=
"hljs-number"

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

2
-<span
class
=
"hljs-number"

50
, <span
class
=
"hljs-number"

50
)<span
class
=
"hljs-comment"

;

}]<span
class
=
"hljs-comment"

;</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
class
=
"hljs-comment"

;

anima<span
class
=
"hljs-preprocessor"

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

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

2
-<span
class
=
"hljs-number"

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

;

anima<span
class
=
"hljs-preprocessor"

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

2
-<span
class
=
"hljs-number"

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

;

anima<span
class
=
"hljs-preprocessor"

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

1.0
f<span
class
=
"hljs-comment"

;

[_demoView<span
class
=
"hljs-preprocessor"

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

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

;</code>

四、IOS动画的使用
4.1：基础动画（CABaseAnimation）
重要属性fromValue ： keyPath对应的初始值toValue ： keyPath对应的结束值基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、透明度、缩放、旋转、背景色等等。效果演示：![](http:https://img.haomeiwen.com/i1663804/52bc0645f8dabbeb.gif?imageMogr2/auto-orient/strip)位移动画代码演示：
?
1
2
3
4
5
6
7
8

<code
class
=
"hljs avrasm has-numbering"

//使用CABasicAnimation创建基础动画

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

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

;

anima<span
class
=
"hljs-preprocessor"

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

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

2
-<span
class
=
"hljs-number"

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

;

anima<span
class
=
"hljs-preprocessor"

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

2
-<span
class
=
"hljs-number"

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

;

anima<span
class
=
"hljs-preprocessor"

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

1.0
f<span
class
=
"hljs-comment"

;

//anima.fillMode = kCAFillModeForwards;

//anima.removedOnCompletion = NO;

[_demoView<span
class
=
"hljs-preprocessor"

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

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

;</code>

注意点如果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没有设置的时候,各个关键帧的时间是平分的。效果演示：![](http:https://img.haomeiwen.com/i1663804/5979589fde6eac46.gif?imageMogr2/auto-orient/strip)圆形路径动画代码演示：
?
1
2
3
4
5

<code
class
=
"hljs avrasm has-numbering"

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

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

;

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

2
-<span
class
=
"hljs-number"

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

2
-<span
class
=
"hljs-number"

100
, <span
class
=
"hljs-number"

200
, <span
class
=
"hljs-number"

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

;

anima<span
class
=
"hljs-preprocessor"

.path = path

anima<span
class
=
"hljs-preprocessor"

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

2.0
f<span
class
=
"hljs-comment"

;

[_demoView<span
class
=
"hljs-preprocessor"

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

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

;</code>

说明：CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation
4.3：组动画（CAAnimationGroup）
CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行。重要属性animations : 用来保存一组动画对象的NSArray效果演示：![](http:https://img.haomeiwen.com/i1663804/a0467522a28c20cd.gif?imageMogr2/auto-orient/strip)组动画代码演示：
?
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 = [CAKeyframeAnimation animationWithKeyPath:position"
];

NSValue <span
class
=
"hljs-variable"

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

50
)];

NSValue <span
class
=
"hljs-variable"

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

50
)];

NSValue <span
class
=
"hljs-variable"

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

50
)];

NSValue <span
class
=
"hljs-variable"

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

2
/
3
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

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

2
/
3
, SCREEN_HEIGHT/
2

50
)];

NSValue <span
class
=
"hljs-variable"

*value5 = [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 = [CABasicAnimation animationWithKeyPath:transform.scale"
];

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

0
.<span
class
=
"hljs-number"

8
f];

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

2.0
f];

<span
class
=
"hljs-regexp"

//旋转动画

CABasicAnimation <span
class
=
"hljs-variable"

*anima3 = [CABasicAnimation animationWithKeyPath:transform.rotation"
];

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

4
];

//组动画

CAAnimationGroup <span
class
=
"hljs-variable"

*groupAnimation = [CAAnimationGroup animation];

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

groupAnimation.duration =
4
.0f;

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

@
"groupAnimation"
];</code>

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：动画终点(在整体动画的百分比)
效果演示：![](http:https://img.haomeiwen.com/i1663804/79a6567c8fefa6bd.gif?imageMogr2/auto-orient/strip)
4.5：综合案例
4.5.1 ：仿Path菜单效果
效果演示：![](http:https://img.haomeiwen.com/i1663804/680d094cb9fd8907.gif?imageMogr2/auto-orient/strip)
动画解析：1、点击红色按钮，红色按钮旋转。（旋转动画）2、黑色小按钮依次弹出，并且带有旋转效果。（位移动画、旋转动画、组动画）3、点击黑色小按钮，其他按钮消失，被点击的黑色按钮变大变淡消失。（缩放动画、alpha动画、组动画）博主的话：代码过多，这里不做演示。文章最后提供代码下载地址。
4.5.2：仿钉钉菜单效果
效果演示：![](http:https://img.haomeiwen.com/i1663804/3887c5a7eed9097c.gif?imageMogr2/auto-orient/strip)看上去挺炫的，其实实现很简单，就是位移动画+缩放动画。
4.5.3：点赞烟花效果动画
效果演示：![](http:https://img.haomeiwen.com/i1663804/65f020f1a577f9e2.gif?imageMogr2/auto-orient/strip)这里其实只有按钮变大效果使用的缩放动画。烟花效果使用的是一种比较特殊的动画–粒子动画。一个粒子系统一般有两部分组成：1、CAEmitterCell：可以看作是单个粒子的原型（例如，一个单一的粉扑在一团烟雾）。当散发出一个粒子，UIKit根据这个发射粒子和定义的基础上创建一个随机粒子。此原型包括一些属性来控制粒子的图片，颜色，方向，运动，缩放比例和生命周期。2、CAEmitterLayer：主要控制发射源的位置、尺寸、发射模式、发射源的形状等等。以上两个类的属性还是比较多的，这里就不细讲了。大家可以google一下，详细的了解吧。
五、总结
任何复杂的动画其实都是由一个个简单的动画组装而成的，只要我们善于分解和组装，我们就能实现出满意的效果。动画其实也不是那么难。
六、下载地址
github下载地址：https://github.com/yixiangboy/IOSAnimationDemogithub：https://github.com/yixiangboy

iOS动画效果与上文相互结合：

理论 UIview VS UIlayer
UIView只是CALyer之上的封装，更准确的来说，UIView是CALyer的简版封装，加上事件处理的集合类。 CALayer是QuartzCore库内的类，是iOS上最基本的绘制单元。其次，我们知道iOS平台的Cocoa Touch 是源于OS X平台的Cocoa)，是在Cocoa的基础上添加了适用于移动手机设备的手势识别、动画等特性；但从底层实现上来说，Cocoa Touch与Cocoa共用一套底层的库，其中就包括了QuartCore.framework；但QuartCore.framework一开始就是为OS X设计的，所以其中有部分特性是不适合做移动设备开发的，比如最重要的坐标系统。因此，我们也就不难理解为何UIView/NSView在CALayer上做了一层封装。
基于UIView实现的动画
简单的Block动画

1457663935860701.jpg
UIView

1457664573232625.jpg
弹性动画

1457663850180187.jpg
关键帧动画（中间可以添加合适多的帧来做不同的衔接动画）

1457663842114629.jpg
CALayer动画
1457663689886006.png
常用属性
duration : 动画的持续时间
beginTime : 动画的开始时间
repeatCount : 动画的重复次数
autoreverses : 执行的动画按照原动画返回执行
timingFunction : 控制动画的显示节奏，系统提供五种值选择，分别是

kCAMediaTimingFunctionLinear 线性动画
kCAMediaTimingFunctionEaseIn 先慢后快（慢进快出）
kCAMediaTimingFunctionEaseOut 先块后慢（快进慢出）
kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
kCAMediaTimingFunctionDefault 默认，也属于中间比较快
path：关键帧动画中的执行路径
type：过渡动画的动画类型，系统提供了四种过渡动画：
kCATransitionFade 渐变效果
kCATransitionMoveIn 进入覆盖效果
kCATransitionPush 推出效果
kCATransitionReveal 揭露离开效果
subtype : 过渡动画的动画方向
kCATransitionFromRight 从右侧进入
kCATransitionFromLeft 从左侧进入
kCATransitionFromTop 从顶部进入
kCATransitionFromBottom 从底部进入
基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、透明度、缩放、旋转、背景色等等。重要属性 fromValue ： keyPath对应的初始值 toValue ： keyPath对应的结束值。
基础动画（CABaseAnimation） 0:1 1:0 实现下拉剪头的展开和收起

1457663394494561.jpg
关键帧动画（CAKeyframeAnimation） CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值（fromValue）变换成另一个数值（toValue）,而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。重要属性 values ：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧 path ：可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略。 keyTimes ：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。
组合动画：