Method for animating images (like a movie) on iPhone without using MPMoviePlayer

I need to be able to display an animation over a static image.

Given that MPMoviePlayer gives you no control over anything useful, the only way I can think to do this is to use multiple static images, which we display (one-by-one) to create a "movie like" animation.

I know we could use UIImageView to do this (by setting the UIImageView animationImages property and then calling startAnimation), however we are going to have over 100 images in our animation - so memory usage will be maxed out.

Does anyone have any nice ways to do this kind of animation? Using Core Animation or OpenGL?

My guess is that we'd need to create an image buffer, and as we load new images, we display images from the image buffer??

Solution 1:

You could use a Core Animation CALayer to host your animation, and swap a series of CALayers in and out of that main layer to perform your frame-by-frame animation. You can set the content of an image-frame-hosting CALayer to a CGImageRef using its contents property. A series of CALayers containing your images could be created and stored in an NSMutableArray as needed, then removed when done to minimize memory use.

You can set the transition duration between frames by wrapping the replaceSublayer:with: method call in a CATransaction, like the following:

[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:0.25f] // 1/4th of a second per frame
                 forKey:kCATransactionAnimationDuration];   
[mainLayer replaceSublayer:[imageLayers objectAtIndex:oldImageIndex] with:[imageLayers objectAtIndex:newImageIndex]];
[CATransaction commit];

You might also be able to get away with swapping in and out the CGImageRef in the contents of your main layer, if your frame display time is short enough.

Solution 2:

As you have discovered, using UIImageView.animationImages does not work because it uses up all your system memory and will crash your app. You could use a timer and set the image property of the UIImageView each time the timer fires, the UIImage object you use as the contents would need to be loaded each time the timer fires. That is basically the same as the approach described in the other answer, except that it uses CALayer instead of UIImageView. Loading an image and changing the image contents each time the timer fires is an okay approach, but it will only be able to get your about 11 FPS on an iPhone for full screen images.

If you would like to use a working example that implements the UIImageView switching logic, then download this PNG Animation example project for xcode. I also provide the AVAnimator library, an optimized version of the same sort of functionality, it supports Quicktime Animation and APNG formats as well as compression.

Solution 3:

You can use CAKeyframeAnimation to animate a series of images/play images like a movie.

    //Get UIImage array
    NSMutableArray<UIImage *> *frames = [[NSMutableArray alloc] init];
    [frames addObject:[UIImage imageNamed:@"1"]];
    [frames addObject:[UIImage imageNamed:@"2"]];
    [frames addObject:[UIImage imageNamed:@"3"]];
    [frames addObject:[UIImage imageNamed:@"4"]];
    [frames addObject:[UIImage imageNamed:@"5"]];
    
    //Declare an array for animationSequenceArray
    NSMutableArray *animationSequenceArray = [[NSMutableArray alloc] init];
    
    //Prepare animation
    CAKeyframeAnimation *animationSequence = [CAKeyframeAnimation animationWithKeyPath: @"contents"];
    animationSequence.calculationMode = kCAAnimationDiscrete;
    animationSequence.autoreverses = YES;
    animationSequence.duration = 5.00; // Total Playing duration
    animationSequence.repeatCount = HUGE_VALF;
    
    for (UIImage *image in frames) {
        [animationSequenceArray addObject:(id)image.CGImage];
    }
    animationSequence.values = animationSequenceArray;
    
    //Prepare CALayer
    CALayer *layer = [CALayer layer];
    layer.frame = self.view.frame;
    layer.masksToBounds = YES;
    [layer addAnimation:animationSequence forKey:@"contents"];
    [self.view.layer addSublayer:layer]; // Add CALayer to your desired view