http://www.xs360.cn 《IOS应用开发教程》 QQ学习群：262779381

第八章 图形与图像处理 QQ学习群：262779381

1.掌握UIImageView的幻灯片播放方法。 2.了解QuarzCore框架的基本内容。 教学目标： 1.掌握UIImageView的幻灯片播放方法。 2.了解QuarzCore框架的基本内容。 3.掌握QuarzCore框架绘制图形的基本方法。 4.掌握IOS中UIView动画的使用方法。 QQ学习群：262779381

8.1简单图片浏览动画实现 在本小节中，我们将对UIScrollView和UIPageControl的混合使用做出讲 解，以实现应用图片滑动展示效果。 UIScrollView是UIView的子类，它用于滚动视图的显示，以及当前视图显 示不了所有内容时滚动显示，我们的图片浏览功能也是建立在UIScrollView滚 动视图的基础上。PageControl一般是和UIScrollView一起使用，它是用于显 示图片浏览动画时具体第几张图片。下面我们通过一个实例来学习如何实现图 片浏览动画。 在Xcode中新建工程，使用Single View Application模板，在 viewController.h头文件中，声明UIScrollView和UIPageControl两个实例。 QQ学习群：262779381

QQ学习群：262779381 ----------------viewController.h--------------- 1.#import <UIKit/UIKit.h> 2.@interface ViewController : UIViewController<UIScrollViewDelegate> 3.@property (nonatomic, retain)UIScrollView *scrollView; 4.@property (nonatomic, retain)UIPageControl *pageControl; 5.@end 方法名称 含义 - (void)scrollViewDidScroll:(UIScrollView *)scrollView; 当视图滚动时调用方法 - (void)scrollViewDidZoom:(UIScrollView *)scrollView 当视图放大缩小调用方法 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView; 当视图开始拖动时调用方法 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; 当视图结束拖动时调用方法 - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView; 当视图滚动到头部时调用方法 QQ学习群：262779381

在我们的例子中，需要用到的协议方法是- (void)scrollViewDidScroll:(UIScrollView 在我们的例子中，需要用到的协议方法是- (void)scrollViewDidScroll:(UIScrollView *)scrollView，其他方法有兴趣的读者可以自己实现。 然后在.m文件中对这两个实例进行布局，并设置相应属性，并实现滚动视图的协议方法。 ----------------viewController.m--------------- 6.#import "ViewController.h" 7.@interface ViewController () 8.@end 9.@implementation ViewController 10.@synthesize scrollView,pageControl; 11.- (void)viewDidLoad { 12. [super viewDidLoad]; 13. //滚动视图 14. scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 400)]; 15. scrollView.contentSize = CGSizeMake(320*3, 400); 16. scrollView.pagingEnabled = YES; 17. scrollView.delegate = self; 18. scrollView.backgroundColor = [UIColor grayColor]; 19. scrollView.showsHorizontalScrollIndicator = NO; 20. scrollView.showsVerticalScrollIndicator = NO; 21. [self.view addSubview:scrollView]; QQ学习群：262779381

22. //分页控件 23. pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 380, 320, 10)]; 24. pageControl.numberOfPages = 3; 25. pageControl.currentPage = 1; 26. [self.view addSubview:pageControl]; 27. for (int i=1; i <=3; i++) { 28. UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[NSString 29. stringWithFormat:@"0%i.jpg",i]]]; 30. imageView.frame = CGRectMake(320*(i-1), 0, 320, 400); 31. [self.scrollView addSubview:imageView]; 32. } 33.} QQ学习群：262779381

我们看到滚动视图的设置部分，首先我们初始化了它在视图中的位置， contentSize属性是滚动视图整体大小，这里我们需要放置3张照片，每张照 片的长度为320，高为400，所以我们设置contentSize的大小为（320*3， 400），接下来设置pagingEnabled属性为YES，只有这样，滚动视图才能滚 动，然后设置代理。然后将showsHorizontalScrollIndicator 和 showsVerticalScrollIndicator 属性设置为NO，不显示水平垂直滚动条，一 般的应用都会隐藏。 接下来的分页控件，设置了numberOfPages为3，即显示3张图片， currentPage为1，默认页面为1，然后通过for循环将图片添加到scrollView 中。 最后实现UIScrollView的协议方法。 34.- (void) scrollViewDidScroll: (UIScrollView *) aScrollView 35.{ 36. CGPoint offset = scrollView.contentOffset; 37. self.pageControl.currentPage = offset.x / 320; 38.} QQ学习群：262779381

运行模拟器，我们可以看到最后的效果如图所示。左右滑动图片，就可以看到 图片相应左右移动。 QQ学习群：262779381

8.2自定义绘图（Quarz 2D） Quarz 2D是IOS中绘制图形的一个强大的框架，我们可以使用Apple为我 们提供的Quarz API来绘制路径、描影、透明度设置、反锯齿等等，Quarz 2D的强大之处在于它可以借助图形硬件的功能绘制出很漂亮的图形。 在本小节中，我们用最简单的语言与代码向读者讲述如何在一个视图上绘 制线条，矩形以及圆形，并为他们着色，拿起我们的画笔，画出最美的图形吧。 在此之前，我们还需要向读者介绍在Quarz 2D框架中重要的一个概念， 即图形上下文，Graphics Context，它是一个数据类型（CGContextRef）， 用于封装Quartz绘制图像到输出设备的信息，也就是说，我们如果要在输出设 备上绘制图形，就必须获取当前的图形上下文。 QQ学习群：262779381

8.2.1绘制线条 在Xcode中新建一个项目，使用Single View Application模板 ，需要注意的是，绘图的工作全部是在UIView中进行，也就是说我 们还需要创建一个父类是UIView的类DrawView。在DrawView的 draw方法中绘制线条。 DrawView类创建完成后，我们在viewController中对其进行 初始化，设置它在视图中的位置。 QQ学习群：262779381

-----------ViewController. m------------- 1. #import "ViewController -----------ViewController.m------------- 1.#import "ViewController.h" 2.#import "DrawView.h" 3.@interface ViewController () 4.@end 5.@implementation ViewController 6.- (void)viewDidLoad { 7. [super viewDidLoad]; 8. // Do any additional setup after loading the view, typically from a nib. 9. DrawView *drawView = [[DrawView alloc]initWithFrame:CGRectMake(20, 20, 280, 300)]; 10. drawView.backgroundColor = [UIColor grayColor]; 11. [self.view addSubview:drawView]; 12.} QQ学习群：262779381

我们将DrawView实例的大小设置为280*300，背景色为灰色，然 后在DrawView类的drawRect方法中绘制线条。绘制线条的步骤如 下： ① 获取图形上下文 ② 设置起点 ③ 设置终点 ④ 渲染连线 在渲染前，我们还可以设置线条的线型、颜色等属性。 QQ学习群：262779381

-----------DrawView. m------------- 1. #import "DrawView. h" 2 -----------DrawView.m------------- 1.#import "DrawView.h" 2.@implementation DrawView 3.- (void)drawRect:(CGRect)rect { 4. //获取图形上下文 5.CGContextRef contextRef = UIGraphicsGetCurrentContext(); 6.//设置线段起点 7.CGContextMoveToPoint(contextRef, 20, 20); 8.//设置线段终点 9.CGContextAddLineToPoint(contextRef, 240, 240); 10.//渲染线段 11. CGContextStrokePath(contextRef); 12.} 13.@end QQ学习群：262779381

http://www.10lab.cn QQ学习群：262779381 我们首先获取图形上下文，然后通过图形上下文设置线段起点，坐标为（20，20），然 后设置终点为（240，240），最后进行渲染，完全按照我们上面讲的绘图步骤来执行。 运行模拟器，可以看到最后的效果如图所示。 QQ学习群：262779381

我们还可以设置线条的线型和颜色，分别通过CGContextSetLineWidth和 CGContextSetRGBStrokeColor方法进行设置。在drawRect方法中添加如下加粗的两 行代码。 14.- (void)drawRect:(CGRect)rect { 15. //获取图形上下文 16. CGContextRef contextRef = UIGraphicsGetCurrentContext(); 17. //设置线型 18. CGContextSetLineWidth(contextRef, 5); 19. //设置颜色 20. CGContextSetRGBStrokeColor(contextRef, 1, 1, 0.5, 1); 21. //设置线段起点 22. CGContextMoveToPoint(contextRef, 20, 20); 23. //设置线段终点 24. CGContextAddLineToPoint(contextRef, 240, 240); 25. //渲染线段 26. CGContextStrokePath(contextRef); 27.} QQ学习群：262779381

运行模拟器，可以看到最后修改的线条如图所示。 现在画布（视图）中只绘制了一条线条，那么我们能 画多条线条吗？并连成一个图形吗？答案当然是肯定 的，我们现在在这条线条的基础上，再绘制一条线条 ，调用两次CGContextAddLineToPoint方法，并设 置坐标即可。 39.//设置线段节点 40.CGContextAddLineToPoint(contextRef, 240, 280); 41.//设置线段重点 42.CGContextAddLineToPoint(contextRef, 20, 280); QQ学习群：262779381

8.2.2绘制矩形 矩形的绘制一般可以通过4种方法实现： ①通过连接固定点绘制 ②指定起点和宽高绘制 ③填充实心矩形（没有空心绘制方法） ④设置线条粗细，绘制斜矩形 在上小节中，其实我们已经实现了第一种和第四种方法，接下来我们通过第 二和第三个方法来实现矩形的绘制。 QQ学习群：262779381

http://www.10lab.cn QQ学习群：262779381 ·指定起点和宽高绘制 直接调用CGContextAddRect方法，绘制矩形。重写drawRect方法。 1.- (void)drawRect:(CGRect)rect { 2. //获取图形上下文 3. CGContextRef contextRef = UIGraphicsGetCurrentContext(); 4. //指定矩形起点与宽高 5. CGContextAddRect(contextRef, CGRectMake(20, 20, 120, 40)); 6. //设置矩形颜色 7. CGContextSetRGBStrokeColor(contextRef, 0.7, 1, 0.2, 1); 8. CGContextStrokePath(contextRef); 9.} 10.@end QQ学习群：262779381

运行模拟器，可以看到最后的矩形绘制效果如图所示。 QQ学习群：262779381

·填充实心矩形 下面是绘制实心矩形的方法。重写drawRect方法。 11 ·填充实心矩形 下面是绘制实心矩形的方法。重写drawRect方法。 11.- (void)drawRect:(CGRect)rect { 12. //获取图形上下文 13. CGContextRef contextRef = UIGraphicsGetCurrentContext(); 14. //填充实心矩形 15. UIRectFill(CGRectMake(20, 20, 140, 80)); 16. CGContextStrokePath(contextRef); 17.} 运行模拟器，可以看到填充效果如图所示，这里我们就不能对它的颜色进 行设置，仅仅用黑色进行填充。 QQ学习群：262779381

8.2.3绘制圆形 绘制圆形是通过CGPathAddEllipseInRect方法进行绘制，设置圆形的起 点以及半径，通过对长半径与短半径的设置可以绘制椭圆与正圆。 下面我们重写drawRect方法，绘制椭圆与正圆。 1.- (void)drawRect:(CGRect)rect { 2. //获取图形上下文 3.CGContextRef contextRef = UIGraphicsGetCurrentContext(); 4.//创建path线条路径 5.CGMutablePathRef pathRef = CGPathCreateMutable(); 6.//设置线条颜色 7.CGContextSetRGBStrokeColor(contextRef, 0.4, 0.3, 0.9, 1); 8.//绘制圆形 9.CGPathAddEllipseInRect(pathRef, NULL, CGRectMake(10, 20, 100, 110)); 10.//将圆形添加到图形上下文中 11.CGContextAddPath(contextRef, pathRef); 12.//渲染图形 13. CGContextStrokePath(contextRef); 14.} QQ学习群：262779381

这里与绘制线条不同的是，绘制圆形 我们调用了CGPathAddEllipseInRect方 法，这个CGPath路径的方法，所以在获 取图形上下文的同时，还需要创建一个 path路径，用于保存绘制的路径。前面绘 制线条之所以不用创建path路径，是因为 我们调用的是CGContext图形上下文的方 法，这里调用的是CGPath路径方法，读 者需要注意区别。 运行模拟器，可以看到一个半径为 100的圆形已经绘制完成，如图所示。修 改圆形的长半径与短半径可以绘制椭圆， 比如我们修改长半径为100，短半径为50 ，绘制一个椭圆，如图所示。 QQ学习群：262779381

8.3IOS动画 在IOS应用中，动画效果的功能也是非常的强大，能够实现视图之间切换的 动画效果，视图本身的动态显示效果，还可以实现一些视图的层动画。 在IOS中实现动画效果的方法有三种： ①UIView动画。UIView动画是最基本也是最常用的动画效果实现方法，它主 要是通过改变UIView的属性而达到动画的效果。 ②CATransition动画。系统为我们定制了几种用于页面之间切换的动画效果， 用户直接调用即可。它是在QuartZCore.framework框架的基础上实现的动 画效果，使用之前要将QuartZCore.framework框架导入到工程中。 ③CoreAnimation动画。CoreAnimation动画是IOS动画的核心，它也是在 QuartZCore.framework框架的基础上实现的动画效果，功能非常的强大。 如果结合CoreGraphic.framework框架中的绘图功能，会使得动画的效果更 加的精致。 那么我在本小节的内容中我们将带大家一起来学习如何在自己的应用中加入 一些效果精致的动画。 QQ学习群：262779381

8.3.1UIView动画效果的实现 UIView动画效果是IOS中比较简单地动画效果，它主要是通过view视图相关属 性的变化来实现相应的动画效果，比如视图大小、位置的改变，视图透明度的改 变等。下面列出了在UIView中用于产生动画效果的属性。 ·frame – 使用这个属性可以动画的改变视图的尺寸和位置 ·bounds – 使用这个属性可以动画的改变视图的尺寸 ·center – 使用这个属性可以动画的改变视图的位置 ·transform – 使用这个属性可以翻转或者缩放视图 ·alpha – 使用这个属性可以改变视图的背景颜色 ·contentStrentch – 使用这个属性可以改变视图如何拉伸 QQ学习群：262779381

http://www.10lab.cn 接下来，我们通过一个小Demo，通过改变UIView视图中的相关属性，实现一 个简单的动画效果。 打开Xcode新建一个Single View Application项目模板，接下来就是将 UIViewController的实例设置为应用的根视图控制器，还是要记得将头文件添 加到AppDelegate.m文件中。 #import "AppDelegate.h" #import "ViewController.h" 前面的内容中，我们设置根视图控制器的方法大家已经非常熟悉。 1.ViewController *vc = [[ViewController alloc]init]; 2.self.window.rootViewController = vc; 3.[vc release]; 其实我们可以将这三行代码合并成一行，之所以在前面的内容中都写成三行 ，是因为想让读者了解创建根视图控制器的详细过程。 self.window.rootViewController = [[[ViewController alloc]init]autorelease];将三行代码合并成一行代码的效果和原来是一样的， 这样写会使得代码更加的简洁。 QQ学习群：262779381

下一步就可以在视图控制器文件BViewController 下一步就可以在视图控制器文件BViewController.m中添加一个 UIView视图实例和一个按钮，用于实现动画的效果。因为视图实例在 后面的代理方法和按钮单击事件中要使用，为了方便，我们就在.h文件 中定义一个UIView视图的全部变量。 4.@interface ViewController : UIViewController 5.{ 6. UIView *myView; 7.} QQ学习群：262779381

回到ViewController. m文件中，在viewDidLoad方法中定义UIView和 UIButton实例。 8 回到ViewController.m文件中，在viewDidLoad方法中定义UIView和 UIButton实例。 8.- (void)viewDidLoad 9.{ 10. [super viewDidLoad]; 11.myView = [[UIView alloc]initWithFrame:CGRectMake(60, 150, 200, 200)]; 12. myView.backgroundColor = [UIColor cyanColor]; 13. [self.view addSubview:myView]; 14. [myView release]; 15. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 16. [button setTitle:@"Change" forState:UIControlStateNormal]; 17. button.frame = CGRectMake(130, 40, 60, 40); 18. [button addTarget:self action:@selector(startAnimation) 19. forControlEvents:UIControlEventTouchUpInside]; 20. [self.view addSubview:button]; 21.} QQ学习群：262779381

在UIView动画中，实现动画基本语句为： [UIView beginAnimations:@"animation1" context:nil]; /……/ [UIView commitAnimations]; 这两条语句分别标识了动画效果的开始和结束，在语句之间，我们可以设置 UIView的属性下面我们要实现的效果是，点击按钮之后，视图会慢慢地消失， 视图在窗口中的位置也会慢慢下移。比如在PPT幻灯片效果中的渐隐消失的效果 ，我们就可以改变UIView实例的alpha属性和view.frame.origin.y属性的值。 QQ学习群：262779381

22. - (void)startAnimation 23. { 24 22.- (void)startAnimation 23.{ 24. [UIView beginAnimations:@"animation1" context:nil]; 25. [UIView setAnimationDuration:2.0f]; 26. CGRect myFrame = myView.frame; 27. myFrame.origin.y = 300; 28. myView.frame = myFrame; 29. myView.alpha = 0; 30. [UIView commitAnimations]; 31.} beginAnimations方法中带了两个参数，第一个参数的意思是定义这个动画的名称； 而第二个参数的意思是一个附加的动画信息，在UIView动画中提供了两个代理方法， 分别是开始动画和停止动画的代理方法，而通过context参数的值可以帮助代理方法的 实现。这两个参数的默认值为nil。 setAnimationDuration方法的含义则是设置动画的持续时间，返回的是一个float 类型的数据。接下里我们就将UIView实例的frame.origin.y的值和alpha值进行了修 改，以达到改变UIView相关属性的效果。最后别忘了调用commitAimations方法。 QQ学习群：262779381

当我们单击“change”按钮之后，天蓝色背景的视图会向下 慢慢的移动，而且透明度值会慢慢降低，到最后完全消失不 见。 在前面的内容中，我们提到UIView动画中提供了两个代理方 法： + (void)setAnimationWillStartSelector:(SEL)selector; + (void)setAnimationDidStopSelector:(SEL)selector; 第二个方法使用的比较多，当用户设置的动画效果执行完毕 后，它就会调用这个代理方法，去实现其他的效果。如果要 使用这两个代理方法，需要设置UIView的代理为self。 [UIView setAnimationDelegate:self]; QQ学习群：262779381

在设置完代理之后，我们就来使用setAnimationDidStopSelector这个代理方 法，让视图在消失之后重现显示在原来窗口中的位置上。同时还可以改变原有视 图实例的颜色。 32.- (void)startAnimation 33.{ 34. [UIView beginAnimations:@"animation1" context:nil]; 35. [UIView setAnimationDuration:2.0f]; 36. [UIView setAnimationDelegate:self]; 37. [UIView setAnimationDidStopSelector:@selector(StopAnimation)]; 38. CGRect myFrame = myView.frame; 39. myFrame.origin.y = 300; 40. myView.frame = myFrame; 41. myView.alpha = 0; 42. [UIView commitAnimations]; 43.} 然后实现StopAnimation方法。 QQ学习群：262779381

http://www.10lab.cn 44.- (void)StopAnimation 45.{ 46. [UIView beginAnimations:@"animation2" context:nil]; 47. [UIView setAnimationDuration:2.0f]; 48. CGRect myFrame = myView.frame; 49. myFrame.origin.y = 150; 50. myView.backgroundColor = [UIColor redColor]; 51. myView.frame = myFrame; 52. myView.alpha = 1; 53. [UIView commitAnimations]; 54.} QQ学习群：262779381

我们将y轴的坐标和alpha值都设置为实现动画效果之前的值，让整个UIView回 到原来的情况。构建并运行，可以看到最后的效果如图所示。 QQ学习群：262779381

UIView中还有一个很重要的属性transform,它属于CGAffineTransform结 构体中，这个结构体提供了很多种动画效果，比如旋转，移动，大小改变等等。 下面我们就将上面的代码的基础上，加一个UIView缩放的动画效果。 55.- (void)startAnimation 56.{ 57. /……/ 58. myView.transform = CGAffineTransformScale(myView.transform, 0.5, 0.5); 59. [UIView commitAnimations]; 60.} 改变大小方法中的3个参数本别代表着视图原来的大小，transform的默认值 是CGAffineTransformIdentity，即原视图大小；第二和第三个参数代表着变形 之后视图大小的X和Y坐标值。然后我们在StopAnimation方法中让形状回到原来 的大小。添加下面一行代码即可。 myView.transform = CGAffineTransformIdentity; QQ学习群：262779381

8.3.2CATransition动画效果的实现 ·CALayer类 在学习如何用CATransition实现动画效果之前，我们首先要来学习一个和 UIView同样重要的一个类，CALayer。打开官方文档，可以看到CALayer类 也是继承与NSObject类，但是相对于UIView而言，它并没有继承 UIResponder类，因此我们可以知道CALayer类并不能和UIView类一样相应 用户的事件。 那么，有的读者就会有疑问，CALayer是什么？有什么作用呢？其实 CALayer类的主要功能是来绘制图形内容的，而且可以对绘制的内容进行动画 的处理，同时通过UIView的依赖来显示动画的效果，但是并不能处理任何用户 事件。有的读者又会有疑问了，UIView不是也能绘制内容吗？其实这个观点不 完全是正确地，准确来说是CALayer类绘制内容，通过UIView类来显示的，只 是如果不需要使用动画效果是，CALayer就使用的机会就不多，所以大多数用 户都认为是UIView可以用来绘制内容。 QQ学习群：262779381

http://www.10lab.cn CALayer类的本质是一块包含一幅位图（bitmap）的缓冲区。我们最后可以得 出结论，UIView来自于CALayer，但是高于CALayer，因为它能对用户的事件 进行相应。UIView是CALayer高层的实现与封装。二者是相互依赖的关系， UIView的所有特性来源于CALayer的支持。 每一个view中都自带一个layer层，和UIView一样，CALayer还可以定义子层 。 下面列出了layer的一些常用属性： ·CornerRadius：圆角 ·ShadowColor：层阴影颜色 ·ShadowOffset：层阴影距离 ·ShadowOpacity、ShadowRadius：层阴影模糊程度 ·BorderColor：层边颜色 ·BorderWidth：层边粗细 接下来我们来完成一个类似头像框的例子，它的边框是带有阴影的圆角矩形 ，以渐显的方式显示，5秒钟之后头像显示完毕。我们通过CALayer类来实现这 个功能。我们在myView实例上添加相应的层。 QQ学习群：262779381

我们在前面提到过，要使用CALayer类，先要在项目中导入 QuartzCore. framework，然后将它的头文件导入到导航控制器的 我们在前面提到过，要使用CALayer类，先要在项目中导入 QuartzCore.framework，然后将它的头文件导入到导航控制器的.h文件中。 1.#import <UIKit/UIKit.h> 2.#import <QuartzCore/QuartzCore.h> 首先在viewDidLoad方法中设置myView本身layer层的属性。 3.myView.layer.backgroundColor = [UIColor grayColor].CGColor; 4.myView.layer.cornerRadius = 20.0f; 然后我们在myView.layer层上再添加一个子层，设置好它边框的属性，如 圆角矩形，阴影颜色，阴影区域大小等。 QQ学习群：262779381

5. CALayer. sublayer =[CALayer layer]; 6. sublayer 5.CALayer *sublayer =[CALayer layer]; 6.sublayer.backgroundColor =[UIColor blueColor].CGColor; 7.sublayer.shadowOffset = CGSizeMake(0, 3); 8.sublayer.shadowRadius =5.0; 9.sublayer.shadowColor =[UIColor blackColor].CGColor; 10.sublayer.shadowOpacity =0.8; 11.sublayer.frame = CGRectMake(60, 150, 200, 200); 12.sublayer.borderColor =[UIColor blackColor].CGColor; 13.sublayer.borderWidth =2.0; 14.sublayer.cornerRadius =10.0; 有的读者会有疑问了，为什么每次在设置颜色后面都要加一个.CGColor？我们 可以将这个.CGColor语句删除，则会出现一条警告语句，意思是说这两种颜色 UIColor和CGColor不是一个类型，CALayer设置颜色时是使用CGColor类而不 是UIColor类，所以在设置层layer颜色属性时我们要做一个类型的转换。 QQ学习群：262779381

然后我们在sublayer子层上再添加和一个用于显示头像图片的子层。我们先将 头像图片导入到项目中。 16. CALayer 然后我们在sublayer子层上再添加和一个用于显示头像图片的子层。我们先将 头像图片导入到项目中。 16.CALayer *imageLayer =[CALayer layer]; 17.imageLayer.frame = sublayer.bounds; 18.imageLayer.cornerRadius =10.0; 19.imageLayer.contents =(id)[UIImage imageNamed:@"us.jpg"].CGImage; 20.imageLayer.masksToBounds =YES; 21.[sublayer addSublayer:imageLayer]; QQ学习群：262779381

构建并运行，可以看到最后头像图片 显示的效果如图所示。其中 masksToBounds这个属性我们在前 面的章节中也提到过，它的作用是使 当前视图或层隐藏超出的部分。我们 可以将masksToBounds属性设置为 NO，看一下最后的效果，如图所示。 仔细观察，还是可以看到层的边框 部分有超出图片层，这样就影响了整 体的美观程度，所以大部分情况下， 我们都是要将masksToBounds属性 设置为YES。 QQ学习群：262779381

·CABasicAnimation动画效果 CABasicAnimation类提供了属性变化的动画效果，它继承于 CAPropertyAnimation类。当我们使用CABasicAnimation来创建动画时，需 要通过-setFromValue和-setToValue来指定一个开始值和结束值。当我们将 CABasicAnimation效果添加到相应的层中时，它就开始运行。 常用设置的属性有： transform.scale : 比例转换 transform.scale.x : X轴的比例变换 transform.scale.y : Y轴的比例变换 transform.rotation.z : 平面图的旋转 opacity : 透明度 我们在初始化动画时通过animationWithKeyPath键值对的方法来设置动画 的效果。比如我们现在在头像图片层的基础上添加一个改变透明度属性的动画， 以达到图片渐显的效果。 QQ学习群：262779381

23.[fader setDuration:3.0]; 22.CABasicAnimation *fader = [CABasicAnimation animationWithKeyPath:@"opacity"]; 23.[fader setDuration:3.0]; 24.[fader setFromValue:[NSNumber numberWithFloat:0.0]]; 25.[imageLayer addAnimation:fader forKey:@"Fade"]; 我们通过setDuration属性设置了动画的持续时间为3秒，然后让动画开始时的透明度为0，这里我们没有设置setToValue属性，则它的默认值就是图片原来的透明度值。最后，我们将fader动画效果添加到imageLayer图片层上。构建并运行，可以看到最后的效果如图所示。 QQ学习群：262779381

我们还可以设置一个层旋转的动画效果，就是对 transform. rotation键值对进行设置。 26. CABasicAnimation 我们还可以设置一个层旋转的动画效果，就是对 transform.rotation键值对进行设置。 26.CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; 27.[spin setToValue:[NSNumber numberWithFloat:M_PI * 2.0]]; 28.[spin setDuration:1.5]; 29.[self.view.layer addAnimation:spin forKey:@"spinAnimation"]; 注意在将动画添加到层上时，如果是添加在父类层上时 ，那么在父类层中所有的子层都会实现该动画效果，比如 我们现在将动画添加在self.view.layer上，那么这个layer 上的两个子层都会跟着父类层进行旋转。 QQ学习群：262779381

构建并运行，可以看到最后的效果如图所示。 通过CABasicAnimation类来实现动画是不是很方便也很 简单呢？当然，还有很多其他的属性可以设置动画，感兴 趣的读者可以自己去实现。 ·页面翻转效果实现 有两种方法可以实现页面翻转或切换的动画效果，第一 种是UIView视图的页面切换效果；另一种则是通过 CATransition实现动画的效果。接下来我们就来介绍这两 种实现页面翻转的动画效果。 QQ学习群：262779381

·UIView页面切换动画效果 要实现UIView页面切换的效果，是有前提条件的，根视图至少需要2个子视 图，所以在实现动画之前，我们需要在视图上创建2个子视图。 在Xcode中新建一个Single View Application项目模板，然后新建一个 UIViewController视图控制器文件，并将视图控制器实例设置为根视图控制器 ，这些方法步骤大家应该都很熟悉了。我们就简单地带过。 QQ学习群：262779381

30. - (void)change 31. { 32. //标志动画块开始 33 30.- (void)change 31.{ 32. //标志动画块开始 33. [UIView beginAnimations:@"animation" context:nil]; 34. [UIView setAnimationDuration:1.0f]; 35. //设置动画的速率 36. [UIView setAnimationDelay:1]; 37. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 38. [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight 39. forView:self.view cache:YES]; 40. [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0]; 41. //标志动画块结束 42. [UIView commitAnimations]; 43.} QQ学习群：262779381

在实现动画效果的代码中，setAnimationCurve方法是用来设置动画实现的快 慢速度，比如UIViewAnimationCurveEaseInOut表示动画实现的很平和，而 UIViewAnimationCurveEaseIn表示动画在开始时很平和，在结束时则运动的 比较块。 setAnimationTransition方法则是设置动画的效果，系统为我们提供了4中页面 翻转的效果，分别是： UIViewAnimationTransitionFlipFromLeft //向左翻动 UIViewAnimationTransitionFlipFromRight //向右翻动 UIViewAnimationTransitionCurlUp //向上翻页 UIViewAnimationTransitionCurlDown //向下翻页 self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];这行代 码则就是实现两个子视图的切换。 QQ学习群：262779381

·CATransition页面翻转动画效果 CATransition类继承与CAAnimation类，这个类为用户提供了很多封装好了 的漂亮的动画效果，我们只需要根据动画的名称进行相应的调用即可。 CATransition中也有两种实现方法，第一种是通过setType方法；另一种则是通 过transition.type和transition.subtype方法来实现。 在setType方法中，系统为我们封装了9中页面切换的动画效果，如下表所示。 动画名称 动画效果描述 cube 立方体效果 moveIn 移进 reveal 渐显 fade 渐隐 pageCurl 向上翻一页 pageUnCurl 向下翻一页 oglFlip 上下翻转效果 rippleEffect 滴水效果 suckEffect 收缩效果，如一块布被抽走 QQ学习群：262779381

下面我们就通过CATransition来实现页面翻转的动画效果，看看和UIView实现 的情况有什么不同。在使用CATransition类实现动画之前，我们同样的也要将 QuarzCore.framework框架导入到项目工程中，并在.h文件中导入相应的框架 头文件， #import <QuartzCore/QuartzCore.h> 我们将change按钮中的实现代码做如下的修改。 44.- (void)change 45.{ 46. CATransition *transition = [CATransition animation]; 47. transition.duration = 1.0f; 48. [transition setType:@"rippleEffect"]; 49. [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0]; 50. [self.view.layer addAnimation:transition forKey:@"animation"]; 51.} QQ学习群：262779381

而在transition. type和transition. subtpye方法中，系统同样为我们提供了很多动画效 果。 1 而在transition.type和transition.subtpye方法中，系统同样为我们提供了很多动画效 果。 1.kCATransitionFade淡出 2.kCATransitionMoveIn覆盖原图 3.kCATransitionPush推出 4.kCATransitionReveal底部显出来 5.kCATransitionFromRight； 6.kCATransitionFromLeft 7.kCATransitionFromTop； 8. kCATransitionFromBottom 这种动画效果读者可以自己去实现，我们这里要提一点比较重要的是，如果同时设置了 这3种动画效果，比如： transition.type = kCATransitionPush; transition.subtype = kCATransitionFade; [transition setType:@"rippleEffect"]; 那么系统会使用哪一种动画效果呢？事实上，系统会使用最后那种效果作为最终的动画 效果，那么在上面的代码中，系统就会实现最后一种rippleEffect滴水效果作为最后的页 面切换动画效果。这一点值得读者注意。其他的内容在实现上并没有什么难度，读者只须 在使用时查看相应的文档去查看相应的动画效果即可。 QQ学习群：262779381

本章小结 本章中我们主要讲解了通过QuarzCore框架绘制图形的方法，需要注意的图形上下文的使用，在使用QuarzCore框架前，需要设置图形上下文。然后我们讲解了UIView中的基本动画的实现，在视图的基础上，添加了渐现及位移动画，希望读者能够掌握基本的UIView动画实现的方法。 QQ学习群：262779381

课后习题 1.给出八个高考成绩，534、573、512、452、345、312、256、573，在视图中使用这个八个点绘制出成绩波动曲线，线条颜色为蓝色。 2.在第一小题的基础上，在每个曲线拐点处增加一个圆形点，并标出具体的成绩。 3.在前两题的基础上，实现曲线动态显示的效果，也就是从左到右慢慢的显示出来。 QQ学习群：262779381