Developer's Blog

3 points for smooth animation in iPhone / iPad apps

Have you enjoyed using Sleipnir Mobile for iPhone/iPad?

Today, I want to introduce some tips to achieve smooth animation in iPhone/iPad app development that I learnt from my experience in developing [TouchPaging] specially made for Sleipnir Mobile.

The TouchPaging where you can switch between tabs with a swipe, was complete in terms of functionality at a certain stage during development.
However, the animation when swiping just felt sluggish and uncomfortable at this stage. At first, we thought it was due to performance limitations of the iPad, but then quickly thought [No, that can’t be possible!], and so our development team started working hard towards finding a way to solve the problem.

It’s time for Instruments when there is a performance problem.

While check various Apple documents, staring at Instruments over and over, and fighting with the source code, we finally came up with an answer.

Aim for a frame rate of over 40, if possible over 50

The first step to making improvements is performing measurements. The [Core Animation] module in Instruments displays the animation frame rate(FPS) of an application. The FPS of the sluggish TouchPaging when in development was between 25 and 30. So, in order to achieve smooth animation we calculated that we had to aim for atleast 40 FPS, if possible 50 FPS.

The remaining 2 points are for raising this value.

Reduce transparent elements

A negative influence is exerted on the FPS when there are transparent pixels in the animation elements because of the compound processing with the background in each frame. So firstly, reduce transparent pixels to as close to zero as possible.

If you switch on [Color Blended Layers] in Instruments, the parts with compounding due to transparency are displayed in red on the screen.

Just like this.

If you reduce the red area and make it green, then the FPS will surely increase.

One thing that is easy to miss is the alpha channels in PNG images. Even if there are no trasnparent places in the image, compound processing occurs even when it is saved with alpha channels.
Please check that no unnecessary alpha channels are being used when saving.

The FPS in TouchPaging was also increased by reducing transparency. However, even after all this, the result was still not good enough.

Reduce off-screen rendering

In order to futher increase the FPS, you should also look at off-screen rendering. The off-screen rendering I have mentioned here is not something that the programmer intended to be run, but something is automatically rendered off-screen in the graphics processing by the iOS. This also exerts a negative influence on the FPS.

If you switch on [Colot Offscreen-Rendered Yellow] in Instruments, the parts being rendered off-screen are displayed in yellow. Reduce the yellow parts just like with the transparent parts.

However, off-screen rendering occurs under many conditions, making this a difficult solution. yeah, it is difficult.

We found that off-screen rendering occurs when shadowing is added to the shadow property of the CALayer animation in TouchPaging. After a lot of worrying, we reduced most of the off-screen rendering by not using the CALayer function and depicting the shadowing independently. 

And so we were able to increase the FPS of TouchPaging to around 60 FPS, and so acheive the current smooth and comfortable animation.

Summary

So that is the end of the introduction to the important points in tuning performance of animation using the [Core Animation] module of Instruments.
We know that smooth animation is the heart of iOS, and so we want you to experience the same [This feels great!] in our products as well.

If you have not tried out the TouchPaging described in this post, please give it a go.

Please join us on Facebook for Sleipnir Mobile!

Please follow us on Twitter.

Facebook Comments