10-核心动画

一、核心动画简介

一、简单介绍      Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。      Core Animation是跨平台的，可以用在Mac OS X和iOS平台。      Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。不阻塞主线程，可以理解为在执行动画的时候还能点击（按钮）。      要注意的是，Core Animation是直接作用在CALayer上的，并非UIView。 二、Core Animation的使用步骤      1.使用它需要先添加QuartzCore.framework框架和引入主头文件<QuartzCore/QuartzCore.h>(iOS7不需要)      2.初始化一个CAAnimation对象，并设置一些动画相关属性      3.通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中，这样就能开始执行动画了      4.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画 三、CAAnimation 类的继承结构图 　　 CAAnimation是所有动画类的父类，但是它不能直接使用，应该使用它的子类。  常见属性有： duration：动画的持续时间 repeatCount：动画的重复次数 timingFunction：控制动画运行的节奏 说明：（1）能用的动画类只有4个子类：CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup 　　   （2）CAMediaTiming是一个协议(protocol)。 CAPropertyAnimation是CAAnimation的子类，但是不能直接使用，要想创建动画对象，应该使用它的两个子类：CABasicAnimation和CAKeyframeAnimation 它有个NSString类型的keyPath属性，你可以指定CALayer的某个属性名为keyPath，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。比如，指定@"position"为keyPath，就会修改CALayer的position属性的值，以达到平移的动画效果 四、补充说明      CAAnimation所有动画对象的父类，负责控制动画的持续时间和速度，是个抽象类，不能直接使用，应该使用它具体的子类      属性解析：(红色代表来自CAMediaTiming协议的属性)      autoreverses = YES ; 恢复原来的位置 带动画      duration：动画的持续时间      repeatCount：动画的重复次数      repeatDuration：动画的重复时间      removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards      fillMode：决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后      beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，      CACurrentMediaTime()为图层的当前时间      timingFunction：速度控制函数，控制动画运行的节奏      delegate：动画代理

------------------------------------------------------ 代理------------------------------------------------   设置代理：设置动画的代理，可以监听动画的执行过程，这里设置控制器为代理。 设置代理 anima.delegate=self; 开始执行动画 -(void)animationDidStart:(CAAnimation *)anim 执行完毕后 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

二、基础动画 - 属性动画的子类

一、简单介绍 CAPropertyAnimation的子类 属性解析: fromValue：keyPath相应属性的初始值 toValue：keyPath相应属性的结束值 随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue 如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。 比如，CALayer的position初始值为(0,0)，CABasicAnimation的fromValue为(10,10)，toValue为(100,100)，虽然动画执行完毕后图层保持在(100,100)这个位置，实质上图层的position还是为(0,0)

------------------------------------------------------ 代码示例------------------------------------------------     - ( void )touchesBegan:( NSSet *)touches withEvent:( UIEvent *)event {     /**1. 创建核心动画 */     CABasicAnimation *animation = [ CABasicAnimation animationWithKeyPath : @"transform.rotation" ];         /**2. 设置动画属性 */     /** 设置动画执行时间 */     animation. duration = 0.35 ;     /** 设置起始数 */     animation. fromValue = 0 ;     /** 设置终点数 */     animation. toValue = @( M_PI * 2) ;     animation. repeatCount = 1000 ;     /** 保存动画执行完毕状态 */ //    animation.removedOnCompletion = NO; //    animation.fillMode = kCAFillModeForwards;         /**3. 将动画添加到 layer 层 */     [ _image . layer addAnimation :animation forKey : nil ];     }

二、关键帧动画 -  属性动画的子类

一、简单介绍 是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(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没有设置的时候,各个关键帧的时间是平分的 说明：CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

-------------------------------------------------- values属性 代码示例-------------------------------------------------   19 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 20 { 21 //1.创建核心动画 22 CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation]; 23 //平移 24 keyAnima.keyPath=@"position"; 25 //1.1告诉系统要执行什么动画 26 NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)]; 27 NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)]; 28 NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)]; 29 NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)]; 30 NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)]; 31 keyAnima.values=@[value1,value2,value3,value4,value5]; 32 //1.2设置动画执行完毕后，不删除动画 33 keyAnima.removedOnCompletion=NO; 34 //1.3设置保存动画的最新状态 35 keyAnima.fillMode=kCAFillModeForwards; 36 //1.4设置动画执行的时间 37 keyAnima.duration=4.0; 38 //1.5设置动画的节奏 39 keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 40 41 //设置代理，开始—结束 42 keyAnima.delegate=self; 43 //2.添加核心动画 44 [self.customView.layer addAnimation:keyAnima forKey:nil]; 45 }

-------------------------------------------------- path属性 代码示例------------------------------------------------ - ( void )touchesBegan:( NSSet *)touches withEvent:( UIEvent *)event {     /**1.创建动画对象 */     CAKeyframeAnimation *keyAnimation = [[CAKeyframeAnimationalloc] init];         /**2.设置属性 */     keyAnimation. duration = 2.0 ;     keyAnimation. keyPath = @"position" ;         /**3. 创建路径 */     CGMutablePathRef path = CGPathCreateMutable ();         /**4. 画图 */     CGPathMoveToPoint (path, NULL , 10 , 10 );     CGPathAddCurveToPoint(path,NULL, 300, 100, 200, 400, 10, 630);       keyAnimation. path = path;         /**5. 释放路径 */     CGPathRelease (path);        /**6.添加动画 */     [ _image . layer addAnimation :keyAnimation forKey : nil ];   }

-------------------------------------------------- 抖动动画 代码示例------------------------------------------------  #define angle2Radian(angle)  ((angle)/ 180.0 *M_PI) - ( void )touchesBegan:( NSSet *)touches withEvent:( UIEvent *)event {          //1. 创建核心动画          CAKeyframeAnimation *keyAnima=[ CAKeyframeAnimation animation ];         keyAnima. keyPath = @"transform.rotation" ;          // 设置动画时间          keyAnima. duration = 0.1 ;          // 设置图标抖动弧度          // 把度数转换为弧度   度数 /180*M_PI          keyAnima. values = @[@( - angle2Radian ( 4 ) ) , @( angle2Radian ( 4 ) ) , @( - angle2Radian ( 4 ) )] ;          // 设置动画的重复次数 ( 设置为最大值 )          keyAnima. repeatCount = MAXFLOAT ;              keyAnima. fillMode = kCAFillModeForwards ;          keyAnima. removedOnCompletion = NO ;          //2. 添加动画          [ _image . layer addAnimation :keyAnima forKey : nil ];   }

三、组动画CAAnimation  -  Core Animation的子类

一、组动画简单说明      CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行 属性解析：      animations：用来保存一组动画对象的NSArray      默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间

--------------------------------------------------- -组动画代码示例----------------------------------------------- 10 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 11 { 12 13 // 平移动画 14 CABasicAnimation *a1 = [CABasicAnimation animation]; 15 a1.keyPath = @"transform.translation.y"; 16 a1.toValue = @(100); 17 // 缩放动画 18 CABasicAnimation *a2 = [CABasicAnimation animation]; 19 a2.keyPath = @"transform.scale"; 20 a2.toValue = @(0.0); 21 // 旋转动画 22 CABasicAnimation *a3 = [CABasicAnimation animation]; 23 a3.keyPath = @"transform.rotation"; 24 a3.toValue = @(M_PI_2); 25 26 // 组动画 27 CAAnimationGroup *groupAnima = [CAAnimationGroup animation]; 28 29 groupAnima.animations = @[a1, a2, a3]; 30 31 //设置组动画的时间 32 groupAnima.duration = 2; 33 groupAnima.fillMode = kCAFillModeForwards; 34 groupAnima.removedOnCompletion = NO; 35 36 [self.iconView.layer addAnimation:groupAnima forKey:nil]; 37 }

四、转场动画CATransition -  Core Animation的子类

一、转场动画简单介绍       CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点        UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析:              type：动画过渡类型         subtype：动画过渡方向 startProgress：动画起点(在整体动画的百分比)  endProgress：动画终点(在整体动画的百分比) Type预定义的过渡效果： NSString * const kCATransitionFade; NSString * const kCATransitionMoveIn; NSString * const kCATransitionPush; NSString * const kCATransitionReveal; SubType预定义的过渡效果： CA_EXTERN NSString * const kCATransitionFromRight CA_EXTERN NSString * const kCATransitionFromLeft CA_EXTERN NSString * const kCATransitionFromTop CA_EXTERN NSString * const kCATransitionFromBottom 私有API： fade     //交叉淡化过渡(不支持过渡方向) push     //新视图把旧视图推出去 moveIn   //新视图移到旧视图上面 reveal   //将旧视图移开,显示下面的新视图 cube     //立方体翻滚效果 oglFlip  //上下左右翻转效果 suckEffect   //收缩效果，如一块布被抽走(不支持过渡方向) rippleEffect //滴水效果(不支持过渡方向) pageCurl     //向上翻页效果 pageUnCurl   //向下翻页效果 cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向) cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)

--------------------------------------------------- 转场动画代码示例---------------------------------------------     //1. 创建对象     CATransition *ca = [ CATransition animation ];         //2. 设置类型     ca. type = @"suckEffect" ;     ca. subtype = kCATransitionMoveIn ;         //3. 设置动画时间     ca. duration = 3 ;         // 添加到图层     [ _image . layer addAnimation :ca forKey : nil ];

------------------------------------------------- 导航栏动画代码示例-------------------------------------------- - ( IBAction )up:( UIBarButtonItem *)sender {         SecondViewController *sec = [[ SecondViewController alloc ] init ];         [ self . navigationController pushViewController :sec animated : NO ];         // 创建转场动画对象     CATransition * transition = [ CATransition animation ];     transition. duration = 3 ;         // 设置动画节奏     transition. timingFunction = [ CAMediaTimingFunction functionWithName : kCAMediaTimingFunctionEaseInEaseOut ];         // 设置类型     transition. type = @"cube" ;         // 添加到图层     [self.navigationController.view.layer addAnimation :transition forKey : nil ];   }

l + (void) animateWithDuration :(NSTimeInterval)duration delay :(NSTimeInterval)delay options :(UIViewAnimationOptions)options animations :(void (^)(void))animations completion :(void (^)(BOOL finished)) completion 参数解析:   u duration ：动画的持续时间   u delay ：动画延迟 delay 秒后开始   u options ：动画的节奏控制   u animations ：将改变视图属性的代码放在这个 block 中   u completion ：动画结束后，会自动调用这个 block