Sunday, July 8, 2007

JavaScript animation on iPhone

Two words: avoid it.

I had originally written iPod-menu-style sliding menus for OneTrip (well, my friend Adriano did a lot of it), and it worked really well on the desktop. As we got closer to iDay, however, I figured it would probably run slowly on iPhone so I removed it.

I've gotten quite a bit of feedback since asking why the slide animation was missing. To be honest, I hadn't actually tested this on iPhone; I just assumed, based on its JavaScript performance in other areas, that animating large blocks wouldn't be exactly snappy.

Boy, was I right. Tonight I played for about two hours with different animation speeds and methods, and the simple truth is that there's no way to animate things on iPhone in JavaScript so that they're pleasant to the eye. This only gets worse with OneTrip's menus which in most cases take up the whole screen; when something that big is jerkily crawling across the screen at about one frame per second, it's not good. You could say it's... bad.

So, no menu animations for now. Sorry about that. The good news is OneTrip is still fully usable. I guess I'll have to add eye candy elsewhere to make up for this missing feature.

This morning's update, by the way, featured a number of smaller improvements - for instance, you can now click right on a shopping list item to check and uncheck it (instead of aiming for the little checkbox).

4 comments:

CleverBoy said...

Check out Joe's iPhone template:
http://joehewitt.com/files/iphone/navigation.html
It has some very nice screen transitions.

Unknown said...

Desperate for flash to work for ed tech apps- anyone know of any animation type that will work for vector style animated interactive art on iPhone? I throw up a little thinking of having to step back to Flash 5 and export through QT (love QT, but not for this!!)

Don Kennedy Albert said...

i think the colors and elegant design are eye candy enough. it's a pleasure to look at.

patrick said...

Hi, thanks for sharing, its very nice, And one more thing you need a best animation templates. Just click on it Animation templates