使用javascript / css3 / canvas对图像/ 3D /精灵进行动画处理

Question

Kind of a dilemma here. I am making a mobile version of a website, that has some interactive things more specifically I have this object in 3D that you can spin, I was using papervision in Flash but now I need to do this differently since there is no flash in mobile and I feel I am on thin ice.

I was thinking of exporting a 360 degree spin @ 30 FPS using a PNG sequence with alpha channel, and then simply stiching them together into a sprite, then using this as a background in CSS and using background-position to then "simulate" an animation.

That or simply switch source image very rapidly, or somehow using "canvas" maybe, the thing is I am not sure if this will produce completely subpar performance? I mean switching the background-position or image source file @ 30 FPS is that even possible? Would it be smooth, or is this simply something that is not feasible todo yet? Keep in mind it's just one single 3D object that needs to spin based on user input, not any other interactive elements.

So is sprite the way togo or canvas or something cool I havent even heard of? Thanks everyone in advance!

Answer 1

If I was making a mobile version of a website, I would strip it of most of the graphics and definitely of all the animated gifs, flash, etc. -- people using mobile phones for browsing the web are usually not after the multimedia experience -- they just need some information quickly and use a suboptimal device with poor bandwidth and even worse display and performance to get it. Don't make it even harder for them.

On the other hand, I found that using a background image with all the frames of animation in it, and manipulating the background-position from javascript is a fine way of making small animated sprites, for example for a simple javascript game for mobile phones :)