Question

I’m developing an app that would display images and change them according to the user’s action. I’ve created a subclass of UIView to contain an image, an index number and an array of image names. The code is like this:

@interface CustomPic : UIView {
    UIImageView *pic;
    NSInteger index;
    NSMutableArray *picNames;  //<-- an array of NSString
}

And in the implementation part, it has a method to change the image using a dissolve effect.

- (void)nextPic {
    index++;
    if (index >= [picNames count]) {
    index = 0;
    }
    UIImageView *temp = pic;
    pic.image = [UIImage imageNamed:[picNames objectAtIndex:index]];
    temp.alpha = 0;

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    [UIView setAnimationDuration:0.25];
    pic.alpha = 0;
    temp.alpha = 1;
    [UIView commitAnimations];
}

In the viewController, there are several CustomPic which would change the images depends on users’ choice. The images would change as expected with the fade in/out effect, but the animation performance is really bad. I’ve tested it on an iPhone 3G, the Instruments shows that the animation is only 2-3FPS! I tried many methods to simplify and modify the codes but with no hope. Is there something wrong in my code or in my concept? Thanks for any help.

P.S. all the images are 320*480 PNGs with a max size of 15KB.

Answer 1

In that code snippet you are only using one UIImageView:

UIImageView *temp = pic;

So this line does nothing:

pic.alpha = 0;

To fade one image in and another image out, you need two instances of UIImageView.

To speed things up, you might want to load the next image ahead of time. Set a delegate for the animation, and when it completes load the image that will be displayed in the next call of nextPic.

Edit:

If the images are not transparent, try setting the pic.opaque = YES; so the view can ignore underlying views. If that is not an option, try having as few views as possible between the fading view and a full screen opaque view. At each step of the fade, the view must be composited with every underlying view until an opaque view is found.

If you have many transparent views under the fade, consider making a temporary composite of them all, the equivalent of flatten layers in photoshop, and placing the composite as an image in a full screen opaque view before starting the fade. It may delay starting the fade a moment, but the fade itself should be smoother.