UIImageView frame animation with cross-fade between frames

I spent today writing a demo application that shows how to do image view animation including cross-fade between frames.

It involves creating 2 separate image views stacked on top of each other.

First you make both image views opaque and put the first frame in the top image view and the second frame in the bottom image view.

To animate the first cross-fade you just animate the alpha of the top image view to 0.

Then to animate the next frame you install that frame in the top image view and animate the alpha back to 1.

For each subsequent frame you install that frame in the image view that's not currently visible, and then do another animated toggle of the alpha of the top image view.

The project is up on GitHub:

Frame-based image view animation with cross-fade.


The meat of the project is a method called

animateImagesWithDuration:reverse:crossFade:withCompletionBlock:

It's signature looks like this:

- (void) animateImagesWithDuration: (CGFloat) totalDuration
                           reverse: (BOOL) reverse
                         crossfade: (BOOL) doCrossfade
               withCompletionBlock: (void (^)(void)) completionBlock;

If you set reverse = TRUE, it will run the frames from beginning to end and then back again.

If you set cross-fade to NO, it does everything the same but without animation so the frames jump from one to the next.

The demo project lets you set the cross-fade and reverse flags, as well as the total duration of the animation.

The demo uses a morph of a well-known celebrity that I created with Face Dancer, my company's face morphing application. I dumbed the morph down to 5 frames to make it choppy so you can see the difference between cross-fading and not cross-fading..