iOS 核心动画—「Core Animation动画基础框架」

Write in the first

---

iOS 动画主要是指 Core Animation 框架。官方使用文档地址为: Core Animation Guide。

Core Animation 是iOS和macOS平台上负责图形渲染与动画的基础框架。Core Animation 可以作用与动画视图或者其他可视元素，为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数（如开始点的位置和结束点的位置）即可使用 Core Animation 的动画效果。

Core Animation 将大部分实际的绘图任务交给了图形硬件来处理，图形硬件会加速图形渲染的速度。|这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑，不会加重CPU的负担而影响程序的运行速度。

本篇文章主要从【iOS动画 Core Animation】学习总结。
在「时间 & 知识 」有限内，总结的文章难免有「未全、不足 」的地方，还望各位好友指出，以提高文章质量。

目录：

1. 系统自带的 animationImages
2. UIView代码块加Block
3. UIView [begin commit]模式
4. 使用CoreAnimation中的类
   1.CATransition 转场动画
   1.CATransaction动画事务
   2.CABasicAnimation 基础动画
   2.CASpringAnimation 弹簧动画
   3.CAKeyframeAnimation 关键帧动画
   4.CAAnimationGroup 动画组
   5.AnimationWithKeyPath的值
5. 物理动效(重力、碰撞、吸附、推力、关联)
   1.UICollisionBehavior碰撞
   2.UISnapBehavior吸附
   3.UIPushBehavior推力
   4.UIAttachmentBehavior关联
6. 粒子系统
7. facebook pop动画

iOS动画调用方式

1.系统自带的 animationImages

UIImageView *imageView;
imageView.animationImages = @[image1,image2...];
[imageView startAnimating];
[imageView stopAnimating];

2.UIView代码块加Block

/**
 Duration 动画持续时间
 animations 动画过程
 */
[UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#>];

// 执行动画 和 动画完成的回调
[UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

/**
 delay 等待时间
 options 动画类型
 */
[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

/**
 弹性动画
 damping 阻尼，范围0-1，阻尼越接近于0，弹性效果越明显
 velocity 弹性复位的速度
 */
[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

// 关键帧动画
[UIView animateKeyframesWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewKeyframeAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

3.UIView [begin commit]模式

#pragma mark - 使用UIView [begin,commit]模式
- (void)uiViewAnimation {
    // 可以嵌套但是必须成对出现
    UIViewAnimationTransition type = UIViewAnimationTransitionNone;
    [UIView beginAnimations:nil context:nil];
    // 动画的持续时间
    [UIView setAnimationDuration:1];
    // 动画类型
    [UIView setAnimationTransition:type forView:_redView cache:YES];

    // 动画代理
    //[UIView setAnimationDelegate:self];
    //[UIView setAnimationWillStartSelector:@selector(annimationStart)];
    //[UIView setAnimationDidStopSelector:@selector(annimationStop)];

    [UIView commitAnimations];
}

- (void)animationDidStart:(CAAnimation *)anim {
    NSLog(@"%s, line = %d",__FUNCTION__,__LINE__);
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    NSLog(@"%s, line = %d",__FUNCTION__,__LINE__);
}

4.使用CoreAnimation中的类

1.CATransition 转场动画

CATransition属性	描述
type	过渡的类型
subType	过渡的方向
startProgress	动画起点(在整体动画的百分比)
endProgress	动画终点(在整体动画的百分比)
addAnimation: forKey:	把转场动画添加到layer上

创建步骤
1.创建动画对象
2.设置转场类型
3.给图层添加动画

示例代码：

#pragma mark - 交叉淡化过渡
-(void)fadeAnimation{
    [self changeShowContens];
    // 1.创建动画对象
    CATransition *anima = [CATransition animation];
    // 2.设置转场类型
    anima.type = kCATransitionFade;// 设置动画的类型
    //anima.type = @"cube";// 设置动画的类型
    anima.subtype = kCATransitionFromRight; // 设置动画的方向
    //anima.startProgress = 0.3;// 设置动画起点
    //anima.endProgress = 0.8;// 设置动画终点
    anima.duration = 1.0f;// 设置动画执行时长
    // 3.给图层添加动画
    [_imageView.layer addAnimation:anima forKey:@"fadeAnimation"];
}

效果：

2.CATransition转场动画过渡类型

在这里我就不用图片了，我就劳动一下吧(图片的不好复制不是吗)，奉上转场效果 api

类型字符串	效果说明	关键字	方向
fade	交叉淡化过渡	YES
push	新视图把旧视图推出去	YES
moveIn	新视图移到旧视图上面	YES
reveal	将旧视图移开,显示下面的新视图	YES
cube	立方体翻滚效果
oglFlip	上下左右翻滚效果
suckEffect	收缩效果,如一块布被抽走		NO
rippleEffect	水滴效果		NO
pageCurl	向上翻页效果
pageUnCurl	向下翻页效果
cameraIrisHollowOpen	相机镜头打开效果		NO
cameraIrisHollowClose	相机镜头关闭效果		NO

动画常用属性	描述
rotation.x	设置为一个NSNumber对象的值是旋转,弧度,x轴。
duration	动画的持续时间
beginTime	动画的开始时间
repeatCount	动画的重复次数
autoreverses	执行的动画按照原动画返回执行
timingFunction	控制动画的显示节奏
	Linear 匀速，EaseIn 先慢后快，EaseOut 先快后慢，EaseInEaseOut 先慢后快再慢，Default 默认中间比较快

3.CATransaction动画事务

事务(CATransaction)负责协调多个动画原子更新的显示操作,是动画里面的一个基本单元，动画的产生必然伴随着layer的Animatable属性的变化，而layer属性的变化必须属于某一个事务。
因此 ，核心动画依赖于事务。
可以通过事物关闭隐式动画:

1、事务的作用：保证一个或多个layer的一个或多个属性变化同时进行。
2、事务的种类：隐式和显示

3、隐式：没有明显调用事务的方法，由系统自动生成事务。比如上面提到的设置一个layer的position属性，则会在当前线程自动生成一个事务，并在下一个runLoop中自动commit.
通过如下方法可以关闭隐式动画的设置:

[CATransaction begin];// 开启事务
[CATransaction setDisableActions:YES];// 关闭隐式动画
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];// 提交事务

4、显示:明显调用事务的方法[CATransaction begin] 和 [CATransaction commit]，必须写在两者之间.

5、CA事务的可设置属性(会覆盖隐式动画的设置)
animationDuration：动画时间
animationTimingFunction：动画时间曲线
disableActions：是否关闭动画
completionBlock：动画执行完毕的回调

事务支持嵌套使用:当最外层的事务commit后动画才会开始。

6、
通过修改layer上的属性产生的动画效果，称之为 隐式动画
通过手动添加动画对象产生的动画，称之为 显式动画

4.CABasicAnimation 基础动画

CABasicAnimation重要属性	描述
fromValue	keyPath对应的初始值
toValue	keyPath对应的结束值
removedOnCompletion	动画完成时,是否删除动画
fillMode	设置让动画效果最后执行状态

基础动画创建步骤
1、初始化动画并设置动画属性
2、设置动画属性初始值（可以省略）、结束值以及其他动画属性
3、给图层添加动画

我们先看下面这个移动动画实例：

#pragma mark - 位移动画
- (void)positionAnimation {

    // 1.创建动画对象并设置动画属性
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];

    // 2.设置动画 初始值(可以省略) 和 结束值
    // 把CGPoint转换成id类型,使用NSValue
    basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, kScreenHeight/2)];
    basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(kScreenWidth- 50, kScreenHeight/2)];
    
    // 设置动画的其他属性值
    // 动画执行时长2秒（默认0.2s)
    basicAnimation.duration = 1.0f;
    // 设置重复次数,HUGE_VALF可看做无穷大
    //basicAnimation.repeatCount = HUGE_VALF;
    // 设置重复时间（重复时间 / 执行时长 = 重复次数)
    //basicAnimation.repeatDuration = 4;
    // 设置延迟执行2秒
    //basicAnimation.beginTime = CACurrentMediaTime() + 2;
    // 动画时间曲线 kCAMediaTimingFunctionLinear 线性变换 平缓
    //basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    // 自动反转(怎么去就怎么回来)
    //basicAnimation.autoreverses = YES;
    // 设置动画代理
    //basicAnimation.delegate = self;

    /**
     如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。(不设置这两个属性值默认回到原始位置)
     2016-06-15 13:15:24.350 iOS常用动画[14625:325800] 动画前X = 137.500000
     2016-06-15 13:15:24.350 iOS常用动画[14625:325800] 动画后X = 137.500000
     */
    //basicAnimation.removedOnCompletion = NO;// 动画完成时,会自动删除动画
    //basicAnimation.fillMode = kCAFillModeForwards;// 设置让动画效果最后执行状态
    
   
    // 3.给图层添加动画（注意key相当于给动画进行命名，以后获得该动画时可以使用此名称获取）
    [self.redView.layer addAnimation:basicAnimation forKey:@"positionAnimation"];
    
    // 移除动画
    //[self.redView.layer removeAnimationForKey:@"positionAnimation"];
    //[self.redView.layer removeAllAnimations];
}

效果：

CASpringAnimation 弹簧动画

属性	描述
mass	质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大
stiffnes	刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快
damping	阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快
initivelocity	初始速率，动画视图的初始速度大小;速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反
settingDuration	结算时间(根据动画相关参数估算弹簧开始运动到停止的时间，动画设置的时间最好根据此时间来设置)

CASpringAnimation和UIView的SpringAnimation对比:
CASpringAnimation 可以设置更多弹簧动画效果的属性，可以实现更复杂的弹簧效果，可以和其他动画组合
UIView的SpringAnimation实际上就是通过CASpringAnimation来实现的。

代码示例：

#pragma mark - 弹簧动画
- (void)springAnimation {
    CASpringAnimation * springAnimation = [CASpringAnimation animationWithKeyPath:@"transform.scale"];

    // 质量,越大弹簧幅度越大
    springAnimation.mass = 10.0;
    // 弹性系数,越大运动越快
    springAnimation.stiffness = 500;
    // 阻尼系数,越大停止越快
    springAnimation.damping = 100.0;
    // 初始速率,正方向相同、负方向相反
    springAnimation.initialVelocity = 30.f;

    springAnimation.duration = springAnimation.settlingDuration;
    springAnimation.toValue = [NSNumber numberWithFloat:1.5];
    //springAnimation.removedOnCompletion = NO;
    //springAnimation.fillMode = kCAFillModeForwards;

    springAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.redView.layer addAnimation:springAnimation forKey:@"boundsAni"];
}

效果：

3.CAKeyframeAnimation 关键帧动画

可以让我们在更细的粒度上控制动画的行为，关键帧动画需要指定几个关键的点，从而让动画沿着这些点运动，这几个点就称之为 关键帧

CAKeyframeAnimation属性	描述
values	指定关键点的值
path	可以设置一个CGPathRef / CGMutablePathRef，让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略.
keyTimes	是走到某一个关键点花费的时间百分比(0～1)，keyTimes中的每一个时间值都对应values中的每一帧(两个数组的个数必须一致)，当keyTimes没有设置的时候,各个关键帧的时间是平分的。
通过 设置不同的属性值values 动画	关键帧动画创建第一种方式
通过 绘制路径path 动画	关键帧动画创建第二种方式

代码示例：

// 角度转弧度
#define angleToRadian(angle) ((angle) / 180.0 * M_PI)

#pragma mark 关键帧动画values
- (void)valuesAnimation {
    // 1.创建动画对象
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

    // 2.设置动画属性值
    //NSValue *value1 = [NSValue valueWithCGPoint:<#(CGPoint)#>];
    animation.values = @[@(angleToRadian(-5)),@(angleToRadian(5)),@(angleToRadian(-5))];
    animation.duration = 1;
    animation.repeatCount = MAXFLOAT;
    //animation.keyTimes = @[@(0.0),@(1),@(0.1)];

    // 如果不用反转,也可以在values里面写
    //animation.autoreverses = YES;

    // 动画结束时的状态（不设置回到原始位置）
    //anim.removedOnCompletion = NO;
    //anim.fillMode = kCAFillModeForwards;

    // 3.给图层添加动画
    [self.iconImage.layer addAnimation:animation forKey:@"valuesAnimation"];
}

代码示例：

#pragma mark 关键帧动画第二种方式
- (void)translationAnimation2 {
    // 1.创建关键帧动画并设置动画属性
    CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    moveAnimation.duration = 2;

    // 2.设置关键帧动画的行进路径（绘制贝塞尔曲线）
    moveAnimation.path = self.path.CGPath;
    
    // 3.添加动画到图层，添加动画后就会执行动画
    [self.ballView.layer addAnimation:moveAnimation forKey:nil];

    // 设置最终的状态(不设置就是回到原始位置)
    self.ballView.layer.position = CGPointMake(330, 200);
}

// 绘制贝塞尔曲线
- (void)drawRect:(CGRect)rect {
    self.path = [[UIBezierPath alloc]init];
    [[UIColor redColor] setStroke];
    self.path.lineWidth = 5;
    
    [self.path moveToPoint:CGPointMake(30, 200)];
    [self.path addCurveToPoint:CGPointMake(330, 200) controlPoint1:CGPointMake(100, 50) controlPoint2:CGPointMake(200, 300)];
    [self.path stroke];
}

效果：

4.CAAnimationGroup 动画组

CAAnimationGroup属性	描述
animations	用来保存一组动画对象的NSArray
CFTimeInterval	时间间隔

代码示例：

#pragma mark 动画组(同时)
- (void)groupAnimation1 {
    // 位移动画
    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, kScreenHeight/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(kScreenWidth/3, kScreenHeight/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kScreenWidth/3, kScreenHeight/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kScreenWidth*2/3, kScreenHeight/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(kScreenWidth*2/3, kScreenHeight/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(kScreenWidth, kScreenHeight/2-50)];
    animation1.values = @[value0,value1,value2,value3,value4,value5];

    // 缩放动画
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation2.fromValue = [NSNumber numberWithFloat:0.8f];
    animation2.toValue = [NSNumber numberWithFloat:2.0f];

    // 旋转动画
    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    animation3.toValue = [NSNumber numberWithFloat:M_PI *4];

    // 创建动画组
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = @[animation1,animation2,animation3];
    groupAnimation.duration = 4;
    [self.redView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];
}

效果：

5.AnimationWithKeyPath的值

在这里我就不用图片了，我就劳动一下吧(图片的不好复制不是吗)，福利奉上转场效果 key paths
Transform field value key paths

Field Key Path	Description
rotation.x	设置为一个NSNumber对象的值是旋转,弧度,x轴。
rotation.y	设置为一个NSNumber对象的值是旋转,弧度,y轴。
rotation.z	设置为一个NSNumber对象的值是旋转,弧度,z轴。
rotation	设置为一个NSNumber对象的值是旋转,弧度,z轴。这个字段是一样设置旋转。z域。
scale.x	设置为一个NSNumber对象的值是x轴的比例因子。
scale.y	设置为一个NSNumber对象的值是y轴的比例因子。
scale.z	设置为一个NSNumber对象的值是z轴的比例因子。
scale	设置为一个NSNumber对象的值是所有三个规模因素的平均值。
translation.x	设置为一个NSNumber对象的值是沿着x轴。
translation.y	设置为一个NSNumber对象的值沿y轴。
translation.z	设置为一个NSNumber对象的值沿z轴。
translation	设置为一个NSValue对象包含一个NSSize或CGSize数据类型。数据类型表示将在x和y轴。

核心动画综合案例

5.物理动效(重力、碰撞、吸附、推力、关联)

ios7之后提供的物理动效
UIGravityBehavior 重力
UICollisionBehavior 碰撞
UISnapBehavior    吸附
UIPushBehavior    推力
UIAttachmentBehavior 关联

以下示例，我们就直接来代码，看效果了，中间会有部分解释；

1.UICollisionBehavior碰撞，示例：模仿重力 + 碰撞 的行为

// 先指定一个参考视图来初始化animator
self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

#pragma mark 模仿重力 和 碰撞效果
- (void)animations {
    // 添加重力
    UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.ballView]];
    // 添加碰撞
    UICollisionBehavior *collision = [[UICollisionBehavior alloc]initWithItems:@[self.ballView]];
    // 把参考视图的边界作为我的碰撞边界
    collision.translatesReferenceBoundsIntoBoundary = YES;
    
    // 添加一个自定义的行为，修改动效参数
    UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc]initWithItems:@[self.ballView]];
    /**
     弹性系数
     density 1.0             密度
     elasticity 0.0          弹性
     friction 0.0            摩擦
     resistance 0.0          阻力
     */
    itemBehavior.elasticity = 0.5;

    // 把重力和碰撞行为添加到动画执行者中
    [self.animator addBehavior:gravity];
    [self.animator addBehavior:collision];
    [self.animator addBehavior:itemBehavior];
}

效果：

2.UISnapBehavior吸附，示例：模仿吸附 + 重力 的行为

- (void)doAnimation{
    //[self.animator removeAllBehaviors];

    // 添加一个吸附行为，指定吸附的点
    UISnapBehavior *snap = [[UISnapBehavior alloc]initWithItem:self.ballView snapToPoint:CGPointMake(self.view.frame.size.width *0.5, self.view.frame.size.height - 100)];

    // 添加一个重力的行为
    UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.ballView]];

    [self.animator addBehavior:snap];
    [self.animator addBehavior:gravity];
}

效果：

3.UIPushBehavior推力，示例：模仿推力 + 碰撞 的行为

#pragma mark 添加点击手势
- (void)addTapGestrue {
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTapGestrue:)];
    [self.ballView addGestureRecognizer:tap];
}

- (void)handleTapGestrue:(UITapGestureRecognizer*)gesture{
    // 球的中心点
    CGPoint ballCenter = self.ballView.center;
    // 点击点
    CGPoint tapPoint   = [gesture locationInView:self.view];
    CGFloat offsetX = tapPoint.x - ballCenter.x;
    CGFloat offsetY = tapPoint.y - ballCenter.y;
    CGFloat angle = atan2(offsetY, offsetX);
    CGFloat distance = sqrt(pow(offsetX, 2) + pow(offsetY, 2));

    // 添加推力行为
    UIPushBehavior *push = [[UIPushBehavior alloc]initWithItems:@[self.ballView] mode:UIPushBehaviorModeInstantaneous];

    // 设置角度
    [push setAngle:angle];

    // 设置推力大小
    // 每1个magnigude将会引起100/平方秒的加速度
    [push setMagnitude:distance/100];

    // 添加碰撞行为
    UICollisionBehavior *collision = [[UICollisionBehavior alloc]initWithItems:@[self.ballView]];
    collision.translatesReferenceBoundsIntoBoundary = YES;

    [self.animator addBehavior:push];
    [self.animator addBehavior:collision];
}

效果：

4.UIAttachmentBehavior关联，示例：模仿推力 + 碰撞 的行为

- (void)doAnimation{
    // UIAttachmentBehavior 可以设置和某一个点
    UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc]initWithItem:self.blueView attachedToItem:self.ballView];
    // 关联的长度
    [attachment setLength:100];
    UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.blueView]];
    [self.animator addBehavior:attachment];
    [self.animator addBehavior:gravity];
}

效果：

6.粒子系统

CAEmitterCell
CAEmitterLayer

7.facebook pop动画

使用之前先讨论以下POP和核心动画的主要区别
CoreAnimation 的动画是加在layer上
CoreAnimation的动画只是表面而已，并没有真正的修改frame等属性值
pop的动画可以添加到任何对象
pop的底层是基于CADisplaylink
pop的动画真正的修改frame等属性值

pop使用：

POP默认支持三种动画，但同时也支持自定义动画
POPDecayAnimation 减速动画
POPSpringAnimation 弹簧效果
POPSpringAnimation 飞入效果

期待

---

• 如果在阅读过程中遇到 error || new ideas，希望你能 messages 我，我会及时改正谢谢。

• 点击右上角的 喜欢 和 订阅Rss 按钮，可以收藏本仓库，并在 Demo 更新时收到邮件通知。