iOS-CAAnimation & UIView动画

#CAAnimation & UIView动画]
##CAAnimation基本属性

Core Animation(核⼼心动画)是一组⾮非常强⼤大的动画处理API,使⽤用它能做出⾮非常炫丽的动 画效果,⽽而且往往是事半功倍!
使⽤用它需要先添加QuartzCore.framework和引⼊入对应的框架**<QuartzCore/ QuartzCore.h>**

创建动画的步骤:

初始化⼀个动画对象(CAAnimation)并设置一些动画相关的属性

要地CALayer中有很多属性都可以通过CAAnimation实现动画效果,包括:opacity、
position、transform、bounds、contents等(⻅见附录1)

使⽤用CALayer的addAnimation:forKey⽅方法增加动画到层,当动画对象添加到层后会 ⾃自动执⾏行。

Core Animation的动画执⾏行过程都是在后台操作的,不会阻塞主线程  



###CALayer中可⽤用来做动画的属性:
 
 anchorPoint  :  锚点  
 backgroundColor    :   背景颜⾊色  
 borderColor     :    边框颜⾊色  
 borderWidth   :边框宽度  
 bounds :图层⼤大⼩小  
 contents   :图层显⽰示内容  
 contentsRect  :  图层显⽰示内容的⼤大⼩小和位置  
 cornerRadius   : 圆⾓角半径  
 hidden  :是否隐藏  
 mask   : 图层蒙版  
 masksToBounds   : 是否剪切图层边界,默认为NO  
 opacity: 透明度 ,类似于UIView的alpha  
 position   : 图层中⼼心点位置,类似于UIView的center  
 shadowColor   : 阴影颜⾊色  
 shadowOffset    : 阴影偏移量   
 shadowOpacity   : 阴影透明度  
 shadowPath   : 阴影的形状  
 shadowRadius    : 阴影模糊半径  
 sublayers   : ⼦子图层  
 sublayerTransform  : ⼦子图层形变  
 transform   : 图层形变  
 zPosition: 图层的重叠顺序  
  
 ---------------------

基本动画CABasicAnimation

CABasicAnimation 用于实现layer属性值从一个值(fromValue)到另外一个值(toValue)变化的简单动画,比如旋转、缩放、逐渐透明、移动等。
###创建

CABasicAnimation *animation = [CABasicAnimation animation];
[animation setKeyPath:@"transform.scale"];
// 或者
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

###动画的属性

fromValue：属性的起始值,id类型。

toValue：属性的目标值,id类型。

byValue：属性要变化的值，也就是fromValue到toValue所改变的值。

duration：动画的持续时间。

autoreverses：动画是否有恢复动画。

repeatCount：动画重复次数,设置为HUGE_VALF表示无限次。

removedOnCompletion：是否回到初始状态,要设置fillMode为kCAFillModeForwards才起效果。

fillMode：非动画时的状态。

speed：动画的速度，默认1.0，设为2.0就是两倍的速度完成动画。

timingFunction：动画速度变化控制函数包含(Linear、EaseIn、EaseIn、EaseInEaseOut)。

timeOffset：动画的时间偏移。

beginTime：动画开始的时间，为CACurrentMediaTime() + 延迟秒数。

CACurrentMediaTime()：当前媒体时间，可以用于动画暂停和开始的时间记录。这个绝对时间就是将mach_absolute_time()(mach_absolute_time是一个CPU/总线依赖函数，返回一个基于系统启动后的时钟”嘀嗒”数。)转换成秒后的值.这个时间和系统的uptime有关,系统重启后CACurrentMediaTime()会被重置。

####属性设置

animation.fromValue = @1.0;
animation.toValue = @2.0;
animation.duration = 1.0;//播放速度
animation.autoreverses = YES;//是否自动恢复
animation.repeatCount = 20;//重复多少次

####暂停动画

- (void)pauseAnimation {
    CFTimeInterval pauseTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

    layer.timeOffset = pauseTime;// 设置动画的时间的偏移
    
     layer.speed = 0;
}

####暂停后启动动画

- (void)resumeAnimation {

    CFTimeInterval pasuseTime = [layer timeOffset];// 获取暂停时的时间
    layer.speed = 1;
    layer.timeOffset = 0;
    layer.beginTime = 0;
    
    // 设置开始的时间(继续动画，这样设置相当于让动画等待的秒数等于暂停的秒)
    layer.beginTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pasuseTime;
}

##关键帧动画CAKeyframeAnimation
CAKeyframeAnimation,也是CAPropertyAnimation的⼦子类,但关键帧动画与 简单动画的区别是,简单动画只能从⼀个数值过渡到另⼀个数值,⽽而关键帧动画 会有一个NSArray来保存多个数值的过渡。  
相关属性:   
1.values:上述的NSArray对象。⾥里⾯面的元素称为“关键帧”(keyframe)。动画对象
会在指定的时间(duration)内,依次显⽰示values数组中的每一个关键帧   
2.path:可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移
动。当我们创建好CAKeyframeAnimation的实例的时候,可以通过制定一个⾃自⼰己定 义的path来让 某一个物体按照这个路径进⾏行动画。这个值默认是nil 当其被设定的 时候 values 这个属性就被覆盖  
3.keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到 1.0,keyTimes中的每一个时间值都对应values中的每⼀帧.当keyTimes没有设置的时 候,各个关键帧的时间是平分的

###代码

设置多个关键帧，连成动画。
  
  

NSValue *point_1 = [NSValue valueWithCGPoint:CGPointMake(TScreenWidth / 2,0)];
NSValue *point_2 = [NSValue valueWithCGPoint:CGPointMake(50,TScreenHeight / 2)];
NSValue *point_3 = [NSValue valueWithCGPoint:CGPointMake(TScreenWidth / 2,TScreenHeight - 50)];
NSValue *point_4 = [NSValue valueWithCGPoint:CGPointMake(TScreenWidth - 50,TScreenHeight / 2)];
NSValue *point_5 = [NSValue valueWithCGPoint:CGPointMake(TScreenWidth / 2,0)];
    
// values:设置关键帧(多个目标点)
keyAnimation.values = @[point_1,point_2,point_3,point_4,point_5];
    

###calculationMode(计算模式):   
在关键帧动画中还有⼀个⾮非常重要的参数,那便是calculationMode,计算模式.其主
要针对的是每一帧的内容为一个座标点的情况,也就是对anchorPoint 和 position 进⾏行的动画.当在平⾯面座标系中有多个离散的点的时候,可以是离散的,也可以直线相连后进⾏行插值计
算,也可以使⽤用圆滑的曲线将他们相连后进⾏行插值计算.  

####calculationMode⺫⽬目前提供如下⼏几种模式: 

kCAAnimationLinear 默认值,表⽰示当关键帧为座标点的时候,关键帧之间直接直线 相连进⾏行插值计算  

kCAAnimationDiscrete 离散的,不进⾏行插值计算,所有关键帧直接逐个进⾏行显⽰示

kCAAnimationPaced 使得动画均匀进⾏行,⽽而不是按keyTimes设置的或者按关键帧平 分时间,此时keyTimes和timingFunctions⽆无效  

kCAAnimationCubic 对关键帧为座标点的关键帧进⾏行圆滑曲线相连后插值计算,这 ⾥里的主要⺫⽬目的是使得运⾏行的轨迹变得圆滑  

kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其
实就是在kCAAnimationCubic的基础上使得动画运⾏行变得均匀,就是系统时间内运 动的距离相同,此时keyTimes以及timingFunctions也是⽆无效的

    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyAnimation.duration = 4;
    keyAnimation.repeatCount = HUGE_VALF;
    keyAnimation.fillMode = kCAFillModeForwards;
    keyAnimation.removedOnCompletion = NO;
    
    keyAnimation.calculationMode = kCAAnimationLinear;
    
    keyAnimation.path = [self path].CGPath;
    return keyAnimation;

##CATransition
###CATransition:   
CATransition并不像属性动画那样平滑地在两个值之间做动画,⽽而是影响到整个图
层的变化。过渡动画⾸首先展⽰示之前的图层外观,然后通过一个交换过渡到新的外观。  
• 相关属性:  
1.type:动画过渡类型  
2.subtype:动画过渡⽅方向   
3.startProgress:动画起点   
4.endProgress:动画终点 
 

 type属性说明:   
1.kCATransitionFade:淡⼊入淡出
2.kCATransitionMoveIn:新视图移到旧视图上⾯面   
3.kCATransitionPush:新视图把旧视图推出   
4.kCATransitionReveal:把旧视图移开,显⽰示下⾯面的新视图
  

subtype属性说明:   
后⾯面三种过渡类型都有⼀个默认的动画⽅方向,它们都从左侧滑⼊入,但是你
可以通过subtype来控制它们的⽅方向,提供了如下四种类型:   
1.kCATransitionFromRight  
2.kCATransitionFromLeft  
3.kCATransitionFromTop  
4.kCATransitionFromBottom

###效果

     1. fade     淡出效果
     2. moveIn 进入效果
     3. push    推出效果
     4. reveal   移出效果 
     未公开的
     5. cube   立方体翻转效果
     6. suckEffect  抽走效果
     7. rippleEffect 水波效果
     8. pageCurl    翻开页效果
     9. pageUnCurl 关闭页效果
     10. cameraIrisHollowOpen  相机镜头打开效果
     11.  cameraIrisHollowClose  相机镜头关闭效果
    

  CATransition *transitionAni = [CATransition animation];
    transitionAni.duration = 1.0;
   
    
    transitionAni.type = kCATransitionPush;
    或// transitionAni.type = @"push";
    
    // 转场的方向：`fromLeft', `fromRight', `fromTop'  `fromBottom'
    transitionAni.subtype = @"fromTop";
    
    // 开始转场和结束转场的进度位置
     transitionAni.startProgress = 0.5;
     transitionAni.endProgress = 1;
    
    return transitionAni;

##CAAnimationGroup

CABasicAnimation和CAKeyframeAnimation仅仅作⽤用于单独的属性,⽽CAAnimationGroup可以把这些动画组合在一起。CAAnimationGroup是另一个继承于 CAAnimation的⼦子类,它添加了一个animations数组的属性,⽤用来组合别的动画。  
简单的理解就是把很多的动画功能组合在起。
参考CAAnimationGroup
##UIView动画

UIView动画与CAAnimation的使用操差别不大。我这里提供一个代码的链接。可以下载来对比差别 UIViewPP动画