iOS: Changing a UIImageView by pressing an UIButton

Question

I'm making a very simple game. I have a UIButton and an UIImageView. What I'm trying to do is that when the user presses the button, it will change the image to another image and then back to the original image, to simulate an animation (Character moving)

I have this code:

file.m

{

IBOutlet UIImageView *image1;
IBOutlet UIButton *button;

}

-(IBAction)button:(id)sender;

file.h

-(IBAction)button:(id)sender{

[UIView animateWithDuration:1.0f
                 animations:^{

                    image1.alpha = 0.1f;


                 } completion:^(BOOL finished) {

                     image1.image = [UIImage imageNamed:@"image2.png"]; 

                     [UIView animateWithDuration:0.2f
                                      animations:^{

                                          image1.alpha = 1.0f;

                                      } completion:^ (BOOL finished) {

                                         image1.image = [UIImage imageNamed:@"image1.png"];
                                      }];

                 }];


}

When I open the iOS simulator and press the button, the image dissolves, then reappears and then does the animation. The problem is that I don't want it to dissolve, I just want to show the animation. How do I prevent this from happening? Is it because I'm using alpha properties?

Thank you!

Answer 1

I used the following code to do what I think is what you need (shown here: https://www.dropbox.com/s/vtcyw0n257tgihx/fade.mov?dl=0 ):

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(test)];

    iv = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 150, 150)];
    iv.image = [UIImage imageNamed:@"red"];
    [self.view addSubview:iv];
}

- (void)test {
    [UIView animateWithDuration:1.0f animations:^{
        iv.alpha = 0.0f;
    } completion:^(BOOL finished) {
        iv.image = [UIImage imageNamed:@"blue"];

        [UIView animateWithDuration:1.0f animations:^{
            iv.alpha = 1.0f;
        } completion:^ (BOOL finished) {

            [UIView animateWithDuration:1.0f animations:^{
                iv.alpha = 0.0f;
            } completion:^ (BOOL finished) {
                iv.image = [UIImage imageNamed:@"red"];

                [UIView animateWithDuration:1.0f animations:^{
                    iv.alpha = 1.0f;
                } completion:nil];
            }];
        }];

    }];
}

You need to break it down into four parts. First you need to fade the original image out, change it to the second image, fade the second image in, fade the second image out, change back to the original image, then fade it back in.