Question

I’m looking for a way to implement consecutive animations using nested animation blocks.

Somewhat complicated by happening inside a UIScrollView, the size of three UIImageViews (there are many images, and as I scroll through them I constantly swapping out the images in the UIImageViews).

When a scroll is finished, I want to switch out the image in the (visible) middle UIImageView, three times, then back to the original view. I’m trying it thus:

- (void) doAnimation {
    // get the animation frames, along with the current image
    NSString *swap1 = @"first.png";
    NSString *swap2 = @"second.png";
    UIImage *original = currentPage.image;

    UIViewAnimationOptions myOptions = UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction;
    [UIView animateWithDuration:2.0 delay:2.0 options:myOptions
            animations:^{ [currentPage setImage:[UIImage imageNamed:swap1]]; }
            completion:^(BOOL finished) {
                [UIView animateWithDuration:2.0 delay:2.0 options:myOptions
                        animations:^{ [currentPage setImage:[UIImage imageNamed:swap2]]; }
                        completion:^(BOOL finished) {
                            [UIView animateWithDuration:2.0 delay:2.0 options:myOptions
                                    animations:^{ [currentPage setImage:[UIImage imageNamed:swap1]]; }
                                    completion:^(BOOL finished) {
                                        [currentPage setImage:original]; }]; }]; }];
}

When I run this, there is no duration, no delay, it all happens at once, almost too fast for the eye to see. Could this be because “currentPage” is a UIImageView? (Similar to this question?)

Answer 1

There’s no delay because UIImageView.image isn’t an animateable property. As such, the UIView animation machinery will have no animations to set up and will just call your completion block immediately.

What sort of animation did you expect? You can attach a CATransition object to the underlying layer to get a simple cross-fade, Just use [imageView.layer addAnimation:[CATransition animation] forKey:nil] to get the crossfade with the default values (you can customize the timing by modifying properties of the CATransition before attaching it to the layer). To achieve the subsequent animations, you can either use the delegate property of CAAnimation (CATransition‘s superclass) to learn when it’s done and fire your second one, or you could just use -performSelector:withObject:afterDelay: to start your next animation step after a user-defined delay. The delegate method is going to be more accurate with regards to timing, but the performSelector method is a bit easier to write. Sadly, CAAnimation doesn’t support a completion block.