Move an UIImage

Question

Hi guys, what is the best way to move an image along an array of dots?

Answer 1

The easiest way is to uses UIView animations

A quick example that assumes you are able to use UIImageView to hold your image and NSArray to hold your point.

    UIImage *image = [UIImage imageNamed:@"image.png"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

    [someView addSubview:imageView]; // Assume someView exists

    NSValue *firstPoint = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    NSValue *secondPoint = [NSValue valueWithCGPoint:CGPointMake(100, 0)];
    NSValue *thirdPoint = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    // And so on....

    NSArray *points = [NSArray arrayWithObjects:firstPoint, secondPoint, thirdPoint, nil];

    for (NSValue *pointValue in points) {

     [UIView beginAnimations:@"UIImage Move" context:NULL];

     CGPoint point = [pointValue CGPointValue];
     CGSize size = imageView.frame.size;

     imageView.frame = CGRectMake(point.x, point.y, size.width, size.height);

     [UIView commitAnimations];
    }

Answer 2

Thank you for the answer. What is the difference to use imageView.frame = CGRectMake(point.x, point.y, size.width, size.height); instead imageView.center = point; ?

Answer 3

My recommended approach would be to wrap the UIImage in a UIImageView and use a CAKeyframeAnimation to animate your UIImageView's layer along a path that passes through your three points:

UIImage *image = [UIImage imageNamed:@"image.png"];
imageView = [[UIImageView alloc] initWithImage:image];
[mainView addSubview:imageView];
// Remember to remove the image view and release it when done with it

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.duration = 1.0f;
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;

CGMutablePathRef pointPath = CGPathCreateMutable();
CGPathMoveToPoint(pointPath, NULL, viewOrigin.x, viewOrigin.y);
CGPathAddLineToPoint(pointPath, NULL, point1.x, point1.y);
CGPathAddLineToPoint(pointPath, NULL, point2.x, point2.y);
CGPathAddLineToPoint(pointPath, NULL, point3.x, point3.y);
pathAnimation.path = pointPath;
CGPathRelease(pointPath);

[imageView.layer addAnimation:pathAnimation forKey:@"pathAnimation"];

Note that by default, the position of a layer is at the layer's center. If you'd like to move the layer relative to another reference point, you can set the layer's anchorPoint property to something like (0.0, 0.0) for its upper-left corner (on the iPhone) or (0.0, 1.0) for its lower left.

Also, this won't change the frame of the UIImageView when it's done, so if you refer to that frame later on, you may need to either take that into account or add a delegate method callback for the end of your animation to set it to the proper value.

You can also make your image move along curves, instead of straight lines, by replacing the calls to CGPathAddLineToPoint() with CGPathAddCurveToPoint().

EDIT (5/14/2009): I added the missing pathAnimation.path = pointPath line and changed a mistyped reference to curvedPath to pointPath.

Answer 4

Thanks Brad, but i have another question: what's the difference between two property of CAKeyframeAnimation, CAKeyframeAnimation->path & CAKeyframeAnimation->values?