iOS开发之让你的应用“动”起来(动画)

最新推荐文章于 2020-10-22 11:08:55 发布
最新推荐文章于 2020-10-22 11:08:55 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： IOS

在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核心动画创建基础动画、关键帧动画、动画组、转场动画，如何通过UIView的装饰方法对这些动画操作进行简化等。在今天的文章里您可以看到动画操作在iOS中是如何简单和高效，很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单：

CALayer

CALayer简介

在介绍动画操作之前我们必须先来了解一个动画中常用的对象CALayer。CALayer包含在QuartzCore框架中，这是一个跨平台的框架，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation开发动画的本质就是将CALayer中的内容转化为位图从而供硬件操作，所以要熟练掌握动画操作必须先来熟悉CALayer。

在上一篇文章中使用Quartz 2D绘图时大家其实已经用到了CALayer，当利用drawRect:方法绘图的本质就是绘制到了UIView的layer（属性）中，可是这个过程大家在上一节中根本体会不到。但是在Core Animation中我们操作更多的则不再是UIView而是直接面对CALayer。下图描绘了CALayer和UIView的关系，在UIView中有一个layer属性作为根图层，根图层上可以放其他子图层，在UIView中所有能够看到的内容都包含在layer中：

CALayer常用属性

在iOS中CALayer的设计主要是了为了内容展示和动画操作，CALayer本身并不包含在UIKit中，它不能响应事件。由于CALayer在设计之初就考虑它的动画操作功能，CALayer很多属性在修改时都能形成动画效果，这种属性称为“隐式动画属性”。但是对于UIView的根图层而言属性的修改并不形成动画效果，因为很多情况下根图层更多的充当容器的做用，如果它的属性变动形成动画效果会直接影响子图层。另外，UIView的根图层创建工作完全由iOS负责完成，无法重新创建，但是可以往根图层中添加子图层或移除子图层。

下表列出了CALayer常用的属性： 

 

1.隐式属性动画的本质是这些属性的变动默认隐含了CABasicAnimation动画实现，详情大家可以参照Xcode帮助文档中“Animatable Properties”一节。

2.在CALayer中很少使用frame属性，因为frame本身不支持动画效果，通常使用bounds和position代替。

3.CALayer中透明度使用opacity表示而不是alpha；中心点使用position表示而不是center。

4.anchorPoint属性是图层的锚点，范围在（0~1,0~1）表示在x、y轴的比例，这个点永远可以同position（中心点）重合，当图层中心点固定后，调整anchorPoint即可达到调整图层显示位置的作用（因为它永远和position重合）

为了进一步说明anchorPoint的作用，假设有一个层大小100*100，现在中心点位置（50,50），由此可以得出frame（0,0,100,100）。上面说过anchorPoint默认为（0.5,0.5），同中心点position重合，此时使用图形描述如图1；当修改anchorPoint为（0,0），此时锚点处于图层左上角，但是中心点poition并不会改变，因此图层会向右下角移动，如图2；然后修改anchorPoint为（1,1,），position还是保持位置不变，锚点处于图层右下角，此时图层如图3。

下面通过一个简单的例子演示一下上面几个属性，程序初始化阶段我们定义一个正方形，但是圆角路径调整为正方形边长的一般，使其看起来是一个圆形，在点击屏幕的时候修改图层的属性形成动画效果（注意在程序中没有直接修改UIView的layer属性，因为根图层无法形成动画效果）：

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define WIDTH 50 
  11.  
  12. @interface KCMainViewController () 
  13.  
  14. @end 
  15.  
  16. @implementation KCMainViewController 
  17.  
  18. - (void)viewDidLoad { 
  19.     [super viewDidLoad]; 
  20.     // Do any additional setup after loading the view. 
  21.     [self drawMyLayer]; 
  22. } 
  23.  
  24. #pragma mark 绘制图层 
  25. -(void)drawMyLayer{ 
  26.     CGSize size=[UIScreen mainScreen].bounds.size; 
  27.      
  28.     //获得根图层 
  29.     CALayer *layer=[[CALayer alloc]init]; 
  30.     //设置背景颜色,由于QuartzCore是跨平台框架，无法直接使用UIColor 
  31.     layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor; 
  32.     //设置中心点 
  33.     layer.position=CGPointMake(size.width/2, size.height/2); 
  34.     //设置大小 
  35.     layer.bounds=CGRectMake(0, 0, WIDTH,WIDTH); 
  36.     //设置圆角,当圆角半径等于矩形的一半时看起来就是一个圆形 
  37.     layer.cornerRadius=WIDTH/2; 
  38.     //设置阴影 
  39.     layer.shadowColor=[UIColor grayColor].CGColor; 
  40.     layer.shadowOffset=CGSizeMake(2, 2); 
  41.     layer.shadowOpacity=.9; 
  42.     //设置边框 
  43. //    layer.borderColor=[UIColor whiteColor].CGColor; 
  44. //    layer.borderWidth=1; 
  45.  
  46.     //设置锚点 
  47. //    layer.anchorPoint=CGPointZero; 
  48.  
  49.     [self.view.layer addSublayer:layer]; 
  50.  
  51. } 
  52.  
  53. #pragma mark 点击放大 
  54. -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ 
  55.     UITouch *touch=[touches anyObject]; 
  56.     CALayer *layer=self.view.layer.sublayers[0]; 
  57.     CGFloat width=layer.bounds.size.width; 
  58.     if (width==WIDTH) { 
  59.         width=WIDTH*4; 
  60.     }else{ 
  61.         width=WIDTH; 
  62.     } 
  63.     layer.bounds=CGRectMake(0, 0, width, width); 
  64.     layer.position=[touch locationInView:self.view]; 
  65.     layer.cornerRadius=width/2; 
  66. } 
  67. @end 

运行效果

CALayer绘图

上一篇文章中重点讨论了使用Quartz 2D绘图，当时调用了UIView的drawRect:方法绘制图形、图像，这种方式本质还是在图层中绘制，但是这里会着重介绍一下如何直接在图层中绘图。在图层中绘图的方式跟原来基本没有区别，只是drawRect:方法是由UIKit组件进行调用，因此里面可以使用一些UIKit封装的方法进行绘图，而直接绘制到图层的方法由于并非UIKit直接调用因此只能用原生的Core Graphics方法绘制。

图层绘图有两种方法，不管使用哪种方法绘制完必须调用图层的setNeedDisplay方法（注意是图层的方法，不是UIView的方法，前面我们介绍过UIView也有此方法）

 1.通过图层代理drawLayer: inContext:方法绘制

2.通过自定义图层drawInContext:方法绘制

使用代理方法绘图

通过代理方法进行图层绘图只要指定图层的代理，然后在代理对象中重写-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx方法即可。需要注意这个方法虽然是代理方法但是不用手动实现CALayerDelegate，因为CALayer定义中给NSObject做了分类扩展，所有的NSObject都包含这个方法。另外设置完代理后必须要调用图层的setNeedDisplay方法，否则绘制的内容无法显示。

下面的代码演示了在一个自定义图层绘制一张图像并将图像设置成圆形，这种效果在很多应用中很常见，如最新版的手机QQ头像就是这种效果：

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define PHOTO_HEIGHT 150 
  11.  
  12. @interface KCMainViewController () 
  13.  
  14. @end 
  15.  
  16. @implementation KCMainViewController 
  17.  
  18. - (void)viewDidLoad { 
  19.     [super viewDidLoad]; 
  20.      
  21.     //自定义图层 
  22.     CALayer *layer=[[CALayer alloc]init]; 
  23.     layer.bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT); 
  24.     layer.position=CGPointMake(160, 200); 
  25.     layer.backgroundColor=[UIColor redColor].CGColor; 
  26.     layer.cornerRadius=PHOTO_HEIGHT/2; 
  27.     //注意仅仅设置圆角，对于图形而言可以正常显示，但是对于图层中绘制的图片无法正确显示 
  28.     //如果想要正确显示则必须设置masksToBounds=YES，剪切子图层 
  29.     layer.masksToBounds=YES; 
  30.     //阴影效果无法和masksToBounds同时使用，因为masksToBounds的目的就是剪切外边框， 
  31.     //而阴影效果刚好在外边框 
  32. //    layer.shadowColor=[UIColor grayColor].CGColor; 
  33. //    layer.shadowOffset=CGSizeMake(2, 2); 
  34. //    layer.shadowOpacity=1; 
  35.     //设置边框 
  36.     layer.borderColor=[UIColor whiteColor].CGColor; 
  37.     layer.borderWidth=2; 
  38.      
  39.     //设置图层代理 
  40.     layer.delegate=self; 
  41.      
  42.     //添加图层到根图层 
  43.     [self.view.layer addSublayer:layer]; 
  44.      
  45.     //调用图层setNeedDisplay,否则代理方法不会被调用 
  46.     [layer setNeedsDisplay]; 
  47. } 
  48.  
  49. #pragma mark 绘制图形、图像到图层，注意参数中的ctx是图层的图形上下文，其中绘图位置也是相对图层而言的 
  50. -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{ 
  51. //    NSLog(@"%@",layer);//这个图层正是上面定义的图层 
  52.     CGContextSaveGState(ctx); 
  53.  
  54.     //图形上下文形变，解决图片倒立的问题 
  55.     CGContextScaleCTM(ctx, 1, -1); 
  56.     CGContextTranslateCTM(ctx, 0, -PHOTO_HEIGHT); 
  57.      
  58.     UIImage *image=[UIImage imageNamed:@"photo.png"]; 
  59.     //注意这个位置是相对于图层而言的不是屏幕 
  60.     CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage); 
  61.  
  62. //    CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100)); 
  63. //    CGContextDrawPath(ctx, kCGPathFillStroke); 
  64.      
  65.     CGContextRestoreGState(ctx); 
  66. } 
  67.  
  68. @end 

运行效果

使用代理方法绘制图形、图像时在drawLayer:inContext:方法中可以通过事件参数获得绘制的图层和图形上下文。在这个方法中绘图时所有的位置都是相对于图层而言的，图形上下文指的也是当前图层的图形上下文。

需要注意的是上面代码中绘制图片圆形裁切效果时如果不设置masksToBounds是无法显示圆形，但是对于其他图形却没有这个限制。原因就是当绘制一张图片到图层上的时候会重新创建一个图层添加到当前图层，这样一来如果设置了圆角之后虽然底图层有圆角效果，但是子图层还是矩形，只有设置了masksToBounds为YES让子图层按底图层剪切才能显示圆角效果。同样的，有些朋友经常在网上提问说为什么使用UIImageView的layer设置圆角后图片无法显示圆角，只有设置masksToBounds才能出现效果，也是类似的问题。

扩展1--带阴影效果的圆形图片裁切

如果设置了masksToBounds=YES之后确实可以显示图片圆角效果，但遗憾的是设置了这个属性之后就无法设置阴影效果。因为masksToBounds=YES就意味着外边框不能显示，而阴影恰恰作为外边框绘制的，这样两个设置就产生了矛盾。要解决这个问题不妨换个思路:使用两个大小一样的图层，下面的图层负责绘制阴影，上面的图层用来显示图片。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define PHOTO_HEIGHT 150 
  11.  
  12. @interface KCMainViewController () 
  13.  
  14. @end 
  15.  
  16. @implementation KCMainViewController 
  17.  
  18. - (void)viewDidLoad { 
  19.     [super viewDidLoad]; 
  20.      
  21.     CGPoint position= CGPointMake(160, 200); 
  22.     CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT); 
  23.     CGFloat cornerRadius=PHOTO_HEIGHT/2; 
  24.     CGFloat borderWidth=2; 
  25.      
  26.     //阴影图层 
  27.     CALayer *layerShadow=[[CALayer alloc]init]; 
  28.     layerShadow.bounds=bounds; 
  29.     layerShadow.position=position; 
  30.     layerShadow.cornerRadius=cornerRadius; 
  31.     layerShadow.shadowColor=[UIColor grayColor].CGColor; 
  32.     layerShadow.shadowOffset=CGSizeMake(2, 1); 
  33.     layerShadow.shadowOpacity=1; 
  34.     layerShadow.borderColor=[UIColor whiteColor].CGColor; 
  35.     layerShadow.borderWidth=borderWidth; 
  36.     [self.view.layer addSublayer:layerShadow]; 
  37.      
  38.     //容器图层 
  39.     CALayer *layer=[[CALayer alloc]init]; 
  40.     layer.bounds=bounds; 
  41.     layer.position=position; 
  42.     layer.backgroundColor=[UIColor redColor].CGColor; 
  43.     layer.cornerRadius=cornerRadius; 
  44.     layer.masksToBounds=YES; 
  45.     layer.borderColor=[UIColor whiteColor].CGColor; 
  46.     layer.borderWidth=borderWidth; 
  47.      
  48.     //设置图层代理 
  49.     layer.delegate=self; 
  50.      
  51.     //添加图层到根图层 
  52.     [self.view.layer addSublayer:layer]; 
  53.      
  54.     //调用图层setNeedDisplay,否则代理方法不会被调用 
  55.     [layer setNeedsDisplay]; 
  56. } 
  57.  
  58. #pragma mark 绘制图形、图像到图层，注意参数中的ctx是图层的图形上下文，其中绘图位置也是相对图层而言的 
  59. -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{ 
  60.     //    NSLog(@"%@",layer);//这个图层正是上面定义的图层 
  61.     CGContextSaveGState(ctx); 
  62.      
  63.     //图形上下文形变，解决图片倒立的问题 
  64.     CGContextScaleCTM(ctx, 1, -1); 
  65.     CGContextTranslateCTM(ctx, 0, -PHOTO_HEIGHT); 
  66.      
  67.     UIImage *image=[UIImage imageNamed:@"photo.jpg"]; 
  68.     //注意这个位置是相对于图层而言的不是屏幕 
  69.     CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage); 
  70.      
  71.     //    CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100)); 
  72.     //    CGContextDrawPath(ctx, kCGPathFillStroke); 
  73.      
  74.     CGContextRestoreGState(ctx); 
  75. } 
  76. @end 

 运行效果

扩展2--图层的形变
从上面代码中大家不难发现使用Core Graphics绘制图片时会倒立显示，对图层的图形上下文进行了反转。在前一篇文章中也采用了类似的方法去解决这个问题，但是在那篇文章中也提到过如果直接让图像沿着x轴旋转180度同样可以达到正确显示的目的，只是当时的旋转靠图形上下文还无法绕x轴旋转。今天学习了图层之后，其实可以控制图层直接旋转而不用借助于图形上下文的形变操作，而且这么操作起来会更加简单和直观。对于上面的程序，只需要设置图层的transform属性即可。需要注意的是transform是CATransform3D类型，形变可以在三个维度上进行，使用方法和前面介绍的二维形变是类似的，而且都有对应的形变设置方法（如：CATransform3DMakeTranslation()、CATransform3DMakeScale()、CATransform3DMakeRotation()）。下面的代码通过CATransform3DMakeRotation()方法在x轴旋转180度解决倒立问题： 
   
   
  1. // 
  2. //  形变演示 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define PHOTO_HEIGHT 150 
  11.  
  12. @interface KCMainViewController () 
  13.  
  14. @end 
  15.  
  16. @implementation KCMainViewController 
  17.  
  18. - (void)viewDidLoad { 
  19.     [super viewDidLoad]; 
  20.  
  21.     CGPoint position= CGPointMake(160, 200); 
  22.     CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT); 
  23.     CGFloat cornerRadius=PHOTO_HEIGHT/2; 
  24.     CGFloat borderWidth=2; 
  25.  
  26.     //阴影图层 
  27.     CALayer *layerShadow=[[CALayer alloc]init]; 
  28.     layerShadow.bounds=bounds; 
  29.     layerShadow.position=position; 
  30.     layerShadow.cornerRadius=cornerRadius; 
  31.     layerShadow.shadowColor=[UIColor grayColor].CGColor; 
  32.     layerShadow.shadowOffset=CGSizeMake(2, 1); 
  33.     layerShadow.shadowOpacity=1; 
  34.     layerShadow.borderColor=[UIColor whiteColor].CGColor; 
  35.     layerShadow.borderWidth=borderWidth; 
  36.     [self.view.layer addSublayer:layerShadow]; 
  37.  
  38.     //容器图层 
  39.     CALayer *layer=[[CALayer alloc]init]; 
  40.     layer.bounds=bounds; 
  41.     layer.position=position; 
  42.     layer.backgroundColor=[UIColor redColor].CGColor; 
  43.     layer.cornerRadius=cornerRadius; 
  44.     layer.masksToBounds=YES; 
  45.     layer.borderColor=[UIColor whiteColor].CGColor; 
  46.     layer.borderWidth=borderWidth; 
  47.      
  48.     //利用图层形变解决图像倒立问题 
  49.     layer.transform=CATransform3DMakeRotation(M_PI, 1, 0, 0); 
  50.      
  51.     //设置图层代理 
  52.     layer.delegate=self; 
  53.  
  54.     //添加图层到根图层 
  55.     [self.view.layer addSublayer:layer]; 
  56.  
  57.     //调用图层setNeedDisplay,否则代理方法不会被调用 
  58.     [layer setNeedsDisplay]; 
  59. } 
  60.  
  61. #pragma mark 绘制图形、图像到图层，注意参数中的ctx时图层的图形上下文，其中绘图位置也是相对图层而言的 
  62. -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{ 
  63.     //    NSLog(@"%@",layer);//这个图层正是上面定义的图层 
  64.     UIImage *image=[UIImage imageNamed:@"photo.jpg"]; 
  65.     //注意这个位置是相对于图层而言的不是屏幕 
  66.     CGContextDrawImage(ctx, CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT), image.CGImage); 
  67. } 
  68.  
  69. @end 

事实上如果仅仅就显示一张图片在图层中当然没有必要那么麻烦，直接设置图层contents就可以了，不牵涉到绘图也就没有倒立的问题了。

  
  
  1. // 
  2. //  图层内容设置 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define PHOTO_HEIGHT 150 
  11.  
  12. @interface KCMainViewController () 
  13.  
  14. @end 
  15.  
  16. @implementation KCMainViewController 
  17.  
  18. - (void)viewDidLoad { 
  19.     [super viewDidLoad]; 
  20.  
  21.     CGPoint position= CGPointMake(160, 200); 
  22.     CGRect bounds=CGRectMake(0, 0, PHOTO_HEIGHT, PHOTO_HEIGHT); 
  23.     CGFloat cornerRadius=PHOTO_HEIGHT/2; 
  24.     CGFloat borderWidth=2; 
  25.  
  26.     //阴影图层 
  27.     CALayer *layerShadow=[[CALayer alloc]init]; 
  28.     layerShadow.bounds=bounds; 
  29.     layerShadow.position=position; 
  30.     layerShadow.cornerRadius=cornerRadius; 
  31.     layerShadow.shadowColor=[UIColor grayColor].CGColor; 
  32.     layerShadow.shadowOffset=CGSizeMake(2, 1); 
  33.     layerShadow.shadowOpacity=1; 
  34.     layerShadow.borderColor=[UIColor whiteColor].CGColor; 
  35.     layerShadow.borderWidth=borderWidth; 
  36.     [self.view.layer addSublayer:layerShadow]; 
  37.  
  38.     //容器图层 
  39.     CALayer *layer=[[CALayer alloc]init]; 
  40.     layer.bounds=bounds; 
  41.     layer.position=position; 
  42.     layer.backgroundColor=[UIColor redColor].CGColor; 
  43.     layer.cornerRadius=cornerRadius; 
  44.     layer.masksToBounds=YES; 
  45.     layer.borderColor=[UIColor whiteColor].CGColor; 
  46.     layer.borderWidth=borderWidth; 
  47.     //设置内容（注意这里一定要转换为CGImage） 
  48.     UIImage *image=[UIImage imageNamed:@"photo.jpg"]; 
  49. //    layer.contents=(id)image.CGImage; 
  50.     [layer setContents:(id)image.CGImage]; 
  51.  
  52.     //添加图层到根图层 
  53.     [self.view.layer addSublayer:layer]; 
  54. } 
  55.  
  56. @end 

既然如此为什么还大费周章的说形变呢，因为形变对于动画有特殊的意义。在动画开发中形变往往不是直接设置transform，而是通过keyPath进行设置。这种方法设置形变的本质和前面没有区别，只是利用了KVC可以动态修改其属性值而已，但是这种方式在动画中确实很常用的，因为它可以很方便的将几种形变组合到一起使用。同样是解决动画旋转问题，只要将前面的旋转代码改为下面的代码即可：

  
  
  1. [layer setValue:@M_PI forKeyPath:@"transform.rotation.x"]; 

当然，通过key path设置形变参数就需要了解有哪些key path可以设置，这里就不再一一列举，大家可以参照Xcode帮助文档中“CATransform3D Key Paths”一节，里面描述的很详细。

使用自定义图层绘图

在自定义图层中绘图时只要自己编写一个类继承于CALayer然后在drawInContext:中绘图即可。同前面在代理方法绘图一样，要显示图层中绘制的内容也要调用图层的setNeedDisplay方法，否则drawInContext方法将不会调用。

前面的文章中曾经说过，在使用Quartz 2D在UIView中绘制图形的本质也是绘制到图层中，为了说明这个问题下面演示自定义图层绘图时没有直接在视图控制器中调用自定义图层，而是在一个UIView将自定义图层添加到UIView的根图层中（例子中的UIView跟自定义图层绘图没有直接关系）。从下面的代码中可以看到：UIView在显示时其根图层会自动创建一个CGContextRef（CALayer本质使用的是位图上下文），同时调用图层代理（UIView创建图层会自动设置图层代理为其自身）的draw: inContext:方法并将图形上下文作为参数传递给这个方法。而在UIView的draw:inContext:方法中会调用其drawRect:方法，在drawRect:方法中使用UIGraphicsGetCurrentContext()方法得到的上下文正是前面创建的上下文。

KCLayer.m

  
  
  1. // 
  2. //  KCLayer.m 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCLayer.h" 
  10.  
  11. @implementation KCLayer 
  12.  
  13. -(void)drawInContext:(CGContextRef)ctx{ 
  14.     NSLog(@"3-drawInContext:"); 
  15.     NSLog(@"CGContext:%@",ctx); 
  16. //    CGContextRotateCTM(ctx, M_PI_4); 
  17.     CGContextSetRGBFillColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1); 
  18.     CGContextSetRGBStrokeColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1); 
  19. //    CGContextFillRect(ctx, CGRectMake(0, 0, 100, 100)); 
  20. //    CGContextFillEllipseInRect(ctx, CGRectMake(50, 50, 100, 100)); 
  21.     CGContextMoveToPoint(ctx, 94.5, 33.5); 
  22.  
  23.      Star Drawing 
  24.     CGContextAddLineToPoint(ctx,104.02, 47.39); 
  25.     CGContextAddLineToPoint(ctx,120.18, 52.16); 
  26.     CGContextAddLineToPoint(ctx,109.91, 65.51); 
  27.     CGContextAddLineToPoint(ctx,110.37, 82.34); 
  28.     CGContextAddLineToPoint(ctx,94.5, 76.7); 
  29.     CGContextAddLineToPoint(ctx,78.63, 82.34); 
  30.     CGContextAddLineToPoint(ctx,79.09, 65.51); 
  31.     CGContextAddLineToPoint(ctx,68.82, 52.16); 
  32.     CGContextAddLineToPoint(ctx,84.98, 47.39); 
  33.     CGContextClosePath(ctx); 
  34.  
  35.      
  36.     CGContextDrawPath(ctx, kCGPathFillStroke); 
  37. } 
  38.  
  39. @end 

KCView.m

  
  
  1. // 
  2. //  KCView.m 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCView.h" 
  10. #import "KCLayer.h" 
  11.  
  12. @implementation KCView 
  13.  
  14. -(instancetype)initWithFrame:(CGRect)frame{ 
  15.     NSLog(@"initWithFrame:"); 
  16.     if (self=[super initWithFrame:frame]) { 
  17.         KCLayer *layer=[[KCLayer alloc]init]; 
  18.         layer.bounds=CGRectMake(0, 0, 185, 185); 
  19.         layer.position=CGPointMake(160,284); 
  20.         layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor; 
  21.          
  22.         //显示图层 
  23.         [layer setNeedsDisplay]; 
  24.          
  25.         [self.layer addSublayer:layer]; 
  26.     } 
  27.     return self; 
  28. } 
  29.  
  30. -(void)drawRect:(CGRect)rect{ 
  31.     NSLog(@"2-drawRect:"); 
  32.     NSLog(@"CGContext:%@",UIGraphicsGetCurrentContext());//得到的当前图形上下文正是drawLayer中传递的 
  33.     [super drawRect:rect]; 
  34.      
  35. } 
  36.  
  37. -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{ 
  38.     NSLog(@"1-drawLayer:inContext:"); 
  39.     NSLog(@"CGContext:%@",ctx); 
  40.     [super drawLayer:layer inContext:ctx]; 
  41.      
  42. } 
  43.  
  44. @end 

KCMainViewController.m

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  CALayer 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #import "KCView.h" 
  11.  
  12. @interface KCMainViewController () 
  13.  
  14. @end 
  15.  
  16. @implementation KCMainViewController 
  17.  
  18. - (void)viewDidLoad { 
  19.     [super viewDidLoad]; 
  20.      
  21.     KCView *view=[[KCView alloc]initWithFrame:[UIScreen mainScreen].bounds]; 
  22.     view.backgroundColor=[UIColor colorWithRed:249.0/255.0 green:249.0/255.0 blue:249.0/255.0 alpha:1]; 
  23.      
  24.      
  25.     [self.view addSubview:view]; 
  26. } 
  27.  
  28. @end 

运行效果

Core Animation

大家都知道在iOS中实现一个动画相当简单，只要调用UIView的块代码即可实现一个动画效果，这在其他系统开发中基本不可能实现。下面通过一个简单的UIView进行一个图片放大动画效果演示：

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController () 
  12.  
  13. @end 
  14.  
  15. @implementation KCMainViewController 
  16.  
  17. - (void)viewDidLoad { 
  18.     [super viewDidLoad]; 
  19.      
  20.     UIImage *image=[UIImage imageNamed:@"open2.png"]; 
  21.     UIImageView *imageView=[[UIImageView alloc]init]; 
  22.     imageView.image=image; 
  23.     imageView.frame=CGRectMake(120, 140, 80, 80); 
  24.     [self.view addSubview:imageView]; 
  25.      
  26.     //两秒后开始一个持续一分钟的动画 
  27.     [UIView animateWithDuration:1 delay:2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{ 
  28.         imageView.frame=CGRectMake(80, 100, 160, 160); 
  29.     } completion:nil]; 
  30. } 
  31. @end 

使用上面UIView封装的方法进行动画设置固然十分方便，但是具体动画如何实现我们是不清楚的，而且上面的代码还有一些问题是无法解决的，例如：如何控制动画的暂停？如何进行动画的组合？

这里就需要了解iOS的核心动画Core Animation（包含在Quartz Core框架中）。在iOS中核心动画分为几类：基础动画、关键帧动画、动画组、转场动画。各个类的关系大致如下：

CAAnimation：核心动画的基础类，不能直接使用，负责动画运行时间、速度的控制，本身实现了CAMediaTiming协议。

CAPropertyAnimation：属性动画的基类（通过属性进行动画设置，注意是可动画属性），不能直接使用。

CAAnimationGroup：动画组，动画组是一种组合模式设计，可以通过动画组来进行所有动画行为的统一控制，组中所有动画效果可以并发执行。

CATransition：转场动画，主要通过滤镜进行动画效果设置。

CABasicAnimation：基础动画，通过属性修改进行动画参数控制，只有初始状态和结束状态。

CAKeyframeAnimation：关键帧动画，同样是通过属性进行动画参数控制，但是同基础动画不同的是它可以有多个状态控制。

基础动画、关键帧动画都属于属性动画，就是通过修改属性值产生动画效果，开发人员只需要设置初始值和结束值，中间的过程动画（又叫“补间动画”）由系统自动计算产生。和基础动画不同的是关键帧动画可以设置多个属性值，每两个属性中间的补间动画由系统自动完成，因此从这个角度而言基础动画又可以看成是有两个关键帧的关键帧动画。

基础动画

在开发过程中很多情况下通过基础动画就可以满足开发需求，前面例子中使用的UIView代码块进行图像放大缩小的演示动画也是基础动画（在iOS7中UIView也对关键帧动画进行了封装），只是UIView装饰方法隐藏了更多的细节。如果不使用UIView封装的方法，动画创建一般分为以下几步：

1.初始化动画并设置动画属性

2.设置动画属性初始值（可以省略）、结束值以及其他动画属性

3.给图层添加动画

下面以一个移动动画为例进行演示，在这个例子中点击屏幕哪个位置落花将飞向哪里。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.      
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  31.     [self.view.layer addSublayer:_layer]; 
  32. } 
  33.  
  34.  
  35.  
  36. #pragma mark 移动动画 
  37. -(void)translatonAnimation:(CGPoint)location{ 
  38.     //1.创建动画并指定动画属性 
  39.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"]; 
  40.      
  41.     //2.设置动画属性初始值和结束值 
  42. //    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不设置，默认为图层初始状态 
  43.     basicAnimation.toValue=[NSValue valueWithCGPoint:location]; 
  44.      
  45.     //设置其他动画属性 
  46.     basicAnimation.duration=5.0;//动画时间5秒 
  47.     //basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大，起到循环动画的效果 
  48.     //    basicAnimation.removedOnCompletion=NO;//运行一次是否移除动画 
  49.  
  50.      
  51.     //3.添加动画到图层，注意key相当于给动画进行命名，以后获得该动画时可以使用此名称获取 
  52.     [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"]; 
  53. } 
  54.  
  55. #pragma mark 点击事件 
  56. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  57.     UITouch *touch=touches.anyObject; 
  58.     CGPoint location= [touch locationInView:self.view]; 
  59.     //创建并开始动画 
  60.     [self translatonAnimation:location]; 
  61. } 
  62.  
  63. @end 

运行效果

上面实现了一个基本动画效果，但是这个动画存在一个问题：动画结束后动画图层回到了原来的位置，当然是用UIView封装的方法是没有这个问题的。如何解决这个问题呢？

前面说过图层动画的本质就是将图层内部的内容转化为位图经硬件操作形成一种动画效果，其实图层本身并没有任何的变化。上面的动画中图层并没有因为动画效果而改变它的位置（对于缩放动画其大小也是不会改变的），所以动画完成之后图层还是在原来的显示位置没有任何变化，如果这个图层在一个UIView中你会发现在UIView移动过程中你要触发UIView的点击事件也只能点击原来的位置（即使它已经运动到了别的位置），因为它的位置从来没有变过。当然解决这个问题方法比较多，这里不妨在动画完成之后重新设置它的位置。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.      
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  31.     [self.view.layer addSublayer:_layer]; 
  32. } 
  33.  
  34.  
  35.  
  36. #pragma mark 移动动画 
  37. -(void)translatonAnimation:(CGPoint)location{ 
  38.     //1.创建动画并指定动画属性 
  39.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"]; 
  40.      
  41.     //2.设置动画属性初始值和结束值 
  42. //    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不设置，默认为图层初始状态 
  43.     basicAnimation.toValue=[NSValue valueWithCGPoint:location]; 
  44.      
  45.     //设置其他动画属性 
  46.     basicAnimation.duration=5.0;//动画时间5秒 
  47.     //basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大，起到循环动画的效果 
  48.     //    basicAnimation.removedOnCompletion=NO;//运行一次是否移除动画 
  49.     basicAnimation.delegate=self; 
  50.     //存储当前位置在动画结束后使用 
  51.     [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"]; 
  52.      
  53.     //3.添加动画到图层，注意key相当于给动画进行命名，以后获得该动画时可以使用此名称获取 
  54.     [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"]; 
  55. } 
  56.  
  57. #pragma mark 点击事件 
  58. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  59.     UITouch *touch=touches.anyObject; 
  60.     CGPoint location= [touch locationInView:self.view]; 
  61.     //创建并开始动画 
  62.     [self translatonAnimation:location]; 
  63. } 
  64.  
  65. #pragma mark - 动画代理方法 
  66. #pragma mark 动画开始 
  67. -(void)animationDidStart:(CAAnimation *)anim{ 
  68.     NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  69.     NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通过前面的设置的key获得动画 
  70. } 
  71.  
  72. #pragma mark 动画结束 
  73. -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ 
  74.     NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  75.     _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue]; 
  76. } 
  77. @end 

上面通过给动画设置一个代理去监听动画的开始和结束事件，在动画开始前给动画添加一个自定义属性“KCBasicAnimationLocation”存储动画终点位置，然后在动画结束后设置动画的位置为终点位置。

如果运行上面的代码大家可能会发现另外一个问题，那就是动画运行完成后会重新从起始点运动到终点。这个问题产生的原因就是前面提到的，对于非根图层，设置图层的可动画属性（在动画结束后重新设置了position，而position是可动画属性）会产生动画效果。解决这个问题有两种办法：关闭图层隐式动画、设置动画图层为根图层。显然这里不能采取后者，因为根图层当前已经作为动画的背景。

要关闭隐式动画需要用到动画事务CATransaction，在事务内将隐式动画关闭，例如上面的代码可以改为：

  
  
  1. #pragma mark 动画结束 
  2. -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ 
  3.     NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  4.     //开启事务 
  5.     [CATransaction begin]; 
  6.     //禁用隐式动画 
  7.     [CATransaction setDisableActions:YES]; 
  8.      
  9.     _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue]; 
  10.      
  11.     //提交事务 
  12.     [CATransaction commit]; 
  13. } 

补充

上面通过在animationDidStop中重新设置动画的位置主要为了说明隐式动画关闭和动画事件之间传参的内容，有朋友发现这种方式有可能在动画运行完之后出现从原点瞬间回到终点的过程，最早在调试的时候没有发现这个问题，这里感谢这位朋友。其实解决这个问题并不难，首先必须设置fromValue，其次在动画开始前设置动画position为终点位置（当然也必须关闭隐式动画）。但是这里主要还是出于学习的目的，真正开发的时候做平移动画直接使用隐式动画即可，没有必要那么麻烦。

当然上面的动画还显得有些生硬，因为落花飘散的时候可能不仅仅是自由落体运动，本身由于空气阻力、外界风力还会造成落花在空中的旋转、摇摆等，这里不妨给图层添加一个旋转的动画。对于图层的旋转前面已经演示过怎么通过key path设置图层旋转的内容了，在这里需要强调一下，图层的形变都是基于锚点进行的。例如旋转，旋转的中心点就是图层的锚点。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.      
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.anchorPoint=CGPointMake(0.5, 0.6);//设置锚点 
  31.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  32.     [self.view.layer addSublayer:_layer]; 
  33. } 
  34.  
  35.  
  36.  
  37. #pragma mark 移动动画 
  38. -(void)translatonAnimation:(CGPoint)location{ 
  39.     //1.创建动画并指定动画属性 
  40.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"]; 
  41.      
  42.     //2.设置动画属性初始值、结束值 
  43. //    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不设置，默认为图层初始状态 
  44.     basicAnimation.toValue=[NSValue valueWithCGPoint:location]; 
  45.      
  46.     //设置其他动画属性 
  47.     basicAnimation.duration=5.0;//动画时间5秒 
  48.     //basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大，起到循环动画的效果 
  49.     //    basicAnimation.removedOnCompletion=NO;//运行一次是否移除动画 
  50.     basicAnimation.delegate=self; 
  51.     //存储当前位置在动画结束后使用 
  52.     [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"]; 
  53.      
  54.     //3.添加动画到图层，注意key相当于给动画进行命名，以后获得该图层时可以使用此名称获取 
  55.     [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"]; 
  56. } 
  57.  
  58. #pragma mark 旋转动画 
  59. -(void)rotationAnimation{ 
  60.     //1.创建动画并指定动画属性 
  61.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; 
  62.      
  63.     //2.设置动画属性初始值、结束值 
  64. //    basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2]; 
  65.     basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3]; 
  66.      
  67.     //设置其他动画属性 
  68.     basicAnimation.duration=6.0; 
  69.     basicAnimation.autoreverses=true;//旋转后再旋转到原来的位置 
  70.  
  71.      
  72.     //4.添加动画到图层，注意key相当于给动画进行命名，以后获得该动画时可以使用此名称获取 
  73.     [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"]; 
  74. } 
  75.  
  76. #pragma mark 点击事件 
  77. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  78.     UITouch *touch=touches.anyObject; 
  79.     CGPoint location= [touch locationInView:self.view]; 
  80.     //创建并开始动画 
  81.     [self translatonAnimation:location]; 
  82.      
  83.     [self rotationAnimation]; 
  84. } 
  85.  
  86. #pragma mark - 动画代理方法 
  87. #pragma mark 动画开始 
  88. -(void)animationDidStart:(CAAnimation *)anim{ 
  89.     NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  90.     NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通过前面的设置的key获得动画 
  91. } 
  92.  
  93. #pragma mark 动画结束 
  94. -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ 
  95.     NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  96.     //开启事务 
  97.     [CATransaction begin]; 
  98.     //禁用隐式动画 
  99.     [CATransaction setDisableActions:YES]; 
  100.      
  101.     _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue]; 
  102.      
  103.     //提交事务 
  104.     [CATransaction commit]; 
  105. } 
  106.  
  107. @end 

上面代码中结合两种动画操作，需要注意的是只给移动动画设置了代理，在旋转动画中并没有设置代理，否则代理方法会执行两遍。由于旋转动画会无限循环执行（上面设置了重复次数无穷大），并且两个动画的执行时间没有必然的关系，这样一来移动停止后可能还在旋转，为了让移动动画停止后旋转动画，停止就需要使用到动画的暂停和恢复方法。

核心动画的运行有一个媒体时间的概念，假设将一个旋转动画设置旋转一周用时60秒的话，那么当动画旋转90度后媒体时间就是15秒。如果此时要将动画暂停只需要让媒体时间偏移量设置为15秒即可，并把动画运行速度设置为0使其停止运动。类似的，如果又过了60秒后需要恢复动画（此时媒体时间为75秒），这时只要将动画开始开始时间设置为当前媒体时间75秒减去暂停时的时间（也就是之前定格动画时的偏移量）15秒（开始时间=75-15=60秒），那么动画就会重新计算60秒后的状态再开始运行，与此同时将偏移量重新设置为0并且把运行速度设置1。这个过程中真正起到暂停动画和恢复动画的其实是动画速度的调整，媒体时间偏移量以及恢复时的开始时间设置主要为了让动画更加连贯。

下面的代码演示了移动动画结束后旋转动画暂停，并且当再次点击动画时旋转恢复的过程(注意在移动过程中如果再次点击屏幕可以暂停移动和旋转动画，再次点击可以恢复两种动画。但是当移动结束后触发了移动动画的完成事件如果再次点击屏幕则只能恢复旋转动画，因为此时移动动画已经结束而不是暂停，无法再恢复)。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.      
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.anchorPoint=CGPointMake(0.5, 0.6);//设置锚点 
  31.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  32.     [self.view.layer addSublayer:_layer]; 
  33. } 
  34.  
  35.  
  36.  
  37. #pragma mark 移动动画 
  38. -(void)translatonAnimation:(CGPoint)location{ 
  39.     //1.创建动画并指定动画属性 
  40.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"]; 
  41.      
  42.     //2.设置动画属性初始值、结束值 
  43. //    basicAnimation.fromValue=[NSNumber numberWithInteger:50];//可以不设置，默认为图层初始状态 
  44.     basicAnimation.toValue=[NSValue valueWithCGPoint:location]; 
  45.      
  46.     //设置其他动画属性 
  47.     basicAnimation.duration=5.0;//动画时间5秒 
  48. //    basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大，起到循环动画的效果 
  49.     basicAnimation.removedOnCompletion=NO;//运行一次是否移除动画 
  50.     basicAnimation.delegate=self; 
  51.     //存储当前位置在动画结束后使用 
  52.     [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"KCBasicAnimationLocation"]; 
  53.      
  54.     //3.添加动画到图层，注意key相当于给动画进行命名，以后获得该图层时可以使用此名称获取 
  55.     [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Translation"]; 
  56. } 
  57.  
  58. #pragma mark 旋转动画 
  59. -(void)rotationAnimation{ 
  60.     //1.创建动画并指定动画属性 
  61.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; 
  62.      
  63.     //2.设置动画属性初始值、结束值 
  64. //    basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2]; 
  65.     basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3]; 
  66.      
  67.     //设置其他动画属性 
  68.     basicAnimation.duration=6.0; 
  69.     basicAnimation.autoreverses=true;//旋转后在旋转到原来的位置 
  70.     basicAnimation.repeatCount=HUGE_VALF;//设置无限循环 
  71.     basicAnimation.removedOnCompletion=NO; 
  72. //    basicAnimation.delegate=self; 
  73.  
  74.      
  75.     //4.添加动画到图层，注意key相当于给动画进行命名，以后获得该动画时可以使用此名称获取 
  76.     [_layer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"]; 
  77. } 
  78.  
  79. #pragma mark 点击事件 
  80. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  81.     UITouch *touch=touches.anyObject; 
  82.     CGPoint location= [touch locationInView:self.view]; 
  83.     //判断是否已经常见过动画，如果已经创建则不再创建动画 
  84.     CAAnimation *animation= [_layer animationForKey:@"KCBasicAnimation_Translation"]; 
  85.     if(animation){ 
  86.         if (_layer.speed==0) { 
  87.             [self animationResume]; 
  88.         }else{ 
  89.             [self animationPause]; 
  90.         } 
  91.     }else{ 
  92.         //创建并开始动画 
  93.         [self translatonAnimation:location]; 
  94.          
  95.         [self rotationAnimation]; 
  96.     } 
  97. } 
  98.  
  99. #pragma mark 动画暂停 
  100. -(void)animationPause{ 
  101.     //取得指定图层动画的媒体时间，后面参数用于指定子图层，这里不需要 
  102.     CFTimeInterval interval=[_layer convertTime:CACurrentMediaTime() fromLayer:nil]; 
  103.     //设置时间偏移量，保证暂停时停留在旋转的位置 
  104.     [_layer setTimeOffset:interval]; 
  105.     //速度设置为0，暂停动画 
  106.     _layer.speed=0; 
  107. } 
  108.  
  109. #pragma mark 动画恢复 
  110. -(void)animationResume{ 
  111.     //获得暂停的时间 
  112.     CFTimeInterval beginTime= CACurrentMediaTime()- _layer.timeOffset; 
  113.     //设置偏移量 
  114.     _layer.timeOffset=0; 
  115.     //设置开始时间 
  116.     _layer.beginTime=beginTime; 
  117.     //设置动画速度，开始运动 
  118.     _layer.speed=1.0; 
  119. } 
  120.  
  121. #pragma mark - 动画代理方法 
  122. #pragma mark 动画开始 
  123. -(void)animationDidStart:(CAAnimation *)anim{ 
  124.     NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  125.     NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通过前面的设置的key获得动画 
  126. } 
  127.  
  128. #pragma mark 动画结束 
  129. -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ 
  130.     NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame)); 
  131.      
  132.     //开启事务 
  133.     [CATransaction begin]; 
  134.     //禁用隐式动画 
  135.     [CATransaction setDisableActions:YES]; 
  136.      
  137.     _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue]; 
  138.      
  139.     //提交事务 
  140.     [CATransaction commit]; 
  141.      
  142.     //暂停动画 
  143.     [self animationPause]; 
  144.  
  145. } 
  146.  
  147. @end 

运行效果

注意：

动画暂停针对的是图层而不是图层中的某个动画。

要做无限循环的动画，动画的removedOnCompletion属性必须设置为NO，否则运行一次动画就会销毁。

关键帧动画

熟悉flash开发的朋友对于关键帧动画应该不陌生，这种动画方式在flash开发中经常用到。关键帧动画就是在动画控制过程中开发者指定主要的动画状态，至于各个状态间动画如何进行则由系统自动运算补充（每两个关键帧之间系统形成的动画称为“补间动画”），这种动画的好处就是开发者不用逐个控制每个动画帧，而只要关心几个关键帧的状态即可。

关键帧动画开发分为两种形式：一种是通过设置不同的属性值进行关键帧控制，另一种是通过绘制路径进行关键帧控制。后者优先级高于前者，如果设置了路径则属性值就不再起作用。

对于前面的落花动画效果而言其实落花的过程并不自然，很显然实际生活中它不可能沿着直线下落，这里我们不妨通过关键帧动画的values属性控制它在下落过程中的属性。假设下落过程如图：

 
在这里需要设置四个关键帧（如图中四个关键点），具体代码如下（动画创建过程同基本动画基本完全一致）： 
  
  
  1. // 
  2. //  通过values设置关键帧动画 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.  
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  31.     [self.view.layer addSublayer:_layer]; 
  32.      
  33.     //创建动画 
  34.     [self translationAnimation]; 
  35. } 
  36.  
  37. #pragma mark 关键帧动画 
  38. -(void)translationAnimation{ 
  39.     //1.创建关键帧动画并设置动画属性 
  40.     CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"]; 
  41.      
  42.     //2.设置关键帧,这里有四个关键帧 
  43.     NSValue *key1=[NSValue valueWithCGPoint:_layer.position];//对于关键帧动画初始值不能省略 
  44.     NSValue *key2=[NSValue valueWithCGPoint:CGPointMake(80, 220)]; 
  45.     NSValue *key3=[NSValue valueWithCGPoint:CGPointMake(45, 300)]; 
  46.     NSValue *key4=[NSValue valueWithCGPoint:CGPointMake(55, 400)]; 
  47.     NSArray *values=@[key1,key2,key3,key4]; 
  48.     keyframeAnimation.values=values; 
  49.     //设置其他属性 
  50.     keyframeAnimation.duration=8.0; 
  51.     keyframeAnimation.beginTime=CACurrentMediaTime()+2;//设置延迟2秒执行 
  52.      
  53.      
  54.     //3.添加动画到图层，添加动画后就会执行动画 
  55.     [_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"]; 
  56. } 
  57.  
  58. @end 

运行效果(注意运行结束没有设置图层位置为动画运动结束位置)：

上面的方式固然比前面使用基础动画效果要好一些，但其实还是存在问题，那就是落花飞落的路径是直线的，当然这个直线是根据程序中设置的四个关键帧自动形成的，那么如何让它沿着曲线飘落呢？这就是第二种类型的关键帧动画，通过描绘路径进行关键帧动画控制。假设让落花沿着下面的曲线路径飘落：

 
当然，这是一条贝塞尔曲线，学习了前篇文章之后相信对于这类曲线应该并不陌生，下面是具体实现代码： 
  
  
  1. // 
  2. //  通过path设置关键帧动画 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.      
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  31.     [self.view.layer addSublayer:_layer]; 
  32.      
  33.     //创建动画 
  34.     [self translationAnimation]; 
  35. } 
  36.  
  37. #pragma mark 关键帧动画 
  38. -(void)translationAnimation{ 
  39.     //1.创建关键帧动画并设置动画属性 
  40.     CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"]; 
  41.      
  42.     //2.设置路径 
  43.     //绘制贝塞尔曲线 
  44.     CGPathRef path=CGPathCreateMutable(); 
  45.     CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);//移动到起始点 
  46.     CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 55, 400);//绘制二次贝塞尔曲线 
  47.  
  48.     keyframeAnimation.path=path;//设置path属性 
  49.     CGPathRelease(path);//释放路径对象 
  50.     //设置其他属性 
  51.     keyframeAnimation.duration=8.0; 
  52.     keyframeAnimation.beginTime=CACurrentMediaTime()+5;//设置延迟2秒执行 
  53.      
  54.      
  55.     //3.添加动画到图层，添加动画后就会执行动画 
  56.     [_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"]; 
  57. } 
  58.  
  59. @end 

运行效果(注意运行结束没有设置图层位置为动画运动结束位置)：

看起来动画不会那么生硬了，但是这里需要注意，对于路径类型的关键帧动画系统是从描绘路径的位置开始路径，直到路径结束。如果上面的路径不是贝塞尔曲线而是矩形路径那么它会从矩形的左上角开始运行，顺时针一周回到左上角；如果指定的路径是一个椭圆，那么动画运行的路径是从椭圆右侧开始（0度）顺时针一周回到右侧。

补充--其他属性

在关键帧动画中还有一些动画属性初学者往往比较容易混淆，这里专门针对这些属性做一下介绍。

keyTimes：各个关键帧的时间控制。前面使用values设置了四个关键帧，默认情况下每两帧之间的间隔为:8/(4-1)秒。如果想要控制动画从第一帧到第二针占用时间4秒，从第二帧到第三帧时间为2秒，而从第三帧到第四帧时间2秒的话，就可以通过keyTimes进行设置。keyTimes中存储的是时间占用比例点，此时可以设置keyTimes的值为0.0，0.5，0.75，1.0（当然必须转换为NSNumber），也就是说1到2帧运行到总时间的50%，2到3帧运行到总时间的75%，3到4帧运行到8秒结束。

caculationMode：动画计算模式。还拿上面keyValues动画举例，之所以1到2帧能形成连贯性动画而不是直接从第1帧经过8/3秒到第2帧是因为动画模式是连续的（值为kCAAnimationLinear，这是计算模式的默认值）；而如果指定了动画模式为kCAAnimationDiscrete离散的那么你会看到动画从第1帧经过8/3秒直接到第2帧，中间没有任何过渡。其他动画模式还有：kCAAnimationPaced（均匀执行，会忽略keyTimes）、kCAAnimationCubic（平滑执行，对于位置变动关键帧动画运行轨迹更平滑）、kCAAnimationCubicPaced（平滑均匀执行）。

下图描绘出了几种动画模式的关系（横坐标是运行时间，纵坐标是动画属性[例如位置、透明度等]）：

动画组
实际开发中一个物体的运动往往是复合运动，单一属性的运动情况比较少，但恰恰属性动画每次进行动画设置时一次只能设置一个属性进行动画控制(不管是基础动画还是关键帧动画都是如此)，这样一来要做一个复合运动的动画就必须创建多个属性动画进行组合。对于一两种动画的组合或许处理起来还比较容易，但是对于更多动画的组合控制往往会变得很麻烦，动画组的产生就是基于这样一种情况而产生的。动画组是一系列动画的组合，凡是添加到动画组中的动画都受控于动画组，这样一来各类动画公共的行为就可以统一进行控制而不必单独设置，而且放到动画组中的各个动画可以并发执行，共同构建出复杂的动画效果。
 
动画组使用起来并不复杂，首先单独创建单个动画（可以是基础动画也可以是关键帧动画），然后将基础动画添加到动画组，最后将动画组添加到图层即可。
 
前面关键帧动画部分，路径动画看起来效果虽然很流畅，但是落花本身的旋转运动没有了，这里不妨将基础动画部分的旋转动画和路径关键帧动画进行组合使得整个动画看起来更加的和谐、顺畅。 
  
  
  1. // 
  2. //  动画组 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     CALayer *_layer; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景(注意这个图片其实在根图层) 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.      
  26.     //自定义一个图层 
  27.     _layer=[[CALayer alloc]init]; 
  28.     _layer.bounds=CGRectMake(0, 0, 10, 20); 
  29.     _layer.position=CGPointMake(50, 150); 
  30.     _layer.contents=(id)[UIImage imageNamed:@"petal.png"].CGImage; 
  31.     [self.view.layer addSublayer:_layer]; 
  32.      
  33.     //创建动画 
  34.     [self groupAnimation]; 
  35. } 
  36.  
  37. #pragma mark 基础旋转动画 
  38. -(CABasicAnimation *)rotationAnimation{ 
  39.  
  40.     CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; 
  41.  
  42.     CGFloat toValue=M_PI_2*3; 
  43.     basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3]; 
  44.  
  45. //    basicAnimation.duration=6.0; 
  46.     basicAnimation.autoreverses=true; 
  47.     basicAnimation.repeatCount=HUGE_VALF; 
  48.     basicAnimation.removedOnCompletion=NO; 
  49.      
  50.     [basicAnimation setValue:[NSNumber numberWithFloat:toValue] forKey:@"KCBasicAnimationProperty_ToValue"]; 
  51.      
  52.     return basicAnimation; 
  53. } 
  54.  
  55. #pragma mark 关键帧移动动画 
  56. -(CAKeyframeAnimation *)translationAnimation{ 
  57.     CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"]; 
  58.      
  59.     CGPoint endPoint= CGPointMake(55, 400); 
  60.     CGPathRef path=CGPathCreateMutable(); 
  61.     CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y); 
  62.     CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, endPoint.x, endPoint.y); 
  63.      
  64.     keyframeAnimation.path=path; 
  65.     CGPathRelease(path); 
  66.  
  67.     [keyframeAnimation setValue:[NSValue valueWithCGPoint:endPoint] forKey:@"KCKeyframeAnimationProperty_EndPosition"]; 
  68.      
  69.     return keyframeAnimation; 
  70. } 
  71.  
  72. #pragma mark 创建动画组 
  73. -(void)groupAnimation{ 
  74.     //1.创建动画组 
  75.     CAAnimationGroup *animationGroup=[CAAnimationGroup animation]; 
  76.      
  77.     //2.设置组中的动画和其他属性 
  78.     CABasicAnimation *basicAnimation=[self rotationAnimation]; 
  79.     CAKeyframeAnimation *keyframeAnimation=[self translationAnimation]; 
  80.     animationGroup.animations=@[basicAnimation,keyframeAnimation]; 
  81.      
  82.     animationGroup.delegate=self; 
  83.     animationGroup.duration=10.0;//设置动画时间，如果动画组中动画已经设置过动画属性则不再生效 
  84.     animationGroup.beginTime=CACurrentMediaTime()+5;//延迟五秒执行 
  85.      
  86.     //3.给图层添加动画 
  87.     [_layer addAnimation:animationGroup forKey:nil]; 
  88. } 
  89.  
  90. #pragma mark - 代理方法 
  91. #pragma mark 动画完成 
  92. -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ 
  93.     CAAnimationGroup *animationGroup=(CAAnimationGroup *)anim; 
  94.     CABasicAnimation *basicAnimation=animationGroup.animations[0]; 
  95.     CAKeyframeAnimation *keyframeAnimation=animationGroup.animations[1]; 
  96.     CGFloat toValue=[[basicAnimation valueForKey:@"KCBasicAnimationProperty_ToValue"] floatValue]; 
  97.     CGPoint endPoint=[[keyframeAnimation valueForKey:@"KCKeyframeAnimationProperty_EndPosition"] CGPointValue]; 
  98.      
  99.     [CATransaction begin]; 
  100.     [CATransaction setDisableActions:YES]; 
  101.      
  102.     //设置动画最终状态 
  103.     _layer.position=endPoint; 
  104.     _layer.transform=CATransform3DMakeRotation(toValue, 0, 0, 1); 
  105.      
  106.     [CATransaction commit]; 
  107. } 
  108.  
  109. @end 

运行效果

 

转场动画

转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤：

1.创建转场动画

2.设置转场类型、子类型（可选）及其他属性

3.设置转场后的新视图并添加动画到图层

下表列出了常用的转场类型(注意私有API是苹果官方没有公开的动画类型，但是目前通过仍然可以使用)：

另外对于支持方向设置的动画类型还包含子类型：

 在前面的文章“iOS开发系列--无限循环的图片浏览器”中为了使用UIScrollView做无限循环图片浏览器花费了不少时间在性能优化上面，这里使用转场动画利用一个UIImageView实现一个漂亮的无限循环图片浏览器。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  TransitionAnimation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-12. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define IMAGE_COUNT 5 
  11.  
  12. @interface KCMainViewController (){ 
  13.     UIImageView *_imageView; 
  14.     int _currentIndex; 
  15. } 
  16.  
  17. @end 
  18.  
  19. @implementation KCMainViewController 
  20.  
  21. - (void)viewDidLoad { 
  22.     [super viewDidLoad]; 
  23.      
  24.     //定义图片控件 
  25.     _imageView=[[UIImageView alloc]init]; 
  26.     _imageView.frame=[UIScreen mainScreen].applicationFrame; 
  27.     _imageView.contentMode=UIViewContentModeScaleAspectFit; 
  28.     _imageView.image=[UIImage imageNamed:@"0.jpg"];//默认图片 
  29.     [self.view addSubview:_imageView]; 
  30.     //添加手势 
  31.     UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)]; 
  32.     leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft; 
  33.     [self.view addGestureRecognizer:leftSwipeGesture]; 
  34.      
  35.     UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)]; 
  36.     rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight; 
  37.     [self.view addGestureRecognizer:rightSwipeGesture]; 
  38. } 
  39.  
  40. #pragma mark 向左滑动浏览下一张图片 
  41. -(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{ 
  42.     [self transitionAnimation:YES]; 
  43. } 
  44.  
  45. #pragma mark 向右滑动浏览上一张图片 
  46. -(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{ 
  47.     [self transitionAnimation:NO]; 
  48. } 
  49.  
  50.  
  51. #pragma mark 转场动画 
  52. -(void)transitionAnimation:(BOOL)isNext{ 
  53.     //1.创建转场动画对象 
  54.     CATransition *transition=[[CATransition alloc]init]; 
  55.      
  56.     //2.设置动画类型,注意对于苹果官方没公开的动画类型只能使用字符串，并没有对应的常量定义 
  57.     transition.type=@"cube"; 
  58.      
  59.     //设置子类型 
  60.     if (isNext) { 
  61.         transition.subtype=kCATransitionFromRight; 
  62.     }else{ 
  63.         transition.subtype=kCATransitionFromLeft; 
  64.     } 
  65.     //设置动画时常 
  66.     transition.duration=1.0f; 
  67.      
  68.     //3.设置转场后的新视图添加转场动画 
  69.     _imageView.image=[self getImage:isNext]; 
  70.     [_imageView.layer addAnimation:transition forKey:@"KCTransitionAnimation"]; 
  71. } 
  72.  
  73. #pragma mark 取得当前图片 
  74. -(UIImage *)getImage:(BOOL)isNext{ 
  75.     if (isNext) { 
  76.         _currentIndex=(_currentIndex+1)%IMAGE_COUNT; 
  77.     }else{ 
  78.         _currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT; 
  79.     } 
  80.     NSString *imageName=[NSString stringWithFormat:@"%i.jpg",_currentIndex]; 
  81.     return [UIImage imageNamed:imageName]; 
  82. } 
  83. @end 

运行效果

代码十分简单，但是效果和性能却很惊人。当然演示代码有限，其他动画类型大家可以自己实现，效果都很绚丽。

逐帧动画

前面介绍了核心动画中大部分动画类型，但是做过动画处理的朋友都知道，在动画制作中还有一种动画类型“逐帧动画”。说到逐帧动画相信很多朋友第一个想到的就是UIImageView，通过设置UIImageView的animationImages属性，然后调用它的startAnimating方法去播放这组图片。当然这种方法在某些场景下是可以达到逐帧的动画效果，但是它也存在着很大的性能问题，并且这种方法一旦设置完图片中间的过程就无法控制了。当然，也许有朋友会想到利用iOS的定时器NSTimer定时更新图片来达到逐帧动画的效果。这种方式确实可以解决UIImageView一次性加载大量图片的问题，而且让播放过程可控，唯一的缺点就是定时器方法调用有时可能会因为当前系统执行某种比较占用时间的任务造成动画连续性出现问题。

虽然在核心动画没有直接提供逐帧动画类型，但是却提供了用于完成逐帧动画的相关对象CADisplayLink。CADisplayLink是一个计时器，但是同NSTimer不同的是，CADisplayLink的刷新周期同屏幕完全一致。例如在iOS中屏幕刷新周期是60次/秒，CADisplayLink刷新周期同屏幕刷新一致也是60次/秒，这样一来使用它完成的逐帧动画（又称为“时钟动画”）完全感觉不到动画的停滞情况。

在iOS开篇“IOS开发系列--IOS程序开发概览”中就曾说过：iOS程序在运行后就进入一个消息循环中（这个消息循环称为“主运行循环”），整个程序相当于进入一个死循环中，始终等待用户输入。将CADisplayLink加入到主运行循环队列后，它的时钟周期就和主运行循环保持一致，而主运行循环周期就是屏幕刷新周期。在CADisplayLink加入到主运行循环队列后就会循环调用目标方法，在这个方法中更新视图内容就可以完成逐帧动画。

当然这里不得不强调的是逐帧动画性能势必较低，但是对于一些事物的运动又不得不选择使用逐帧动画，例如人的运动，这是一个高度复杂的运动，基本动画、关键帧动画是不可能解决的。所大家一定要注意在循环方法中尽可能的降低算法复杂度，同时保证循环过程中内存峰值尽可能低。下面以一个鱼的运动为例为大家演示一下逐帧动画。

  
  
  1. // 
  2. //  KCMainViewController.m 
  3. //  DisplayLink 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define IMAGE_COUNT 10 
  11.  
  12. @interface KCMainViewController (){ 
  13.     CALayer *_layer; 
  14.     int _index; 
  15.     NSMutableArray *_images; 
  16. } 
  17.  
  18. @end 
  19.  
  20. @implementation KCMainViewController 
  21.  
  22. - (void)viewDidLoad { 
  23.     [super viewDidLoad]; 
  24.      
  25.     //设置背景 
  26.     self.view.layer.contents=(id)[UIImage imageNamed:@"bg.png"].CGImage; 
  27.      
  28.     //创建图像显示图层 
  29.     _layer=[[CALayer alloc]init]; 
  30.     _layer.bounds=CGRectMake(0, 0, 87, 32); 
  31.     _layer.position=CGPointMake(160, 284); 
  32.     [self.view.layer addSublayer:_layer]; 
  33.      
  34.     //由于鱼的图片在循环中会不断创建，而10张鱼的照片相对都很小 
  35.     //与其在循环中不断创建UIImage不如直接将10张图片缓存起来 
  36.     _images=[NSMutableArray array]; 
  37.     for (int i=0; i<10; ++i) { 
  38.         NSString *imageName=[NSString stringWithFormat:@"fish%i.png",i]; 
  39.         UIImage *image=[UIImage imageNamed:imageName]; 
  40.         [_images addObject:image]; 
  41.     } 
  42.  
  43.      
  44.     //定义时钟对象 
  45.     CADisplayLink *displayLink=[CADisplayLink displayLinkWithTarget:self selector:@selector(step)]; 
  46.     //添加时钟对象到主运行循环 
  47.     [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode]; 
  48. } 
  49.  
  50. #pragma mark 每次屏幕刷新就会执行一次此方法(每秒接近60次) 
  51. -(void)step{ 
  52.     //定义一个变量记录执行次数 
  53.     static int s=0; 
  54.     //每秒执行6次 
  55.     if (++s%10==0) { 
  56.         UIImage *image=_images[_index]; 
  57.         _layer.contents=(id)image.CGImage;//更新图片 
  58.         _index=(_index+1)%IMAGE_COUNT; 
  59.     } 
  60. } 
  61. @end 

运行效果

注意：上面仅仅演示了逐帧动画的过程，事实上结合其他动画类型可以让整条鱼游动起来，这里不再赘述。
 
UIView动画封装
有了前面核心动画的知识，相信大家开发出一般的动画效果应该不在话下。在核心动画开篇也给大家说过，其实UIView本身对于基本动画和关键帧动画、转场动画都有相应的封装，在对动画细节没有特殊要求的情况下使用起来也要简单的多。可以说在日常开发中90%以上的情况使用UIView的动画封装方法都可以搞定，因此在熟悉了核心动画的原理之后还是有必要给大家简单介绍一下UIView中各类动画使用方法的。由于前面核心动画内容已经进行过详细介绍，学习UIView的封装方法根本是小菜一碟，这里对于一些细节就不再赘述了。
 
基础动画
基础动画部分和前面的基础动画演示相对应，演示点击屏幕落叶飘落到鼠标点击位置的过程。注意根据前面介绍的隐式动画知识其实非根图层直接设置终点位置不需要使用UIView的动画方法也可以实现动画效果，因此这里落花不再放到图层中而是放到了一个UIImageView中。
 
下面的代码演示了通过block和静态方法实现动画控制的过程： 
   
   
  1. // 
  2. //  UIView实现基础动画 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     UIImageView *_imageView; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.  
  22.     //设置背景 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.  
  26.     //创建图像显示控件 
  27.     _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"petal.png"]]; 
  28.     _imageView.center=CGPointMake(50, 150); 
  29.     [self.view addSubview:_imageView]; 
  30. } 
  31.  
  32. #pragma mark 点击事件 
  33. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  34.     UITouch *touch=touches.anyObject; 
  35.     CGPoint location= [touch locationInView:self.view]; 
  36.     //方法1：block方式 
  37.     /*开始动画，UIView的动画方法执行完后动画会停留在重点位置，而不需要进行任何特殊处理 
  38.      duration:执行时间 
  39.      delay:延迟时间 
  40.      options:动画设置，例如自动恢复、匀速运动等 
  41.      completion:动画完成回调方法 
  42.      */ 
  43. //    [UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ 
  44. //        _imageView.center=location; 
  45. //    } completion:^(BOOL finished) { 
  46. //        NSLog(@"Animation end."); 
  47. //    }]; 
  48.      
  49.     //方法2：静态方法 
  50.     //开始动画 
  51.     [UIView beginAnimations:@"KCBasicAnimation" context:nil]; 
  52.     [UIView setAnimationDuration:5.0]; 
  53.     //[UIView setAnimationDelay:1.0];//设置延迟 
  54.     //[UIView setAnimationRepeatAutoreverses:NO];//是否回复 
  55.     //[UIView setAnimationRepeatCount:10];//重复次数 
  56.     //[UIView setAnimationStartDate:(NSDate *)];//设置动画开始运行的时间 
  57.     //[UIView setAnimationDelegate:self];//设置代理 
  58.     //[UIView setAnimationWillStartSelector:(SEL)];//设置动画开始运动的执行方法 
  59.     //[UIView setAnimationDidStopSelector:(SEL)];//设置动画运行结束后的执行方法 
  60.      
  61.     _imageView.center=location; 
  62.      
  63.      
  64.     //开始动画 
  65.     [UIView commitAnimations]; 
  66. } 
  67. @end 

补充--弹簧动画效果

由于在iOS开发中弹性动画使用很普遍，所以在iOS7苹果官方直接提供了一个方法用于弹性动画开发，下面简单的演示一下：

  
  
  1. // 
  2. //  UIView实现基础动画--弹性动画 
  3. //  Animation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     UIImageView *_imageView; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.  
  22.     //创建图像显示控件 
  23.     _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"ball.png"]]; 
  24.     _imageView.center=CGPointMake(160, 50); 
  25.     [self.view addSubview:_imageView]; 
  26. } 
  27.  
  28. #pragma mark 点击事件 
  29. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  30.     UITouch *touch=touches.anyObject; 
  31.     CGPoint location= [touch locationInView:self.view]; 
  32.     /*创建弹性动画 
  33.      damping:阻尼，范围0-1，阻尼越接近于0，弹性效果越明显 
  34.      velocity:弹性复位的速度 
  35.     */ 
  36.     [UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{ 
  37.         _imageView.center=location; //CGPointMake(160, 284); 
  38.     } completion:nil]; 
  39. } 
  40. @end 

运行效果

补充--动画设置参数
在动画方法中有一个option参数，UIViewAnimationOptions类型，它是一个枚举类型，动画参数分为三类，可以组合使用：
1.常规动画属性设置（可以同时选择多个进行设置）
UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。
UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。
UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat：重复运行动画。
UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套动画速度设置。
UIViewAnimationOptionAllowAnimatedContent：动画过程中重绘视图（注意仅仅适用于转场动画）。 
UIViewAnimationOptionShowHideTransitionViews：视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。
2.动画速度控制（可从其中选择一个设置）
UIViewAnimationOptionCurveEaseInOut：动画先缓慢，然后逐渐加速。
UIViewAnimationOptionCurveEaseIn ：动画逐渐变慢。
UIViewAnimationOptionCurveEaseOut：动画逐渐加速。
UIViewAnimationOptionCurveLinear ：动画匀速执行，默认值。
3.转场类型（仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）
UIViewAnimationOptionTransitionNone：没有转场动画效果。
UIViewAnimationOptionTransitionFlipFromLeft ：从左侧翻转效果。
UIViewAnimationOptionTransitionFlipFromRight：从右侧翻转效果。
UIViewAnimationOptionTransitionCurlUp：向后翻页的动画过渡效果。   
UIViewAnimationOptionTransitionCurlDown ：向前翻页的动画过渡效果。   
UIViewAnimationOptionTransitionCrossDissolve：旧视图溶解消失显示下一个新视图的效果。   
UIViewAnimationOptionTransitionFlipFromTop ：从上方翻转效果。   
UIViewAnimationOptionTransitionFlipFromBottom：从底部翻转效果。

关键帧动画
从iOS7开始UIView动画中封装了关键帧动画，下面就来看一下如何使用UIView封装方法进行关键帧动画控制，这里实现前面关键帧动画部分对于落花的控制。 
   
   
  1. // 
  2. //  UIView关键帧动画 
  3. //  UIViewAnimation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-22. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10.  
  11. @interface KCMainViewController (){ 
  12.     UIImageView *_imageView; 
  13. } 
  14.  
  15. @end 
  16.  
  17. @implementation KCMainViewController 
  18.  
  19. - (void)viewDidLoad { 
  20.     [super viewDidLoad]; 
  21.      
  22.     //设置背景 
  23.     UIImage *backgroundImage=[UIImage imageNamed:@"background.jpg"]; 
  24.     self.view.backgroundColor=[UIColor colorWithPatternImage:backgroundImage]; 
  25.  
  26.     //创建图像显示控件 
  27.     _imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"petal.png"]]; 
  28.     _imageView.center=CGPointMake(50, 150); 
  29.     [self.view addSubview:_imageView]; 
  30. } 
  31.  
  32. -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 
  33.     //UITouch *touch=touches.anyObject; 
  34.     //CGPoint location= [touch locationInView:self.view]; 
  35.      
  36.     /*关键帧动画 
  37.      options: 
  38.      */ 
  39.     [UIView animateKeyframesWithDuration:5.0 delay:0 options: UIViewAnimationOptionCurveLinear| UIViewAnimationOptionCurveLinear animations:^{ 
  40.         //第二个关键帧（准确的说第一个关键帧是开始位置）:从0秒开始持续50%的时间，也就是5.0*0.5=2.5秒 
  41.         [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{ 
  42.             _imageView.center=CGPointMake(80.0, 220.0); 
  43.         }]; 
  44.         //第三个关键帧，从0.5*5.0秒开始，持续5.0*0.25=1.25秒 
  45.         [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{ 
  46.             _imageView.center=CGPointMake(45.0, 300.0); 
  47.         }]; 
  48.         //第四个关键帧：从0.75*5.0秒开始，持所需5.0*0.25=1.25秒 
  49.         [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{ 
  50.             _imageView.center=CGPointMake(55.0, 400.0); 
  51.         }]; 
  52.          
  53.     } completion:^(BOOL finished) { 
  54.         NSLog(@"Animation end."); 
  55.     }]; 
  56. } 
  57. @end 

补充--动画设置参数

对于关键帧动画也有一些动画参数设置options，UIViewKeyframeAnimationOptions类型，和上面基本动画参数设置有些差别，关键帧动画设置参数分为两类，可以组合使用：

1.常规动画属性设置（可以同时选择多个进行设置）

UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。

UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。

UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。

UIViewAnimationOptionRepeat：重复运行动画。

UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。

UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。

UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。

2.动画模式设置（同前面关键帧动画动画模式一一对应，可以从其中选择一个进行设置）

UIViewKeyframeAnimationOptionCalculationModeLinear：连续运算模式。

UIViewKeyframeAnimationOptionCalculationModeDiscrete ：离散运算模式。

UIViewKeyframeAnimationOptionCalculationModePaced：均匀执行运算模式。

UIViewKeyframeAnimationOptionCalculationModeCubic：平滑运算模式。

UIViewKeyframeAnimationOptionCalculationModeCubicPaced：平滑均匀运算模式。

注意：前面说过关键帧动画有两种形式，上面演示的是属性值关键帧动画，路径关键帧动画目前UIView还不支持。

转场动画

从iOS4.0开始，UIView直接封装了转场动画，使用起来同样很简单。

  
  
  1. // 
  2. //  UIView转场动画 
  3. //  TransitionAnimation 
  4. // 
  5. //  Created by Kenshin Cui on 14-3-12. 
  6. //  Copyright (c) 2014年 Kenshin Cui. All rights reserved. 
  7. // 
  8.  
  9. #import "KCMainViewController.h" 
  10. #define IMAGE_COUNT 5 
  11.  
  12. @interface KCMainViewController (){ 
  13.     UIImageView *_imageView; 
  14.     int _currentIndex; 
  15. } 
  16.  
  17. @end 
  18.  
  19. @implementation KCMainViewController 
  20.  
  21. - (void)viewDidLoad { 
  22.     [super viewDidLoad]; 
  23.      
  24.     //定义图片控件 
  25.     _imageView=[[UIImageView alloc]init]; 
  26.     _imageView.frame=[UIScreen mainScreen].applicationFrame; 
  27.     _imageView.contentMode=UIViewContentModeScaleAspectFit; 
  28.     _imageView.image=[UIImage imageNamed:@"0.jpg"];//默认图片 
  29.     [self.view addSubview:_imageView]; 
  30.     //添加手势 
  31.     UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)]; 
  32.     leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft; 
  33.     [self.view addGestureRecognizer:leftSwipeGesture]; 
  34.      
  35.     UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)]; 
  36.     rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight; 
  37.     [self.view addGestureRecognizer:rightSwipeGesture]; 
  38. } 
  39.  
  40. #pragma mark 向左滑动浏览下一张图片 
  41. -(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{ 
  42.     [self transitionAnimation:YES]; 
  43. } 
  44.  
  45. #pragma mark 向右滑动浏览上一张图片 
  46. -(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{ 
  47.     [self transitionAnimation:NO]; 
  48. } 
  49.  
  50.  
  51. #pragma mark 转场动画 
  52. -(void)transitionAnimation:(BOOL)isNext{ 
  53.     UIViewAnimationOptions option; 
  54.     if (isNext) { 
  55.         option=UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromRight; 
  56.     }else{ 
  57.         option=UIViewAnimationOptionCurveLinear|UIViewAnimationOptionTransitionFlipFromLeft; 
  58.     } 
  59.      
  60.     [UIView transitionWithView:_imageView duration:1.0 options:option animations:^{ 
  61.         _imageView.image=[self getImage:isNext]; 
  62.     } completion:nil]; 
  63. } 
  64.  
  65. #pragma mark 取得当前图片 
  66. -(UIImage *)getImage:(BOOL)isNext{ 
  67.     if (isNext) { 
  68.         _currentIndex=(_currentIndex+1)%IMAGE_COUNT; 
  69.     }else{ 
  70.         _currentIndex=(_currentIndex-1+IMAGE_COUNT)%IMAGE_COUNT; 
  71.     } 
  72.     NSString *imageName=[NSString stringWithFormat:@"%i.jpg",_currentIndex]; 
  73.     return [UIImage imageNamed:imageName]; 
  74. } 
  75. @end 

上面的转场动画演示中，其实仅仅有一个视图UIImageView做转场动画，每次转场通过切换UIImageView的内容而已。如果有两个完全不同的视图，并且每个视图布局都很复杂，此时要在这两个视图之间进行转场可以使用+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(4_0)方法进行两个视图间的转场，需要注意的是默认情况下转出的视图会从父视图移除，转入后重新添加，可以通过UIViewAnimationOptionShowHideTransitionViews参数设置，设置此参数后转出的视图会隐藏（不会移除）转入后再显示。

注意：转场动画设置参数完全同基本动画参数设置；同直接使用转场动画不同的是使用UIView的装饰方法进行转场动画其动画效果较少，因为这里无法直接使用私有API。

云杉男爵
关注
专栏目录
iOS动画编程：使用CALayer实现华丽动画效果
CodeRoarX的博客
10-03 75
接着，我们将动画的持续时间设置为1.0秒，并将动画添加到视图的图层中，使用"scaleAnimation"作为动画的标识符。接着，我们将动画的持续时间设置为1.0秒，并将动画添加到视图的图层中，使用"scaleAnimation"作为动画的标识符。接着，我们将动画的持续时间设置为2.0秒，并将动画添加到渐变图层中，使用"gradientAnimation"作为动画的标识符。接着，我们将动画的持续时间设置为2.0秒，并将动画添加到渐变图层中，使用"gradientAnimation"作为动画的标识符。
iOS开发之核心动画（Core Animation）
编码演绎世界
10-14 949
1、概述       Core Animation是一个图形渲染和动画的底层框架，用于 iOS和Mac OS X。可以提供专业级的动画效果，是高层图形技术的基础。 2、使用        通过CALayer类实现，CALayerkey可以理解成是UIView的一个底层，
iOS开发UI篇—核心动画(关键帧动画)
weixin_33777877的博客
06-21 140
iOS开发UI篇—核心动画(关键帧动画) 一、简单介绍 是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析： values：就是上述的NSArray对象。里面的元...
iOS开发UI篇—核心动画(基础动画)
weixin_33897722的博客
06-21 157
iOS开发UI篇—核心动画(基础动画) 一、简单介绍 CAPropertyAnimation的子类 属性解析: fromValue：keyPath相应属性的初始值 toValue：keyPath相应属性的结束值 随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue 如果fillMode=kCAFillModeFo...
iOS动画之CALayer
weixin_30507269的博客
01-28 103
UIView与CALayer的关系 1,UIView可以相应事件,CALayer不可以 2,UIView侧重于内容的管理,CALayer侧重于内容的绘制 3,两者紧密联系,缺一不可 UIView自带一个readonly的属性layer,大小和UIView的大小一致 下面我们来介绍一下比较重要的layer属性 首先我们先来说一下基本动画 CAAnimation:作用...
核心动画——Core Animation
诠释完美
10-31 2779
一. CALayer (一). CALayer简介 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView，其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个
iOS开发教程之扇形动画的实现
01-20
在iOS开发中，扇形动画是一种常用于图表展示或进度指示的动态效果。这篇教程将指导开发者如何实现这种效果。扇形动画的核心在于利用`CAShapeLayer`和`UIBezierPath`来创建形状，并通过`CABasicAnimation`来驱动动画...
ios开发-iOS开发实用demo之iOS核心动画集开发.zip
最新发布
03-03
在iOS开发中，动画是提升用户体验的关键因素，它能让应用变得更加生动、有趣且易于理解。本资源包"ios开发_iOS开发实用demo之iOS核心动画集开发.zip"显然是为了帮助开发者深入理解和实践iOS中的核心动画技术。以下是...
IOS 开发之UIView动画的实例详解
08-29
UIView动画是一个非常重要的技术，在IOS开发中广泛应用于各种App的开发中。 在UIView动画中，最重要的就是使用beginAnimations:context:方法来启动一个动画，然后使用commitAnimations方法来提交动画。也就是说，在...
iOS开发系列--让你的应用“动”起来--动画
Gaos的BLOG
07-16 1100
iOS开发系列--让你的应用“动”起来 2014-09-15 06:29 by KenshinCui, 41740 阅读, 88 评论, 收藏, 编辑 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核心动画创建基础动画、关键帧动画、动画组
ios应用源码之动画 2018127
12-07
本资料包“ios应用源码之动画 2018127”提供了一套关于iOS应用动画的源代码，帮助开发者深入理解和实践iOS平台上的动画技术。下面将详细探讨iOS动画的几个重要知识点。 1. **Core Animation**: iOS中的动画主要基于...
iOS开发中的核心动画-Core Animation-
whjForWork的专栏
03-18 1854
Core Animation、CAAnimation的继承结构、CAPropertyAnimation、CABasicAnimation、CAKeyframeAnimation、CAAnimationGroup、UIView动画、Block动画、UIImageView的帧动画、UIActivityIndicatorView
iOS开发-iOS动画开发CoreAnimation核心动画开发-CoreAnimation核心动画综合实践
伪随机的张三
10-04 2517
一、 CoreAnimation 核心动画 CoreAnimation提供高帧速率和流畅的动画，而不会给CPU带来负担并降低应用程序的速度。绘制动画的每个帧所需的大部分工作都是为我们完成的。我们可以配置动画参数，例如起点和终点，Core Animation会完成其余工作，将大部分工作交给专用图形硬件，以加速渲染。 1.核心动画基本概念：CoreAnimation是跨平台的，支持 iOS 和 M...
iOS：CALayer和CALayer动画
a526001650a的专栏
04-14 630
说明： CALayer是层的概念，每个UIView有一个CALayer，可实现各种样式设置，CALayer还可单独加入某个UIiew上成为子视图(无触控事件)； CALayer一些属性改变时自带动画，如要关闭需要开启事务，在事务中关闭； CALayer常用动画： CABasicAnimation(核心动画)、CAKeyframeAnimation(帧动画)、CATransition(过渡动...
iOS动画-CALayer隐式动画原理与特性
gcs的博客
10-22 667
Core Animation的一个非常显著的特性是就是实现动画，而且它支持隐式动画和显式动画两种形式，本篇我们主要从隐式动画说起； 本篇主要内容： 1.何为隐式动画 2.隐式动画原理-事务与图层行为 3.隐式动画的关闭与显示 4.隐式动画自定义图层行为 一、何为隐式动画？ Core Animation是基于这样的一个假设：屏幕上的任何东西都可以(或者可能)做动画，它并不需要手动打开，反而是需要我们明确的关闭，否则动画会一直存在。所谓隐式动画，其实是指我们可以在不设定任何动画类型的情况下，仅仅改变CAL
iOS开发系列--让你的应用“动”起来--iOS动画
fenglinyunshi的博客
01-07 554
iOS开发动画效果以及图层。。。。
IOS 波纹进度(waveProgress)动画实现
01-20
在iOS开发中，利用动画可以创造出各种独特的视觉体验，例如波浪效果、图片轮播、按钮点击反馈等。LXWaveProgressView提供的波纹进度动画就是一种实现动态进度指示的有效方式。通过深入理解并熟练运用此类组件，...
iOS小技能：CALayer（1、CALayer和UIVIew的关系 2、CALayer的position、anchorPoint属性的作用）
热门推荐
iOS逆向与安全
07-02 1万+
概要掌握 1、CALayer和UIVIew的关系 CALayer 负责视图中的内容和动画–不会改变CALayer的真实属性 UIVIew 负责监听和响应事件 2、CALayer的position、anchorPoint属性的作用 3、核心动画基本概念 4、基本动画 5、关键帧动画 6、动画组 7、转场动画一、CALayer在创建一个UIView对象时，UIView内部会自动创建一个图层（
iOS中图片动画的三种模式及基本的代码实现
weixin_30929195的博客
05-15 133
-(void)play { //第一种图片动画模式 头尾方式 //头尾方式 [UIView beginAnimations:nil context:nil];//动画开始 [UIView setAnimationDuration:10];//设置动画播放时长 /*内部写图片处理*/ [UIView commitAnima...
网络开发---UIWebView
会飞的石头
10-26 492
网络开发---UIWebView
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值