How to animate one image over the unusual curve pa

Question

I have two separate images.

1. CurvedPath image (Attached Below)
2. PersonImage

As you can see this path is not having perfect arc for single angle.

I have another PersonImage that I want to animate exactly above the center line for this arc image with zoom-in effect.

This animation should be start from bottom-left point to top-right point.

How to achieve this kind of animation?

I have read about QuartzCore and BeizerPath animation, but as I am having less knowledge about those, it will quiet difficult to me to achieve this quickly.

Answer 1

Moving along a path

As long as you can get the exact path that you want to animate the image align you can do it using Core Animation and CAKeyframeAnimation.

Create a key frame animation for the position property and set it do animate along your path

CAKeyframeAnimation *moveAlongPath = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[moveAlongPath setPath:myPath]; // As a CGPath

If you created your path as a UIBezierPath then you can easily get the CGPath by calling CGPath on the bezier path.

Next you configure the animation with duration etc.

[moveAlongPath setDuration:5.0]; // 5 seconds
// some other configurations here maybe...

Now you add the animation to your imageView's layer and it will animate along the path.

[[myPersonImageView layer] addAnimation:moveAlongPath forKey:@"movePersonAlongPath"];

---

If you've never used Core Animation before, you need to add QuartzCore.framework to your project and add #import <QuartzCore/QuartzCore.h> at the top of your implementation.

Creating a UIBezierPath

If you don't know what a bezier path is, look at the Wikipedia site. Once you know your control points you can create a simple bezier path like this (where all the points are normal CGPoints):

UIBezierPath *arcingPath = [UIBezierPath bezierPath];
[arcingPath moveToPoint:startPoint];
[arcingPath addCurveToPoint:endPoint 
              controlPoint1:controlPoint1 
              controlPoint2:controlPoint2];
CGPathRef animationPath = [arcingPath CGPath]; // The path you animate along

Zooming up

To achieve the zoom effect you can apply a similar animation using a CABasicAnimation for the transform of the layer. Simply animate from a 0-scaled transform (infinitely small) to a 1-scaled transform (normal size).

CABasicAnimation *zoom = [CABasicAnimation animationWithKeyPath:@"transform"];
[zoom setFromValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 1.0);];
[zoom setToValue:[NSValue valueWithCATransform3D:CATransform3DIdentity];
[zoom setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
[[myPersonImageView layer] addAnimation:zoom forKey:@"zoomPersonToNormalSize"];

Both at the same time

To have both animations run at the same time you add them to an animation group and add that to the person image view instead. If you do this then you configure the animation group (with duration and such instead of the individual animations).

CAAnimationGroup *zoomAndMove = [CAAnimationGroup animation];
[zoomAndMove setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
[zoomAndMove setAnimations:[NSArray arrayWithObjects:zoom, moveAlongPath, nil]];
[[myPersonImageView layer] addAnimation:zoomAndMove forKey:@"bothZoomAndMove"];