Joseph Humfrey
Joseph Humfrey

Reputation: 3054

Poor performance when animating transform of large-ish UIImageView

I'm building a title sequence for our game, where each title is a roughly half-screen-sized retina image which I'm displaying using a UIImageView.

The title sequence has simple 3 stages as it gradually grows and fades in/out:

// 1. Fade in and grow
[UIView animateWithDuration:1.0f animations:^{
    titleImageView.alpha = 1.0f;
    titleImageView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
} completion:^(BOOL finished) {

    // 2. Stay opaque, grow a little more
    [UIView animateWithDuration:2.0f animations:^{
        titleImageView.transform = CGAffineTransformMakeScale(1.1f, 1.1f);
    } completion:^(BOOL finished) {

        // 3. Fade out, grow even further
        [UIView animateWithDuration:2.0f animations:^{
            titleImageView.alpha = 0.0f;
            titleImageView.transform = CGAffineTransformMakeScale(1.3f, 1.3f);
        } completion:nil];

    }];

}];

At the start of each animation stage, there's a stutter as a frame or two is dropped. It's especially noticeable on older hardware such as iPhone 4 and iPad 3, but it's even noticeable on an iPad Air, which is surprising.

Some deductions:

Also note that I have some OpenGL ES graphics going on in the background (it's a game with UIKit controls in the foreground), but that hasn't caused problems in the past...

Upvotes: 2

Views: 302

Answers (1)

Joseph Humfrey
Joseph Humfrey

Reputation: 3054

So, it's slightly ugly, but I solved it with two approaches simultaneously:

  1. I converted the cascading UIView animations into a single CALayer keyframed animation so that they're continuous rather than stopping at each stage, calling the completion handler, and starting a new animation. Perhaps this stops them from "settling" and re-rendering in their new scale, as Brian Nickel pointed out.
  2. But this didn't prevent the very first stutter as it showed each new UIImage. To solve this, I created all UIImageViews (6 of them in total) up-front, added them to the superview, and set their alphas to zero. The images aren't huge, and there aren't too many of them, so this seemed okay.

Upvotes: 2

Related Questions