Smooth iPhone Animations
Despite all the excellent iPhone apps out there, one problem hasn’t yet been solved. Specifically, it’s been impossible to produce full-screen, smooth, native-like wipe transitions between “pages.” iUI, Joe Hewitt’s excellent framework for iPhone apps, could only produce 3-5 frames per second, for extremely choppy animations.
Yesterday, I discovered a breakthrough that produces smooth wipes at almost-native speeds. The secret is animating scrollTo instead of trying to move elements. Oddly, scrollTo’s happen at native speeds, while moving elements happen at much slower speeds. It’s akin to getElementsByClassName being baked into a JS implementation vs. having to implement it yourself using JS.
It’s incredibly smooth. Check it out on your iphone at http://www.yehudakatz.com/wp-content/iphone.html
This demo works only in portrait mode, but you get the idea.
Yehuda,
A few things.
First, your URL for the iPhone smooth animation demo is not typed correctly in the text of the link (the underlying URL is correct, but, if people are trying to type the URL into their iPhone directly, they’re going to get a 404 error). You have it listed as:
http://www.yehudakatz.com/wp-contents/iphone.html
It should read:
http://www.yehudakatz.com/wp-content/iphone.html
i.e., it’s “wp-content”, not “wp-contents” (no letter “s”).
Second, you should pick the shortest URLs possible if they’re to be viewed on an iPhone - people are going to make a lot of errors typing in long URLs with slashes, etc. Your name in the domain doesn’t help, either - you might want to get a shorter domain just for iPhone pages.
Third, the demo scrolls to the right, but, never scrolls back to the left (if that’s what’s intended when clicking on the right content). This is true on the iPhone or in any computer browser.
Last, the scrolling can be a little jerky, with not all lines scrolling togehter, but, otherwise, it’s pretty cool.
Thanks for posting the technique, in any case.
All the Best
Joe
Joe,
Good catch on the URL. I fixed it in the post.
I agree with you about URL length… I was more trying to find a place to slap up the content than give a demo that would have a usable URL in the iphone. I expected people to click on the link, which works.
The text does only scroll in one direction; I was more interested in showcasing the technique than creating a “real” example. I’ll leave that up to the iphone app-makers.
I haven’t experienced the jerkiness, but I’ll take another look.
Thanks!
[...] Smooth iPhone Animations Despite all the excellent iPhone apps out there, one problem hasn?t yet been solved. Specifically, it?s been impossible to produce full-screen, smooth, native-like wipe transitions between ?pages.? iUI, Joe Hewitt?s excellent framework … [...]
yehuda,
Awesome discovery! I can’t wait to try it out myself. I will also mention it on the next podcast.
Ryan