Program multiple animations for single UIImageView with image change

Question

I need to animate a UIImageView inside my application, and cyclically change the UIImage inside it, making it look like an animated photo slideshow.

Right now I'm using an NSTimer to fire every N seconds the UIImage change and the animation itself:

- (void)viewDidLoad {

    // NSArray initialization

    NSTimer *timer = [NSTimer timerWithTimeInterval:16
                                         target:self
                                       selector:@selector(onTimer)
                                       userInfo:nil
                                        repeats:YES];

    [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
    [timer fire];

    [super viewDidLoad];
}

This is the onTimer selector code:

- (void) onTimer {

    // cycle through max 9 images
    if(imageIndex > 8)
        imageIndex = 0;

    // set the image
    [_imageContainer setImage:[images objectAtIndex:imageIndex]];

    // reset width and height of the UIImage frame
    CGRect frame = [_imageContainer frame];
    frame.size.width -= 170.0f;
    frame.size.height -= 100.0f;
    [_imageContainer setFrame:frame];


    // fade in
    [UIView animateKeyframesWithDuration:2.0f delay:0.0f options:0 animations:^{
        [_imageContainer setAlpha:1];
    } completion:^(BOOL finished) {
        // image movement
        [UIView animateKeyframesWithDuration:12.0f delay:0.0f options:0 animations:^{
            CGRect frame = [_imageContainer frame];
            frame.size.width += 170.0f;
            frame.size.height += 100.0f;
            [_imageContainer setFrame:frame];
        } completion:^(BOOL finished) {
            // fade out
            [UIView animateKeyframesWithDuration:2.0f delay:0.0f options:0 animations:^{
                [_imageContainer setAlpha:0];
            } completion:nil];
        }];
    }];

    imageIndex++;
}

This seem a very raw but "working" way to achieve what I want but I recognize it might not be the ideal way.

Is there any better method to achieve what I'm looking for?

Answer 1

Updated Answer For Fade Animation

- (void)viewDidLoad
{
    [super viewDidLoad];

    // self.animationImages is your Image Array
    self.animationImages = @[[UIImage imageNamed:@"Image1"], [UIImage imageNamed:@"Image2"]];

    // make the first call
    [self animateImages];
}

- (void)animateImages
{
    static int count = 0;

    UIImage *image = [self.animationImages objectAtIndex:(count % [animationImages count])];

    [UIView transitionWithView:self.animationImageView
                      duration:1.0f // animation duration
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        self.animationImageView.image = image; // change to other image
                    } completion:^(BOOL finished) {
                        [self animateImages]; // once finished, repeat again
                        count++; // this is to keep the reference of which image should be loaded next
                    }];
}