iphone - iOS のパスに沿って 2 つの図形を移動しますか?

Question

Objective-C は初めてで、iPhone アプリケーションを作成しようとしています。パス (具体的には、斜めのまっすぐな楕円形) に沿って 2 つの四角形 (互いの後ろにタグを付ける) を移動しようとしています。

以下のコードでは、両方の長方形を表示することができますが、問題は、個別のアニメーションの開始点の値を変更すると、長方形の 1 つが最後に他の長方形に追いつくことです。アニメーションの..どうすれば解決できますか?

繰り返しますが、カスタム パス (トラック) に沿って 2 つの形状を移動したいのですが、両方のオブジェクト/形状は互いに離れており、アニメーション全体で同じ距離離れている必要があります。

私のコードは以下の通りです：

#import "track.h"
#import <QuartzCore/QuartzCore.h>

#define degreesToRadian(x) (M_PI * x / 180.0)
#define radiansToDegrees(x) (x * 180 / M_PI);


@implementation track

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    //call three methods once class is istantiated
    //pass parameters for UIView, width, color, size, points (start, end)
    [self drawTrack];
    [self animateFirstRunner];
    [self animateSecondRunner];

}

- (void) animateFirstRunner
{
    //create an animation and give it certain specs
        CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        pathAnimation.calculationMode = kCAAnimationPaced;
        pathAnimation.fillMode = kCAFillModeBackwards;
        pathAnimation.removedOnCompletion = NO;
        pathAnimation.duration = 5;
        pathAnimation.repeatCount = 1000;

    //create a path for the object or layer to go on
        CGMutablePathRef curvedPath = CGPathCreateMutable();
        CGPathMoveToPoint(curvedPath, NULL, 220, 10);
    CGPathAddArc(curvedPath, NULL, 100, 100, 90, -M_PI_2, M_PI_2, 1);
    CGPathAddArc(curvedPath, NULL, 220, 100, 90, M_PI_2, -M_PI_2, 1);
        //set the path then release
        pathAnimation.path = curvedPath;
        CGPathRelease(curvedPath);

    //set size of the layer and get the context
        UIGraphicsBeginImageContext(CGSizeMake(20,20));
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        //set line width and fill color
        CGContextSetLineWidth(ctx, 1.5);
        CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
    //add the rectangle to the context (runner)
    CGContextAddRect(ctx, CGRectMake(1, 1, 15, 15));
    //draw the path
        CGContextDrawPath(ctx, kCGPathFillStroke);
        UIImage *runner = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        UIImageView *runnerView = [[UIImageView alloc] initWithImage:runner];
    //add outline around runner
        runnerView.frame = CGRectMake(1, 1, 20, 20);

        [self addSubview:runnerView];

        [runnerView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
}
- (void) animateSecondRunner
{
    //create an animation and give it certain specs
        CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        pathAnimation.calculationMode = kCAAnimationPaced;
        pathAnimation.fillMode = kCAFillModeBackwards;
        pathAnimation.removedOnCompletion = NO;
        pathAnimation.duration = 5;
        pathAnimation.repeatCount = 1000;

    //create a path for the object or layer to go on
        CGMutablePathRef curvedPath = CGPathCreateMutable();
        CGPathMoveToPoint(curvedPath, NULL, 220, 10);
    CGPathAddArc(curvedPath, NULL, 100, 100, 90, -M_PI_2, M_PI_2, 1);
    CGPathAddArc(curvedPath, NULL, 220, 100, 90, M_PI_2, -M_PI_2, 1);
        //set the path then release
        pathAnimation.path = curvedPath;
        CGPathRelease(curvedPath);

    //set size of the layer and get the context
        UIGraphicsBeginImageContext(CGSizeMake(20,20));
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        //set line width and fill color
        CGContextSetLineWidth(ctx, 1.5);
        CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
    //add the rectangle to the context (runner)
    CGContextAddRect(ctx, CGRectMake(1, 1, 15, 15));
    //draw the path
        CGContextDrawPath(ctx, kCGPathFillStroke);
        UIImage *runner = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        UIImageView *runnerView = [[UIImageView alloc] initWithImage:runner];
    //add outline around runner
        runnerView.frame = CGRectMake(1, 1, 20, 20);

        [self addSubview:runnerView];

        [runnerView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
}
- (void) drawTrack
{

        UIGraphicsBeginImageContext(CGSizeMake(320,460));
        CGContextRef currentContext = UIGraphicsGetCurrentContext();

        CGContextSetLineWidth(currentContext, 6);
        CGContextSetStrokeColorWithColor(currentContext, [UIColor whiteColor].CGColor);


    //choost starting point, then add arc (half circle)
    //the second parameter of CGContextAddArc is the changes how long the line is (horizontal)
    //draw from -PI to PI and the other way around 
        CGContextMoveToPoint(currentContext, 200, 10);
    CGContextAddArc(currentContext, 100, 100, 90, -M_PI_2, M_PI_2, 1);
    CGContextAddArc(currentContext, 220, 100, 90, M_PI_2, -M_PI_2, 1);
    CGContextClosePath(currentContext);

    //draw the path on the context
        CGContextDrawPath(currentContext, kCGPathStroke);

    //create track
        UIImage *track = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

    //add track to view 
        UIImageView *trackView = [[UIImageView alloc] initWithImage:track];
        trackView.frame = CGRectMake(1, 1, 320, 460);
        trackView.backgroundColor = [UIColor clearColor];
        [self addSubview:trackView];


}

@end