How to animate the image in an reverse L shape - ios

Question

I am performing a task in such a way that I took one image and twenty to thirty rectangular cell button.
For those rectangular cells I named them as 1,2,3,4,5,--------,30. I arranged the rectangular cells in an 6*7 matrix. Now if I click the rectangular cell button 29, the image has to find the shortest path in that matrix to reach that clicked button.
How do I perform this?

Answer 1

You have a single image that you want to animate to the location of one of 30 buttons? Further, you want it to move not in a diagonal, but first horizontally, then vertically? CodaFi's code is quite close to what I would do. I'd write an IBAction method that I would attach to all the buttons. Startig with CodaFi's code as a basis, here's the action method I'd suggest:
-(IBAction)animateImageToButton: (id) sender
{
button = (UIButton *) sender;
//First animate the image to the x position of the button
CGPoint fPoint = CGPointMake(button.center.x, image.center.y);
CGPoint sPoint = button.center;
//animate x position first.
[UIView animateWithDuration: 1.0f animations: ^
{
[image setCenter:fPoint];
}
completion ^(BOOL finished)
{
//Once that animation is complete, create
//a second animation to move to the button's y position
[UIView animateWithDuration: 1.0f animations: ^
{
[image setCenter:sPoint];
}];
}];
}
That code would move a single UIImageView, called Image, onto the button that was tapped.

Answer 2

I would not name the buttons but give them tags. I would use the following scheme:
button.tag = xCoordinate *100 + yCoordinate;
So, for example, for the third button from the left in the top row the tag would be 301. Retrieve the coordinates like this:
xCoordinate = button.tag / 100;
yCoordinate = button.tag % 100;
Now all you have to do is animate the image to the center of the button or some other point near there by changing the x and y coordinates of the image's frame.

Answer 3

I disagree with the tag approach that mundi's layed out, because the images would move in diagonal lines to reach their destination. I imagine a for-loop would be appropriate, so here's my approach:
-(void)animateOnLinesWithClickedButton:(UIButton*)button {
for (UIButton *image in self.view.subviews){
CGPoint fPoint = CGPointMake(button.center.x, image.center.y);
CGPoint sPoint = button.center;
//animate x position first.
[UIView animateWithDuration:1.0f animations:^{
[image setCenter:fPoint];
}
completion^(BOOL finished){
[UIView animateWithDuration:1.0f animations:^{
[image setCenter:sPoint];
}];
}];
}
}
This will animate your buttons one by one to the correct x, then y position. Use the delay variation of this method to create a more realistic effect.