UIImage view animate from one image to the next

4
votes

I want to smothly animate an image in an UIImageView to turn into the next one within one second like UIModalTransitionStyleCrossDissolve does.

Currently, I've got an UIImageView * called "imageView" and a function which is called "imageForState" which returns me a UIImage * for the correct image.

So what I want to do is to animate the image A smoothly into image B if there is one.

Currently, my function is like that:

- (UIImage *) imageForState{
    NSLog(@"state: %d", [save state]);
    switch ([save state]) {         
        case 0:
        case 1:
            return [UIImage imageNamed:@"Sakuya_Debug.PNG"];
        case 2:
            return [UIImage imageNamed:@"Sakuya_2_Debug.PNG"];
        default:
            return NULL;
            //Never called
    }
}

-(void) tap{
    [imageView setAnimationImages:[NSArray arrayWithObjects:[imageView image], [self imageForState], nil]];
    imageView.animationDuration = 2.0;
    [imageView startAnimating];
    save.state++;
}

My problem is, that 1.) the animation goes on forever (when I set imageView.animationRepeatCount to 1, I end up at the first image again) and b.) the animation is not smooth; just like I would have used "setImage";

What am I doing wrong?

1
iphoneobjective-canimationuiimageviewuiimage

1 Answers

3
votes

I suggest doing it with two imageViews and an animation block. In the following example I assume two square images with a siza of 100px. If you add the two imageViews as subviews make sure that imageB is added after imageA so it covers it.

Init the imageViews:

UIImageView *imageA = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Sakuya_Debug.PNG"]];
UIImageView *imageB = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Sakuya_2_Debug.PNG"]];

// hide the second image
imageB.alpha = 0.0;

// put the image with the same size at same position
imageA.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);        
imageB.frame = imageA.frame;

Blend method:

- (void)crossDissolveImageAtoB
{
    [UIView animateWithDuration:1.0 
                     animations:^{
                         imageB.alpha = 1.0;
                     }
                     completion:^(BOOL finished){
                         // do something after the animation finished, 
                         // maybe releasing imageA if it's not used anymore...
                     }];
}