July 26, 2008

iPhone Coverflow

Posted in iPhone development tagged , , , , , , , at 4:01 pm by tetontech

I’v been doing some consulting this summer during the break between semesters at the university.  In this capacity I developed a version of coverflow in JavaScript for hybrid applications.  I can’t share the code or pictures of it running without violating contracts.  

I can share with you the approach.

Most of the examples you find on the web of how to do are cross platform implementations and so use way to much JavaScript for them to be functional on the iPhone.  Since hybrid iPhone apps will only be running on the iPhone we can take advantage of some of the great capabilities of WebKit.

WebKit ships as the UIWebView class for hybrid applications or as safari for web apps.  Included in the version on the phone are CSS transitions and transformations.  The great thing about these two capabilities is that they are hardware accelerated and so run incredibly faster than JavaScript implementations of the same capabilities.

So what you do is use transitions to change the size, opacity, location, etc. of the images that need to be displayed and then apply transformations to make them move.  There are many examples on the web of how to apply each of these items in other ways so it shouldn’t be to difficult to figure out how to put together a coverflow implementation on your own.

Use transitions and transformations as much as you can and minimize the amount of JavaScript.  This will make your implementation run as fast as possible.  It will not be as smooth functioning as the native implementation in iTunes but it is very functional.

Good luck and have fun.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: