在iOS上以特定轨道运行对象

   在目前的项目中，需要一个滚动效果，类似于下图这种沿着虚线一直运动的小球~

   

   查了很多资料，但是普遍给出的答案都是一条线按照特定轨道运行而不是一个物体可以按照特定轨道运行.

   所以自己想了办法，就是使用SDK中自带的 CAKeyframeAnimation 类来为物体指定运行轨迹，运行时间，重复次数等信息。

   1）CAKeyframeAnimation

    文档上对这个类的解释为：

  The CAKeyframeAnimation class provides keyframe animation capabilities for a layer object. You create an CAKeyframeAnimation object using the inherited animationWithKeyPath: method, specifying the key path of the property that you want to animate on the layer. You can then specify the keyframe values to use to control the timing and animation behavior.

   

    翻译一下：CAKeyframeAnimation类为layer对象提供关键帧的动画。您通过使用从其父类继承的animationWithKeyPath: method 方法来创建该类的对象，并且通过为其指定key path属性来为您的layer对象指定动画路径。您还可以为其指定其他的属性来控制它的运行时间以及动画行为。

      在我们的工程中，会使用相应地属性为其设置值，来达到控制动画的效果。

   

   2)绘制运行路线

      在我们绘制运行路线时，并不是真正的使物体运行的路线，而是相当于在这条路线上“画”上了线。其实我们计算不进行这一步，依然不影响我们最终的运行效果。但是我依然推荐这一步的工作，因为这样至少可以从界面上让我们的应用更加直观。

      

- ( void ) drawACurvedLine {    //创建一个位图绘制的范围，我们将从这里获取一张图片    UIGraphicsBeginImageContext(CGSizeMake(320,460));    CGContextRef ctx = UIGraphicsGetCurrentContext();        //为绘制的内容范围指定画笔的宽度及颜色    CGContextSetLineWidth(ctx, 1.5);    CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);        //开始绘制图片    CGContextMoveToPoint(ctx, 10, 10);    //这条线的终点为(310,450),同样的需要一个辅助的点为(10,450).一个二维的曲线将在这些点关联的矩形中被绘制完成    CGContextAddQuadCurveToPoint(ctx, 10, 450, 310, 450);    //绘制另一条曲线，终点在上一条曲线的起始处，从而形成一个闭合    CGContextAddQuadCurveToPoint(ctx, 310, 10, 10, 10);        //画线的方法    CGContextDrawPath(ctx, kCGPathStroke);        //从绘制内容范围中获取实际绘制后的内容，是一张位图    UIImage *curve = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();        //With the image, we need a UIImageView    UIImageView *curveView = [[UIImageView alloc] initWithImage:curve];    //Set the frame of the view - which is used to position it when we add it to our current UIView    curveView.frame = CGRectMake(1, 1, 320, 460);    curveView.backgroundColor = [UIColor clearColor];    [self.view addSubview:curveView];}

    通过以上代码，我们可以获取一个图片，并将其作为subView放到了viewController.view上，您可以在您的viewController的viewDidLoad方法中运行此方法。

  

    2)正式编辑动画

       现在，我们讲绘制一个动画，动画的效果为一个物体在上面方法所绘制的路径上运动。

       我们这里正式使用CAKeyframeAnimation类，并使用该类的属性来为我们的功能服务。

- (void) animateCicleAlongPath {        //生成一个CAKeyframeAnimation类，使用@“position”为其指定为改变位置的动画，具体的path属性可填写值可以参考这篇说明:http://www.adamzucchi.com/blog/?p=24    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];        //为该动画指定相应地属性    pathAnimation.calculationMode = kCAAnimationPaced;    pathAnimation.fillMode = kCAFillModeForwards;    pathAnimation.removedOnCompletion = NO;    pathAnimation.duration = 5.0;    pathAnimation.repeatCount = 1000;        //为该动画指定一个路径，和上面方法的路径相同.注意在指定路径的时候我们使用CGMutablePathRef类    CGPoint endPoint = CGPointMake(310, 450);    CGMutablePathRef curvedPath = CGPathCreateMutable();    CGPathMoveToPoint(curvedPath, NULL, 10, 10);    CGPathAddQuadCurveToPoint(curvedPath, NULL, 10, 450, 310, 450);    CGPathAddQuadCurveToPoint(curvedPath, NULL, 310, 10, 10, 10);        //讲这个路径赋值给这个动画    pathAnimation.path = curvedPath;    CGPathRelease(curvedPath);        //和上面的方法使用一样的思路，绘制一个可移动的物体，这里是一个绿色的小球    UIGraphicsBeginImageContext(CGSizeMake(20,20));    CGContextRef ctx = UIGraphicsGetCurrentContext();    //Set context variables    CGContextSetLineWidth(ctx, 1.5);    CGContextSetFillColorWithColor(ctx, [UIColor greenColor].CGColor);    CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);    //Draw a circle - and paint it with a different outline (white) and fill color (green)    CGContextAddEllipseInRect(ctx, CGRectMake(1, 1, 18, 18));    CGContextDrawPath(ctx, kCGPathFillStroke);    UIImage *circle = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();        UIImageView *circleView = [[UIImageView alloc] initWithImage:circle];    circleView.frame = CGRectMake(1, 1, 20, 20);    [self.view addSubview:circleView];        //像是前面的讲解一样，讲这个动画赋值给这个小球view的layer    [circleView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];}

    在相应地viewController的viewDidLoad方法中顺序调用上面两个方法，则可以得到我们需要的结果

- (void)viewDidLoad {    [super viewDidLoad];        self.view.backgroundColor = [UIColor blackColor];    [self drawACurvedLine];    [self animateCicleAlongPath];}

 

    运行结果如下图所示