在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];
}

 

    運行結果如下圖所示