Move an Image with Animation

Posted on September 15, 2009 by John Muchow in User Interface

I was recently working on an application where I needed to animate an image moving on the screen. It surprisingly easy to do accomplish this effect. Let’s me show you the method that I came up with.

The moveImage method takes five parameters – the image to move, duration of the animation in seconds, the animation curve to apply, and the x / y coordinates for the final image location.

Method To Move an Image

Here is how the method looks:

- (void)moveImage:(UIImageView *)image duration:(NSTimeInterval)duration
     curve:(int)curve x:(CGFloat)x y:(CGFloat)y
{
  // Setup the animation
  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:duration];
  [UIView setAnimationCurve:curve];
  [UIView setAnimationBeginsFromCurrentState:YES];
 
  // The transform matrix
  CGAffineTransform transform = CGAffineTransformMakeTranslation(x, y);
  image.transform = transform;
 
  // Commit the changes
  [UIView commitAnimations];
 
}

Calling the Move Method

Most likely you won’t use hard-coded values as shown in the code example below, however, you get the idea on how easy it is to call the method defined above:

- (void)startApp
{
  UIImageView *imageToMove = 
     [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Square.png"]];
  imageToMove.frame = CGRectMake(10, 10, 20, 100);
  [self.view addSubview:imageToMove];
 
  // Move the image
  [self moveImage:imageToMove duration:3.0 
     curve:UIViewAnimationCurveLinear x:50.0 y:50.0];
 
  ...
 
}

Comments

6 Responses to “Move an Image with Animation”

JK says:

October 2, 2009 at 11:17 am

Great Post. Just what I was Looking for.

[Reply]
Daniel says:

August 12, 2010 at 11:17 am

Excellently written method, works beautifully. Thanks a lot dude!

[Reply]
JFA says:

December 15, 2010 at 6:35 pm

Hi guys I’d like to let the image make multiple steps, or a parabolic curve

so I tried to add more lines to the call of the moveImage method, like in the code below
but it doesn’t work, in the simulator I only see the last step of the motion, not the two steps.
Why ?

- (void)viewDidLoad {
[super viewDidLoad];

// DEFINES IMAGE
UIImageView *imageToMove = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bomb50.png"]];
// START COORDINATES AND DIMENSIONS (starts from x:0,y:0)
imageToMove.frame = CGRectMake(0, 0, 50, 50);
// ADDS IMAGE TO THE MAIN VIEW
[self.view addSubview:imageToMove];

// CALLS THE moveImage METHOD
[self moveImage:imageToMove duration:2.0
curve:UIViewAnimationCurveLinear x:50.0 y:50.0];

// CALLS THE moveImage METHOD AGAIN TO PERFORM ANOTHER STEP
[self moveImage:imageToMove duration:2.0
curve:UIViewAnimationCurveLinear x:100.0 y:100.0];

}

i only see the second step of the animation

can anybody help ???
thanks

[Reply]
nishant says:

March 1, 2011 at 4:54 am

Hi frnzz great news! finally i found another one easy way to move UIImageView by finger touch event.

Here is the line of code:

In .h declare

UIImageView *imageToMove;

In .m

- (void)viewDidLoad {

imageToMove = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Square.png"]];
imageToMove.frame = CGRectMake(10, 10, 20, 100);
[self.view addSubview:imageToMove];

[super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:self.view];
imageToMove.center = location;
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
[self touchesBegan:touches withEvent:event];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{

}

[Reply]
Arun Kumar Reply:
March 23rd, 2011 at 4:44 am
Gooooood Work Thax…………

[Reply]
Luca says:

April 7, 2011 at 9:46 am

Gooooood Work Thax…………

[Reply]