Moving two shapes along path iOS? - iphone

Question

I'm new to Objective-C, and I'm trying to create an iPhone application. I'm trying to move two rectangles (tagging along behind each other) along a path (specifically, an oblique straight oval).
With the below code, I am able to get both rectangles to show up, but the problem is that when I change the value of the starting point for their separate animations, one of the rectangles ends up catching up to the other one by the end of the animation.. How do I solve this?
Again, I want to move two shapes along a custom path (a track) and both objects / shapes must be separate from each other and at the same distance of separate distance apart throughout the animation.
My code is below:
#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

Answer 1

You should start by parameterising the one function rather than writing two almost identical functions. Then (at the very least) you won't have people scratching their heads, wondering how they differ.
I'm presenting this as an answer rather than just a comment because, in the process of figuring what parameters to pass and how to use them, you'll probably discover all by yourself what you're doing wrong.