使用javascript / css3 / canvas动画图像/ 3D /精灵

时间:2010-08-24 20:15:21

标签: javascript css animation html5 canvas

这里有点困境。我正在制作一个网站的移动版本,其中有一些互动的东西,更具体地说,我有3D的这个对象,你可以旋转,我在Flash中使用papervision但现在我需要这样做,因为移动设备中没有闪存我觉得我在冰上。

我正在考虑使用带有alpha通道的PNG序列导出360度旋转@ 30 FPS,然后简单地将它们拼接成精灵,然后将其用作CSS中的背景并使用背景位置然后“模拟” “一个动画。

那或者只是非常快速地切换源图像,或者以某种方式使用“画布”可能,事情是我不确定这是否会产生完全低于标准的性能?我的意思是切换背景位置或图像源文件@ 30 FPS甚至可能吗?会不会很顺利,或者这只是一件不可行的东西呢?请记住,它只是一个需要根据用户输入旋转的3D对象,而不是任何其他交互元素。

sprite的方式是togo或canvas还是一些很酷的东西,我甚至没有听说过?提前谢谢大家!

1 个答案:

答案 0 :(得分:0)

如果我正在制作一个网站的移动版本,我会删除它的大多数图形,绝对是所有动画GIF,闪光灯等等。 - 使用手机浏览网页的人通常不会多媒体体验 - 他们只需要快速获取一些信息,并使用带宽较差的次优设备,甚至更差的显示和性能。不要让它们变得更难。

另一方面,我发现使用包含所有动画帧的背景图像,并从javascript操纵background-position是制作小动画精灵的好方法,例如对于简单的javascript手机游戏:)