Move an Image with Animation

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];
 
  ...
 
}
  1. Excellently written method, works beautifully. Thanks a lot dude!

  2. 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

  3. 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
    {

    }

  4. Apple now recommends using block-based animation instead. Here is the function updated to use block animation:

    – (void)moveImage:(UIImageView *)image duration:(NSTimeInterval)duration
    curve:(int)curve x:(CGFloat)x y:(CGFloat)y
    {

    // the transform matrix
    CGAffineTransform transform = CGAffineTransformMakeTranslation(x, y);

    [UIView animateWithDuration:3.0
    delay:1.0
    options:UIViewAnimationOptionCurveEaseInOut
    animations:^{

    image.transform = transform;

    }
    completion:nil];

    }

Comments are closed.