Question

I have a NSArray of UIImageViews that I want to loop over and quickly swap out an ‘on’ and ‘off’ state. I wrote the code to do so in a for loop instead a method that was called when the user tapped a UIButton ( the button’s action ).

Here’s that loop:

for(int i = 0; i < [Images count]; i++) {     if( i > 0 ){         [self toggleImageViewOff:[Images objectAtIndex:i - 1]];     }      [self toggleImageViewOn:[Images objectAtIndex:i]];      [NSThread sleepForTimeInterval:0.5f]; } 

The UI did not update as I expected as I only ever saw the last UIImageView in the ‘on’ state. I figured that the drawing update of the views must occur in the main thread this code was also executing in. So I learned about performSelectorInBackground:withObject: . Performing the toggleImageViewOn/Off methods using this made the loop work. The problem is if I make the sleep interval too short I can have an ‘on’ update after an ‘off’ with Threads operating out of order.

So I had the bright idea of moving the whole loop with the sleep into its own method and calling that from the action method using performSelectorInBackground:withObject: . I tried that and I’m back to not getting an updated view until the loop is over.

That’s a long winded way to get to my question:

What’s the best way to animate this to guarantee the on/off code fires in the right order and still get view updates, even at high speeds? ( i.e. looping very quickly )

I tried to think about how I’d do it with CoreAnimation, but I can’t seem to get my head around how to do it there.

For bonus, here are the toggle methods:

- (void)toggleImageViewOn:(UIImageView *)theImageView {     [theImageView setImage:[UIImage imageNamed:@'on.png']]; }  - (void)toggleImageViewOff:(UIImageView *)theImageView {     [theImageView setImage:[UIImage imageNamed:@'off.png']]; } 

Answer 1

You’re on the right track with moving the loop to a background thread, but you also need to make sure that you give the main run loop a chance to update the UI. You should be able to replace the direct calls to toggleImageViewOn: and toggleImageViewOff: with something like

[self performSelectorOnMainThread:@selector(toggleImageViewOn:) withObject:[Images objectAtIndex:i] waitUntilDone:NO]; 

This will do the UI update on the main thread, and by not waiting until the update is done you give the main run loop a chance to reach its end. You run into the same issue with things like progress bars, where they won’t change until the loop ends unless you do your updates from a background thread with a UI update call like the one above.