andrew.hedges.name / blog
Animating your iPhone web application
May 29, 2009, 6:18 pm · 5 comments · Filed under: Apple, JavaScript, Web Development
Recently, Rebecca Murphey asked on Twitter why she was seeing choppy animation of CSS transitions in her iPhone web application. Initially, I had the same experience, but through some experimentation came to find the smoothness I craved.
I’m in the midst of some mobile web app development. Our first target platform is, of course, the iPhone. An issue of utmost importance when attempting to emulate a native application in an iPhone web view is rendering smooth animations for things like page transitions.
I spent today experimenting with different techniques and am here to share what I’ve learned. Below, I review 2 JavaScript-based techniques for animations as well as the use of WebKit CSS transitions and transforms. Which is best? Read on…
All of the animations use a duration of 250ms. Click the viewports (touch on your iPhone) to see the animations. Right-click on a viewport and select ‘View source’ to see how it’s done. If the animations don’t go, follow the link beside the viewport to see the stand-alone page.
The viewport to the left represents my custom attempt to provide a smooth animation experience. It combines a time-based, strictly linear animation algorithm with a small delay between invocations in an effort not to stress the wee iPhone CPU. It’s OK, but the lack of easing looks unfinished.
This example uses the excellent Animator class to handle the animation. It includes an easing algorithm that makes the animation look a little nicer. Not bad, but it doesn’t quite feel like a native application.
This example leverages WebKit’s native CSS transitions. Of the 3, this is the simplest to code and it also offers the best performance. The pages seem to ‘snap’ into place, unlike the other examples.
Honestly, I’m not sure what was vexing the examples Rebecca and I were looking at earlier. It could be that my first experiment with CSS transitions was trying to do too much (moving 4 divs while changing the opacity on 2 of them). The above examples are extremely simple cases, so they’re bound to perform better.
It stands to reason that native code would perform better than interpreted JavaScript code. Based on my first experiment, I rendered a verdict of unusable 4 now. After digging a little deeper, I stand corrected.
Update: CSS Transformations
Based on comments below by Sean Gilligan, developer of iUI, I have added a fourth example. This one uses -webkit-transform: translateX to achieve hardware acceleration on the iPhone. I’ve also slowed down the animations to 250ms to accentuate the differences between the various techniques.
I’m not sure it’s better, at least on my phone. What do you think?
Short URL to this article:
Tweet this article!
5 comments
Ah, interesting. I was just discussing with the client whether it made sense to just go with an existing framework (like yours, iUI) so we don’t have to go through the pain of discovering all of these tricks ourselves.
Are CSS animations integrated into iUI yet? The live apps I’ve looked at (from the PoweredBy wiki page) seem to have somewhat rough animations.
Smooth animation is not released yet - it is in Subversion (revision control) trunk and has been tested by a handful of developers on a handful of apps. You can run the music sample in the trunk to check it out.
The PoweredBy wiki page is pretty old - not updated in almost 2 years - probably not the best example of iUI apps.
p.s. I like the Markdown editor’s handling of links!
Always cool to learn what other are willing to share when it comes to the mobile web I am just now getting into learning how to create iPhone apps and look forward to utilizing what I have learned from you here.
@Sean: I tried the animations from the iui trunk on my 3GS, but it doesn’t feel right. The initial delay (before the animation starts) is too long and the animation itself is too fast (compared to native animations). I didn’t check on an older iPhone, so I can’t say, if this is related to the changed CPU-speed of the 3GS, but anyway…
For HW acceleration on iPhone you want to use:
-webkit-transform: translateX(-100%);
not:
left: -100%
and you’ll likely need translateX(0%); in your default style. There are also gotchas involving whether the browser can determine the width of the block.
★ Posted by: Sean Gilligan · June 4, 2009, 10:56 am