How to keep iOS animation smooth with many areas

Question

I try different views on the little game that I write to play with animations on iOS.

My goal is to have a grid of tiles, which, based on the gameplay, changes the display of each tile to one of many images. I would like every tile (up to 24x24) to roll over when its face changes. As the game progresses, more and more tiles need to be flipped at the same time. In the first implementation, where I tried to flip them at the same time, the animation became very jerky.

I changed my approach so as not to flip them all at once, but just a few at a time, planning an animation for each tile with a slightly increasing delay for each fragment, so when they say that the 10th tile starts the animation, the first one is already done . It takes a little time to complete the whole process, but also leads to a good visual ripple effect.

However, there remains one problem: at the beginning of the game turn, when the player selects a new color, on the device he takes a few fractions of a second before the animation starts. This gets worse as the game progresses, and more flip needs to be planned per turn, up to the point where the animation seems to hang and then complete almost instantly, without the frames between them being really noticeable.

This is the code (in my subclass of the UIView grid) that causes the switching of the corresponding fragments. (I removed the optimization that skips tiles, because it only matters in the early stages of the game).

 float delay = 0.0f; for (NSUInteger row=0; row<numRows; row++) { for (NSUInteger col=0; col<numCols; col++) { delay += 0.03f; [self updateFlippingImageAtRow:row col:col delay:delay animated:YES]; } } 

In the game grid view, there are NSArray tile subnets that are addressed using the row and col variables in the above loop.

updateFlippingImageAtRow:col:delay:animated - this is the method in my FlippingImageView (also a subclass of UIView ) comes down to this (game logic is omitted):

 -(void)animateToShow:(UIImage*)image duration:(NSTimeInterval)time delay:(float)delay completion:(void (^)(BOOL finished))completion { [UIView animateWithDuration:time delay:delay options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{ [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self cache:YES]; self.frontImage = image; } completion:completion ]; } 

It works great, however, I will conclude from the Instruments dimension, which tells me that my time is spent in the animation block, which, as the game continues and the number of fragments to be flipped, the number of animations that get planned at the very beginning of the operation is a problem, and the system then tries to catch up with the frames.

Any suggestions for improving performance? The exact animation time is not very important.

Answer 1

You can think about it with CoreAnimation and CALayers instead of UIViews. This is an incredibly powerful and optimized infrastructure.

This is not easy, you will have to recode at least some of your classes (representing the hierarchy and impact tests are the first things that come to my mind), but it's worth a try and this is a pretty painless process, because CALayer is very similar to UIView.

The next step is OpenGL. It can definitely manage several hundred objects in real time, but it takes a lot more work.

Answer 2

Instead, you can try using CoreAnimation. One way to do flip animation:

• Create a CABasicAnimation that animates the first half of the flip (rotation along the y axis).
• In delegate the animationDidStop:finished: method, you set up a new image and then create a new animation that enlivens the other half.
• You just apply the animation to the layer property of your view.
• Note that you can use setValue:forKey: to "annotate" the animation (remember which object the animation refers to). When you add an animation to a layer, it is copied, not saved, so you cannot identify it simply by comparing the values ​​of the pointer.