My previous post included a simple carousel for 360 degree product viewing which uses the perspective 3D feature of Microsoft Silverlight to give the illusion of a 3D object. There are a few ways we can easily improve it (setting aside the complete lack of any sort of design input!). In particular the rotation effect is achieved by periodically calculating the projection for each surface rather than using Silverlight’s built-in animation engine. The result is some minor rendering artefacts.
One improvement we could make then, would be to switch to using animations (which also dispenses with a chunk of code for the timer and a bit of maths). Rather than simply rotating, it might be nice if the carousel “snapped” to the next position. That effect could be further enhanced by using easing functions to accelerate / decelerate the rotation. I’ve also switched the opacity trigger to something much simpler. Just click on a panel to temporarily hide it. Each of these things is trivial to do in Silverlight – there’s almost no code behind this app – that’s the beauty of it. And the sky’s the limit.
I’ve used the same photo set as for the previous post (so again, I should have reduced the base image size). Given more screen real-estate, the images could of course be made larger. Or we could modify the carousel implementation to be more sparing with the space it requires. It wouldn’t be difficult to implement this.
One thing I haven’t tried (but I have a mind to) is to turn each panel into a Deep Zoom composition thereby combining the carousel with the “inspection” experience I talked about in previous posts. Now that would be something different!
Now to the how-tos where we’ll take a look at how to implement some of these concepts.
