CA核心动画总结

一.简介

1.简单介绍

Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。

Core Animation是跨平台的，可以用在Mac OS X和iOS平台。

Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。不阻塞主线程，可以理解为在执行动画的时候还能点击（按钮）。

要注意的是，Core Animation是直接作用在CALayer上的，并非UIView。

2.Core Animation的使用步骤

• 1>使用它需要先添加QuartzCore.framework框架和引入主头文件

3.继承关系

其中灰色虚线表示继承关系，红色表示遵守协议。

核心动画中所有类都遵守CAMediaTiming协议。
CAAnaimation是个抽象类，不具备动画效果，必须用它的子类才有动画效果。

CAAnimationGroup和CATransition才有动画效果，CAAnimationGroup是个动画组，可以同时进行缩放，旋转（同时进行多个动画）。

CATransition是转场动画，界面之间跳转（切换）都可以用转场动画。

CAPropertyAnimation也是个抽象类，本身不具备动画效果，只有子类才有。

CABasicAnimation和CAKeyframeAnimation：
CABasicAnimation基本动画，做一些简单效果。
CAKeyframeAnimation帧动画，做一些连续的流畅的动画。

4.属性说明

前五个是协议的属性

属性 说明 duration 动画的持续时间 repeatCount 重复次数，无限循环可以设置HUGE_VALF或者MAXFLOAT repeatDuration 重复时间 fillMode 决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之 beginTime 可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间 removedOnCompletion 默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards timingFunction 速度控制函数，控制动画运行的节奏 delegate 动画代理

fillMode属性的设置：

kCAFillModeRemoved 这个是默认值，也就是说当动画开始前和动画结束后，动画对layer都没有影响，动画结束后，layer会恢复到之前的状态

kCAFillModeForwards 当动画结束后，layer会一直保持着动画最后的状态

kCAFillModeBackwards 在动画开始前，只需要将动画加入了一个layer，layer便立即进入动画的初始状态并等待动画开始。

kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前，layer便处于动画初始状态，动画结束后layer保持动画最后的状态

速度控制函数(CAMediaTimingFunction)：

kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉

kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开

kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地

kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。

二、实例

1.基础动画CABasicAnimation

CABasicAnimation,基础动画，通过传入指定的keyPath,和设置fromValue、toValue等值实现。

属性：fromValue   开始的值toValue     结束时的值byValue     动画过程中的值为了防止冲突，在指定了toValue时不需要byValue、而指定了byValue也不需要指定toValue。

(1).调整大小

// 修改大小  //1.创建动画  CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];  //1.1设置动画执行时间  anima.duration=2.0;  //1.2设置动画执行完毕后不删除动画  anima.removedOnCompletion=NO;  //1.3设置保存动画的最新状态  anima.fillMode=kCAFillModeForwards;  //1.4修改属性，执行动画  anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 120*0.1, 120*0.1)];  //2.添加动画到layer  [self.anView.layer addAnimation:anima forKey:nil];  //或者  //CA动画  //缩放变化  CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];  scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];  //    //缩小  scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];  scaleAnimation.duration = 2.0;  //1.2设置动画执行完毕后不删除动画  scaleAnimation.removedOnCompletion = NO;  //1.3设置保存动画的最新状态  scaleAnimation.fillMode=kCAFillModeForwards;  [self.anView.layer addAnimation:scaleAnimation forKey:nil];

(2).拉伸动画

//1.创建动画   CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];   //1.1设置动画执行时间   anima.duration=2.0;   //1.2设置动画执行完毕后不删除动画   anima.removedOnCompletion=NO;   //1.3设置保存动画的最新状态   anima.fillMode=kCAFillModeForwards;   //1.4修改属性，执行动画   anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 300, 120)];   //2.添加动画到layer   [self.anView.layer addAnimation:anima forKey:nil];

(3).改变位置 keyPath为position

CABasicAnimation *anima1=[CABasicAnimation animationWithKeyPath:@"position"];  //1.1设置动画执行时间  anima1.duration=2.0;  //1.2设置动画执行完毕后不删除动画  anima1.removedOnCompletion=NO;  //1.3设置保存动画的最新状态  anima1.fillMode=kCAFillModeForwards;  //1.4修改属性，执行动画  anima1.toValue=[NSValue valueWithCGPoint:CGPointMake(0, 64)];  //2.添加动画到layer  [self.anView.layer addAnimation:anima1 forKey:nil];

(4).旋转 keyPath为transform

改变transform旋转 调整大小 位置等
和UIView 不同的是： 不单单可以平面改变x,y坐标 而且可以立体改变x,y,z 三个坐标的位置。

CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];//    //缩小//    scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];//移动//    scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(60, -60, 0)];//旋转scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(3.14, 0.0, 0.0,1.0)];scaleAnimation.duration = 2.0;//1.2设置动画执行完毕后不删除动画scaleAnimation.removedOnCompletion = NO;//1.3设置保存动画的最新状态scaleAnimation.fillMode=kCAFillModeForwards;[self.anView.layer addAnimation:scaleAnimation forKey:nil];

(5).改变透明度

keyPath为opacity而不是 alpha

//1.创建动画 CABasicAnimation *anima1=[CABasicAnimation animationWithKeyPath:@"opacity"]; //1.1设置动画执行时间 anima1.duration=2.0; //1.2设置动画执行完毕后不删除动画 anima1.removedOnCompletion=NO; //1.3设置保存动画的最新状态 anima1.fillMode=kCAFillModeForwards; //1.4修改属性，执行动画 anima1.toValue=[NSNumber numberWithFloat:0.1]; //2.添加动画到layer [self.anView.layer addAnimation:anima1 forKey:nil];

总结一些keyPath

• basicAnimation的keyPath
  也就是说使用如下方法
  [CABasicAnimation animationWithKeyPath:@”transform.rotation.y”]
  时的path需要填写指定的值，才能够使动画有效(下表中的需要在前面加transform.)
  

• 还包含如下的值（可能不完整）

positionzPositionanchorPointanchorPointZmargintransformcornerRadiusbackgroundColorborderColorborderWidthopacity   //透明度shadowRadiusshadowOffsetshadowColorshadowOpacityshadowPathshouldRasterizecontentscontentsRectframehiddenmaskmaskToBounds

2.关键帧动画

属性：values  存放“关键帧”，动画会一次到达关键帧指定的值，并自动生成中间动画。path    路径，可以设置一个CGPathRef的路径，让图层按照路径移动，因此只对anchorPosition和position起作用，当设置了path会忽略掉values中的值。keyTimes 可以为对应的关键帧指定对应的时间点，其取值范围为0到1.0，keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes，各个关键帧的时间是平分的     timingFunctions  指定到达每一帧的速度，度values对应，可以不设置。

//关键帧  设置动画路径  CAKeyframeAnimation * moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  moveAnimation.duration = 2.0;  moveAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(100, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 100)]];  moveAnimation.removedOnCompletion = YES;  [self.anView.layer addAnimation:moveAnimation forKey:nil];

3.组动画 CAAnimationGroup

组动画，一个layer执行多个动画，（如缩放和移动一起）。

-(void)animationGroup{    //创建组动画    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];    animationGroup.duration = 3;    animationGroup.repeatCount = MAXFLOAT;    animationGroup.removedOnCompletion = NO;    /* beginTime 可以分别设置每个动画的beginTime来控制组动画中每个动画的触发时间，时间不能够超过动画的时间，默认都为0.f */    //缩放动画    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];    animation1.values = @[[NSNumber numberWithFloat:1.0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1.5],[NSNumber numberWithFloat:1.0]];    animation1.beginTime = 0.f;    //按照圆弧移动动画    CAKeyframeAnimation *animation2 = [CAKeyframeAnimation animationWithKeyPath:@"position"];    UIBezierPath *bezierPath = [UIBezierPath bezierPath];    [bezierPath moveToPoint:CGPointMake(300, 200)];    [bezierPath addQuadCurveToPoint:CGPointMake(200, 300) controlPoint:CGPointMake(300, 300)];    [bezierPath addQuadCurveToPoint:CGPointMake(100, 200) controlPoint:CGPointMake(100, 300)];    [bezierPath addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(100, 100)];    [bezierPath addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(300, 100)];    animation2.path = bezierPath.CGPath;    animation2.beginTime = 0.f;    //透明度动画    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"opacity"];    animation3.fromValue = [NSNumber numberWithDouble:0.0];    animation3.toValue = [NSNumber numberWithDouble:1.0];    animation3.beginTime = 0.f;    //添加组动画    animationGroup.animations = @[animation1, animation2,animation3];    [self.anView.layer addAnimation:animationGroup forKey:nil];}

4.转场动画 CATransition

CATransition *transition = [CATransition animation];    transition.duration = 1;    transition.type = @"pageCurl";//翻页    [self.anView.layer addAnimation:transition forKey:nil];

属性：type        动画的类型subtype     动画过度方向（可自行查看相关字符串）startProgress   动画起点(在整体动画的百分比)endProgress 动画终点(在整体动画的百分比)type的类型：基本效果：      kCATransitionFade        渐入渐出效果      kCATransitionMoveIn      移入效果      kCATransitionPush        推入效果      kCATransitionReveal      截开效果私有API(可安全使用):          cube                   方块          suckEffect             三角          rippleEffect           水波          pageCurl               上翻页          pageUnCurl             下翻页          oglFlip                上下翻转          cameralrisHollowOpen      镜头快门开          cameralrisHollowClose     镜头快门关以下API请谨慎使用          spewEffect            新版面在屏幕下方中间位置被释放出来覆盖旧版面          genieEffect           旧版面在屏幕左下方或右下方被吸走, 显示出下面的新版面          unGenieEffect         新版面在屏幕左下方或右下方被释放出来覆盖旧版面          twist                 版面以水平方向像龙卷风式转出来          tubey                 版面垂直附有弹性的转出来          swirl                 旧版面360度旋转并淡出, 显示出新版面          charminUltra          旧版面淡出并显示新版面          zoomyIn               新版面由小放大走到前面, 旧版面放大由前面消失          zoomyOut              新版面屏幕外面缩放出现, 旧版面缩小消失          oglApplicationSuspend 像按”home” 按钮的效果

5.动画的暂停与恢复

#pragma mark 暂停CALayer的动画-(void)pauseLayer:(CALayer*)layer{    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];    // 让CALayer的时间停止走动      layer.speed = 0.0;    // 让CALayer的时间停留在pausedTime这个时刻    layer.timeOffset = pausedTime;}#pragma mark 恢复CALayer的动画-(void)resumeLayer:(CALayer*)layer{    CFTimeInterval pausedTime = layer.timeOffset;    // 1. 让CALayer的时间继续行走      layer.speed = 1.0;    // 2. 取消上次记录的停留时刻      layer.timeOffset = 0.0;    // 3. 取消上次设置的时间      layer.beginTime = 0.0;    // 4. 计算暂停的时间(这里也可以用CACurrentMediaTime()-pausedTime)    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;    // 5. 设置相对于父坐标系的开始时间(往后退timeSincePause)      layer.beginTime = timeSincePause;}

三、Layer和UIView

UIView和CALayer的选择

通过CALayer，就能做出跟UIImageView一样的界面效果。

既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？

其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以
所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以。当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级。

为什么CALayer不能直接使用UIColor，UIImage？

layer.backgroundColor = [UIColor redColor].CGColor;

首先，CALayer是定义在QuartzCore框架中的，CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
，而UIColor和UIImage是定义在UIKit框架中的。
其次，QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用。

所以，为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef。

引用：
http://www.jianshu.com/p/8c1c1697c0ce
https://github.com/AttackOnDobby/iOS-Core-Animation-Advanced-Techniques