Question

I am trying to create an intro animation for my iOS app and am having issues with timing. In particular I would like to change screens after the intro animation plays. I currently use a UIImageView and there does not appear to be a way to do this. Many stackoverflow questions say to use an NSTimer or performSelector:afterDelay but these are not accurate timers and in my case are completely wrong. Here is what I am doing.

1. Set UILaunchImageFile to LaunchImage.png
2. AppDelegate allocs an IntroViewController
3. IntroViewController.LoadView allocs IntroView
4. IntroView.initWithFrame performs the following
   UIImageView* iv =
   iv.animationImages =
   iv.animationDuration = 2.0
   iv.animationRepeatCount = 1
   [iv startAnimating]
5. Set NSTimer/performSelector:afterDelay?
6. When timer triggers change from IntroViewController to something else.

If I perform either step 5 or 6 it does not work correctly. It does correctly play the animation and it will correctly change the view/view controller, but the timing is horribly horribly wrong. When you call startAnimating in this manner it may not actually start the animation for a full second or two. I presume because the app is still loading in resources somehow. This time however is not consistent across the simulator or all devices. Infact several runs on the same device may have different results. Thus I can not hard code some delay.

All I want to do is detect that a UIImageView animation has played the last frame and do something. That’s it. The best solution I’ve found so far is to set a timer in some manner and then do something, but in my situation a timer is not a solution.

Any ideas?

Answer 1

The long delay you observe is due to reading and decoding the images, which UIImageView does before the animation begins.

Core Animation performs the animation for you, and it does its drawing in the render server, which is in a separate process. Remember that what you see on the screen doesn’t necessarily represent your app’s instantaneous picture of your layer tree: Core Animation Rendering Architecture.

UIImageView doesn’t provide facilities to give you accurate results here. I’d suggest:

1. Make a UIView of your own.
2. Create a CAKeyframeAnimation with discrete calculation mode and your images’ CGImageRefs as its values.
3. Set the animation’s delegate to your IntroViewController.
4. Add the animation to your view’s layer for the “contents” key.
5. Your IntroViewController will get animationDidStop:finished: when it’s done.

Two things to consider, though:

First, you’ll get better results using a movie rather than a series of images, since the movie can be streamed from storage.

Second, and more importantly, this solution will improve the timing situation but will not totally mitigate it. animationDidStop:finished: is called when your app thinks the animation is done… which is not necessarily exactly when it appears to finish.

You’ll do better if you don’t rely on delegate callbacks for media timing: instead, add this animation and the animation transitioning your views (using a CAAnimationGroup if necessary) in the same turn of the run loop. Delay the latter with a beginTime of the first animation’s duration. Depending on what you’re doing, you may have to set the second animation’s fill mode as well to get the correct behavior during the first.