Core Animation基础介绍、简单使用CALayer以及多种动画效果

Core Animation iOS

转自荣芳志的博客：

Core Animation之基础介绍

 Core Animation可以翻译为核心动画，它为图形渲染和动画提供了基础。使用核心动画，你只需要设置一些参数比如起点和终点，剩下的帧核心动画为你自动完成。核心动画使用硬件加速，不用消耗cpu资源。其实平时咱们开发的iOS应用都在有意无意的使用了核心动画。动画不会替代View，而是和View一起提供更好的性能。Core Animation通过缓存view上的内容到bitmap，这样bitmap就可以直接在图形硬件上操作。从而提高了性能。

核心动画所在的位置：

 

1、关于层类

Layer Classes是core animation的基础。Layer Classes提供了一个抽象的概念，这个概念对于那些使用NSview和UIview的开发者来说是很熟悉的。基础层是由CAlayer类提供的，CAlayer是所有Core Animation层的父类。    

同一个视图类的实例一样，一个CAlayer实例也有一个单独的superlayer和上面所有的子层（sublayers），它创建了一个有层次结构的层，我们称之为layer tree。layers的绘制就像views一样是从后向前绘制的，绘制的时候我们要指定其相对与他们的superlayer的集合形状，同时还需要创建一个局部的坐标系。layers可以做一些更复杂的操作，例如rotate(旋转)，skew(倾斜)，scale(放缩)，和project the layer content(层的投影)。   

 

图层的内容提供：

(1)直接设置层的content属性到一个core graphics图，或者通过delegation来设置

(2)提供一个代理直接绘制到Core Graphics image context（核心图形的上下文）

(3)设置任意数量的所有层共有的可视的风格属性。例如：backgroundColor(背景色)，opacity(透明度)和masking(遮罩)。max os x应用通过使用core image filters来达到这种可视化的属性。

(4)子类化CAlayer，同时在更多的封装方式中完成上面的任意技术。 

 

 1.1 CALayer的子类和他们的使用场景

Class

Usage

CAEmitterLayer

Used to implement a Core Animation–based particle emitter system. The emitter layer object controls the generation of the particles and their origin.

CAGradientLayer

Used to draw a color gradient that fills the shape of the layer (within the bounds of any rounded corners).

CAEAGLLayer/CAOpenGLLayer

Used to set up the backing store and context needed to draw using OpenGL ES (iOS) or OpenGL (OS X).

CAReplicatorLayer

Used when you want to make copies of one or more sublayers automatically. The replicator makes the copies for you and uses the properties you specify to alter the appearance or attributes of the copies.

CAScrollLayer

Used to manage a large scrollable area composed of multiple sublayers.

CAShapeLayer

Used to draw a cubic Bezier spline. Shape layers are advantageous for drawing path-based shapes because they always result in a crisp path, as opposed to a path you draw into a layer’s backing store, which would not look as good when scaled. However, the crisp results do involve rendering the shape on the main thread and caching the results.

CATextLayer

Used to render a plain or attributed string of text.

CATiledLayer

Used to manage a large image that can be divided into smaller tiles and rendered individually with support for zooming in and out of the content.

CATransformLayer

Used to render a true 3D layer hierarchy, rather than the flattened layer hierarchy implemented by other layer classes.

QCCompositionLayer

Used to render a Quartz Composer composition. (OS X only)

1.2、 anchorPoint、 position

anchorPoint又称锚点，锚点对动画是有很大影响的。下图描述了基于锚点的三个示例值:

 

1.3、 图层的 frame、bounds、position 和 anchorPoint 关系如下图所示: 

在该示例中,anchorPoint 默认值为(0.5,0.5),位于图层的中心点。图层的 position 值为(100.0,100.0),bounds 为(0.0,0.0,120,80.0)。通过计算得到图层的 frame为(40.0,60.0,120.0,80.0)。

 

如果你新创建一个图层,则只有设置图层的 frame 为(40.0,60.0,120.0,80.0),相应的 position 属性值将会自动设置为(100.0,100.0),而 bounds 会自动设置为 (0.0,0.0,120.0,80.0)。下图显示一个图层具有相同的 frame(如上图),但是在该图中它的 anchorPoint 属性值被设置为(0.0,0.0),位于图层的左下角位置。

图层的 frame 值同样为(40.0,60.0,120.0,80.0),bounds 的值不变,但是图层的 position 值已经改变为(40.0,60.0)。

 

2、关于动画类

核心动画的动画类使用基本的动画和关键帧动画把图层的内容和选取的属性动画的显示出来。所有核心动画的动画类都是从 CAAnimation 类继承而来。

 

CAAnimation 实现了 CAMediaTiming 协议,提供了动画的持续时间,速度,和重复计数。 CAAnimation 也实现了 CAAction 协议。该协议为图层触发一个动画动作提供了提供标准化响应。动画类同时定义了一个使用贝塞尔曲线来描述动画改变的时间函数。例如,一个 匀速时间函数(linear timing function)在动画的整个生命周期里面一直保持速度不变, 而渐缓时间函数(ease-out timing function)则在动画接近其生命周期的时候减慢速度。核心动画额外提供了一系列抽象的和细化的动画类,比如:CATransition 提供了一个图层变化的过渡效果,它能影响图层的整个内容。 动画进行的时候淡入淡出(fade)、推(push)、显露(reveal)图层的内容。这些过渡效 果可以扩展到你自己定制的 Core Image 滤镜。CAAnimationGroup 允许一系列动画效果组合在一起,并行显示动画。

 

2.1动画类

 CAPropertyAnimation ：是一个抽象的子类,它支持动画的显示图层的关键路 径中指定的属性一般不直接使用,而是使用它的子类，CABasicAnimation,CAKeyframeAnimation. 在它的子类里修改属性来运行动画。

CABasicAnimation： 简单的为图层的属性提供修改。 很多图层的属性修改默认会执行这个动画类。比如大小，透明度，颜色等属性

 CAKeyframeAnimation： 支持关键帧动画,你可以指定的图层属性的关键路径动画,包括动画的每个阶段的价值,以及关键帧时间和计时功能的一系列值。在 动画运行是,每个值被特定的插入值替代。核心动画 和 Cocoa Animation 同时使用这些动画类。

 

2.2 如何使用多个动画效果叠加

在执行动画的过程中需要同时修改position,alpha, frame等属性，使用CAAnimationGroup可以将三个动画合成一起执行：

 

CAAnimationGroup *animGroup = [CAAnimationGroup animation];  
animGroup.animations = [NSArray arrayWithObjects:moveAnim,scaleAnim,opacityAnim, nil]; 
animGroup.duration = 1; 
[view.layer addAnimation:animGroup forKey:nil]; 

 

2.3事务管理类  

   图层的动画属性的每一个修改必然是事务的一个部分。CATransaction 是核心动画里面负责协调多个动画原子更新显示操作。事务支持嵌套使用。 

 

2.4 Core Animation类的继承关系图 

Core Animation之简单使用CALayer

 

1、什么是CALayer

CALayer是个简单的类，它是用来在屏幕上显示内容展示的矩形区域。 靠，这是不描述UIView的话吗？其实他们是有区别的。每个UIView都有一个根CALayer，UIView在这个layer上描绘东西。

 

那怎么访问这个layer呢，很简单：

CALayer *myLayer = myView.layer; 

CALayer有这么些属性，可以设置改变层的显示：

 

1.层的大小和位置

2.层的背景颜色

3.层的内容（图像，core graphics）

4.层的的圆角，半径

5.层的阴影设置

等等....

 

2、开始

新建项目默认的模版里是QuartzCore库的，先添加它，才能使用CALayer。

 

小试牛刀看看。

设置层的背景颜色，层的设置圆角半径为20

 

#import <QuartzCore/QuartzCore.h> 
  
// Uncomment viewDidLoad and add the following lines 
self.view.layer.backgroundColor = [UIColor orangeColor].CGColor; 
self.view.layer.cornerRadius = 20.0; 

 

3、层和子层

获取一个新CALayer的实例

CALayer *sublayer = [CALayer layer]; 

 

设置layler的属性，下面分别是：

设置背景色，

阴影的偏差值，

阴影的半径，

阴影的颜色，

阴影的透明度，

子层的freme值。

然后把新的层add到view的层里。

CALayer *sublayer = [CALayer layer]; 
    sublayer.backgroundColor = [UIColor purpleColor].CGColor; 
    sublayer.shadowOffset = CGSizeMake(0, 3); 
    sublayer.shadowRadius = 5.0; 
    sublayer.shadowColor = [UIColor blackColor].CGColor; 
    sublayer.shadowOpacity = 0.8; 
    sublayer.frame = CGRectMake(30, 30, 128, 192); 
    [self.view.layer addSublayer:sublayer]; 

效果如下：

4、添加图片内容和层的圆角

 

主要内容有：

新建imagelayer放置图片

设置圆角半径cornerRadius

设置层的内容contents为图片

边界遮罩masksToBounds

 

CALayer *sublayer = [CALayer layer]; 
sublayer.backgroundColor = [UIColor purpleColor].CGColor; 
sublayer.shadowOffset = CGSizeMake(0, 3); 
sublayer.shadowRadius = 5.0; 
sublayer.shadowColor = [UIColor blackColor].CGColor; 
sublayer.shadowOpacity = 0.8; 
sublayer.frame = CGRectMake(30, 30, 128, 192); 
sublayer.borderColor = [UIColor blackColor].CGColor; 
sublayer.borderWidth = 2.0; 
sublayer.cornerRadius = 10.0; 
[self.view.layer addSublayer:sublayer]; 
 
CALayer *imageLayer = [CALayer layer]; 
imageLayer.frame = sublayer.bounds; 
imageLayer.cornerRadius = 10.0; 
imageLayer.contents = (id)[UIImage imageNamed:@"snaguosha.png"].CGImage; 
imageLayer.masksToBounds = YES; 
[sublayer addSublayer:imageLayer]; 

效果：

 

有圆角就是好看很多。

 

5、自定义绘画内容到图层

如果不想使用图片内容，而是想用 Core Graphics绘制内容到层上的话也简单。

这里主要靠viewController类实现一个drawLayer:inContext方法，并把它设置成layer的代理。代码如下：

 

static inline double radians (double degrees) { return degrees * M_PI/180; } 
 
void MyDrawColoredPattern (void *info, CGContextRef context) { 
     
    CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor; 
    CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor; 
     
    CGContextSetFillColorWithColor(context, dotColor); 
    CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor); 
     
    CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0); 
    CGContextFillPath(context); 
     
    CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0); 
    CGContextFillPath(context); 
     
} 
 
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context { 
     
    CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor; 
    CGContextSetFillColorWithColor(context, bgColor); 
    CGContextFillRect(context, layer.bounds); 
     
    static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL }; 
     
    CGContextSaveGState(context); 
    CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL); 
    CGContextSetFillColorSpace(context, patternSpace); 
    CGColorSpaceRelease(patternSpace); 
     
    CGPatternRef pattern = CGPatternCreate(NULL, 
                                           layer.bounds, 
                                           CGAffineTransformIdentity, 
                                           24, 
                                           24, 
                                           kCGPatternTilingConstantSpacing, 
                                           true, 
                                           &callbacks); 
    CGFloat alpha = 1.0; 
    CGContextSetFillPattern(context, pattern, &alpha); 
    CGPatternRelease(pattern); 
    CGContextFillRect(context, layer.bounds); 
    CGContextRestoreGState(context); 
} 

 

在viewController中加入：

static inline double radians (double degrees) { return degrees * M_PI/180; } 
 
void MyDrawColoredPattern (void *info, CGContextRef context) { 
     
    CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor; 
    CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor; 
     
    CGContextSetFillColorWithColor(context, dotColor); 
    CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor); 
     
    CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0); 
    CGContextFillPath(context); 
     
    CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0); 
    CGContextFillPath(context); 
     
} 
 
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context { 
     
    CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor; 
    CGContextSetFillColorWithColor(context, bgColor); 
    CGContextFillRect(context, layer.bounds); 
     
    static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL }; 
     
    CGContextSaveGState(context); 
    CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL); 
    CGContextSetFillColorSpace(context, patternSpace); 
    CGColorSpaceRelease(patternSpace); 
     
    CGPatternRef pattern = CGPatternCreate(NULL, 
                                           layer.bounds, 
                                           CGAffineTransformIdentity, 
                                           24, 
                                           24, 
                                           kCGPatternTilingConstantSpacing, 
                                           true, 
                                           &callbacks); 
    CGFloat alpha = 1.0; 
    CGContextSetFillPattern(context, pattern, &alpha); 
    CGPatternRelease(pattern); 
    CGContextFillRect(context, layer.bounds); 
    CGContextRestoreGState(context); 
} 

这样，Core Graphics绘制了一个有质地的图像到customDrawn层上，这个绘制教程请参考： Core Graphics 101: Patterns http://www.raywenderlich.com/33496/core-graphics-tutorial-patterns

 

咱们看下这很酷的效果：

 

这个是不是像mac电脑上按下F12键时出来的背景。

 

本篇例子代码：http://download.csdn.net/detail/totogo2010/5083326

参考：http://www.raywenderlich.com/2502/introduction-to-calayers-tutorial

Core Animation之多种动画效果

 

前面介绍了Core Animation基础知识，还有CALayer的简单使用，最终还是有要动画的滴，这里列出几个动画效果，参考下能加深对Core Animation的认识和理解。

 

1、把图片移到右下角变小透明

使用CAAnimationGroup叠加动画效果，就是下面按钮《把图片移到右下角变小透明》描述的效果：

上面三个图是动画的三个状态，实现代码如下：

 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snaguosha.png"]]; 
    self.imageView.frame = CGRectMake(10, 10, 128, 192); 
    [self.view addSubview:self.imageView]; 
 } 

 

- (IBAction)tranAction:(id)sender { 
    CGPoint fromPoint = self.imageView.center; 
     
    //路径曲线 
    UIBezierPath *movePath = [UIBezierPath bezierPath]; 
    [movePath moveToPoint:fromPoint]; 
    CGPoint toPoint = CGPointMake(300, 460); 
    [movePath addQuadCurveToPoint:toPoint 
                     controlPoint:CGPointMake(300,0)]; 
    //关键帧 
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
    moveAnim.path = movePath.CGPath; 
    moveAnim.removedOnCompletion = YES; 
     
    //旋转变化 
    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; 
    //x，y轴缩小到0.1,Z 轴不变 
    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]; 
    scaleAnim.removedOnCompletion = YES; 
     
    //透明度变化 
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"]; 
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0]; 
    opacityAnim.toValue = [NSNumber numberWithFloat:0.1]; 
    opacityAnim.removedOnCompletion = YES; 
     
    //关键帧，旋转，透明度组合起来执行 
    CAAnimationGroup *animGroup = [CAAnimationGroup animation]; 
    animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil]; 
    animGroup.duration = 1; 
    [self.imageView.layer addAnimation:animGroup forKey:nil]; 
} 

代码解析：上面关键帧设置了动画的路径，scaleAnim设置了缩小，opacityAnim设置了透明度的变化。把三个动画组合到：animGroup。

 

在把animGroup添加到imageView.layer层的动画里。于是动画效果就有了。

 

2、旋转并向右移动

- (IBAction)RightRotateAction:(id)sender { 
    CGPoint fromPoint = self.imageView.center; 
    UIBezierPath *movePath = [UIBezierPath bezierPath]; 
    [movePath moveToPoint:fromPoint]; 
    CGPoint toPoint = CGPointMake(fromPoint.x +100 , fromPoint.y ) ; 
    [movePath addLineToPoint:toPoint]; 
     
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
    moveAnim.path = movePath.CGPath; 
     
    CABasicAnimation *TransformAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    TransformAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; 
     
    //沿Z轴旋转 
    TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,0,1)]; 
     
    //沿Y轴旋转 
  //   scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,1.0,0)]; 
     
    //沿X轴旋转 
//     TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,1.0,0,0)]; 
    TransformAnim.cumulative = YES; 
    TransformAnim.duration =3; 
    //旋转2遍，360度 
    TransformAnim.repeatCount =2; 
    self.imageView.center = toPoint; 
    TransformAnim.removedOnCompletion = YES; 
    CAAnimationGroup *animGroup = [CAAnimationGroup animation]; 
    animGroup.animations = [NSArray arrayWithObjects:moveAnim, TransformAnim, nil]; 
    animGroup.duration = 6; 
     
    [self.imageView.layer addAnimation:animGroup forKey:nil]; 
} 

代码解析:可能你没注意到，CATransform3DMakeRotation，这返回的是旋转的值。上面的动画效果里返回的是CATransform3DMakeScale缩放的值。

 

向右移动是因为关键帧使用了路径为直线的路径。

 

3、旋转并消除边缘锯齿

 

- (IBAction)Rotate360Action:(id)sender { 
    //图片旋转360度 
    CABasicAnimation *animation = [ CABasicAnimation 
                                   animationWithKeyPath: @"transform" ]; 
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; 
     
    //围绕Z轴旋转，垂直与屏幕 
    animation.toValue = [ NSValue valueWithCATransform3D: 
                         CATransform3DMakeRotation(M_PI, 0, 0, 1.0) ]; 
    animation.duration = 3; 
    //旋转效果累计，先转180度，接着再旋转180度，从而实现360旋转 
    animation.cumulative = YES; 
    animation.repeatCount = 2; 
     
    //在图片边缘添加一个像素的透明区域，去图片锯齿 
    CGRect imageRrect = CGRectMake(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height); 
    UIGraphicsBeginImageContext(imageRrect.size); 
    [self.imageView.image drawInRect:CGRectMake(1,1,self.imageView.frame.size.width-2,self.imageView.frame.size.height-2)]; 
    self.imageView.image = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
     
    [self.imageView.layer addAnimation:animation forKey:nil]; 
} 

如果你仔细观察，会看到第二个动画里在旋转时，图片边缘是有锯齿的，如何消除呢？在图片边缘添加一个像素的透明区域，去图片锯齿。

 

UIGraphicsBeginImageContext 开始图片内容。

UIGraphicsGetImageFromCurrentImageContext 获取当前内容作为图片。

UIGraphicsEndImageContext结束。是和UIGraphicsBeginImageContext配套使用的。

 

4、吃豆人动画

这个有点复杂，首先说下实现的步骤：

画一个吃豆人开口的路径：pacmanOpenPath

画一个吃豆人闭口的路径：pacmanClosedPath

新建一个闭口的吃豆人头的层：shapeLayer

 

把开口和闭口路径设置成CABasicAnimation *chompAnimation动画的起点和终点，这样循环就能出现咬牙的动画了。

 

最后设置一个路径为关键帧，让吃豆人在这条路径上行动。

 

代码如下：

- (void)animationInit 
{ 
    self.view.backgroundColor = [UIColor blackColor]; 
     
    CGFloat radius = 30.0f; 
    CGFloat diameter = radius * 2; 
    CGPoint arcCenter = CGPointMake(radius, radius); 
    // Create a UIBezierPath for Pacman's open state 
    pacmanOpenPath = [UIBezierPath bezierPathWithArcCenter:arcCenter 
                                                    radius:radius 
                                                startAngle:DEGREES_TO_RADIANS(35) 
                                                  endAngle:DEGREES_TO_RADIANS(315) 
                                                 clockwise:YES]; 
     
    [pacmanOpenPath addLineToPoint:arcCenter]; 
    [pacmanOpenPath closePath]; 
     
    // Create a UIBezierPath for Pacman's close state 
    pacmanClosedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter 
                                                      radius:radius 
                                                  startAngle:DEGREES_TO_RADIANS(1) 
                                                    endAngle:DEGREES_TO_RADIANS(359) 
                                                   clockwise:YES]; 
    [pacmanClosedPath addLineToPoint:arcCenter]; 
    [pacmanClosedPath closePath]; 
     
    // Create a CAShapeLayer for Pacman, fill with yellow 
    shapeLayer = [CAShapeLayer layer]; 
    shapeLayer.fillColor = [UIColor yellowColor].CGColor; 
    shapeLayer.path = pacmanClosedPath.CGPath; 
    shapeLayer.strokeColor = [UIColor grayColor].CGColor; 
    shapeLayer.lineWidth = 1.0f; 
    shapeLayer.bounds = CGRectMake(0, 0, diameter, diameter); 
    shapeLayer.position = CGPointMake(-40, -100); 
    [self.view.layer addSublayer:shapeLayer]; 
     
    SEL startSelector = @selector(startAnimation); 
    UIGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:startSelector]; 
    [self.view addGestureRecognizer:recognizer]; 
} 

 

- (void)startAnimation { 
    // 创建咬牙动画 
    CABasicAnimation *chompAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    chompAnimation.duration = 0.25; 
    chompAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
    chompAnimation.repeatCount = HUGE_VALF; 
    chompAnimation.autoreverses = YES; 
    // Animate between the two path values 
    chompAnimation.fromValue = (id)pacmanClosedPath.CGPath; 
    chompAnimation.toValue = (id)pacmanOpenPath.CGPath; 
    [shapeLayer addAnimation:chompAnimation forKey:@"chompAnimation"]; 
     
    // Create digital '2'-shaped path 
     
    UIBezierPath *path = [UIBezierPath bezierPath]; 
    [path moveToPoint:CGPointMake(0, 100)]; 
    [path addLineToPoint:CGPointMake(300, 100)]; 
    [path addLineToPoint:CGPointMake(300, 200)]; 
    [path addLineToPoint:CGPointMake(0, 200)]; 
    [path addLineToPoint:CGPointMake(0, 300)]; 
    [path addLineToPoint:CGPointMake(300, 300)]; 
     
    CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
    moveAnimation.path = path.CGPath; 
    moveAnimation.duration = 8.0f; 
    // Setting the rotation mode ensures Pacman's mouth is always forward.  This is a very convenient CA feature. 
    moveAnimation.rotationMode = kCAAnimationRotateAuto; 
    [shapeLayer addAnimation:moveAnimation forKey:@"moveAnimation"]; 
} 

 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    [self animationInit]; 
} 

还需要添加一个宏：

#define DEGREES_TO_RADIANS(x) (3.14159265358979323846 * x / 180.0)    计算角度转换

 

添加了个手势，点一下屏幕，吃豆人就动起来了。效果：

本篇例子代码：代码

 

来源：荣芳志的博客