How do I translate parabolically?

Question

I'm working on an iPhone app with some simple animation.

I have a view I want to translate, but not along a line. I want to translate it parabolically. Imagine that I am animating a car moving along a curved road.

I know I can set the transform properly to an instance of CGAffineTransform

Problem is, I have no idea how to create the transform. I know how to scale, translate, etc. but how do I translate parabolically? Is it even possible?

Answer 1

To animate along a smooth curve, you'll want to use a CAKeyframeAnimation. In this answer I provide code for a combined animation that moves an image view along a curve, while resizing it and fading it out. The relevant part of that code is as follows:

// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;

CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y);
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);

This creates a curve with two control points, one at the origin of the view and the other at the upper-right corner of the the display (in landscape mode). For more on constructing paths, see the Quartz 2D Programming Guide or the Animation Types and Timing Programming Guide.

To use this animation, you'll need to add it to your view's layer using something like the following:

[imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"curveAnimation"];

Answer 2

An aesthetically pleasing way to animate along curves is to use splines. These are mathematically simple and computationally efficient. The least order spline that would solve a parabolic arch is a quadratic spline.

Answer 3

to include rotation of the image along the path, just add the following

pathAnimation.rotationMode = @"auto";

you can also add a timing function to create the easein/out effect

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

Answer 4

It sounds like you need to periodically set the transform property to a CGAffineTransformTranslate created with x,y parameters chosen along the parabola (do what Russell suggested to get x from y or vice versa).

If you also want your car to rotate as it curves along the parabola (will look more realistic) you will need CGAffineTransormRotate. Determine the angle based on the slope of the parabola at the point you're currently drawing at. You'll need an atan() function to compute the angle from the slope. Sounds like a pain, hopefully there's an easier way.

I really don't know what I'm talking about, I just read this blog entry: Demystifying CGAffineTransform.

Answer 5

I think TokenMacGuy's suggestion to use splines is a good one. Again, I don't know what I'm talking about but maybe this will give you some ideas.

Does it have to be exactly a parabola or will an approximation work? What you want to do sounds very much like rendering text along a curve (see screenshot too). That series of posts seems like a pretty good how-to -- explains angle calculations and stuff. Each "character" corresponds to a position of your car. Parameterizing on arc length ensures your velocity is constant.

As far as how to do that on an iPhone... no idea.