使用 javascript/css3/canvas 动画图像/3D/sprite答案

【问题标题】：Animating image/3D/sprite with javascript/css3/canvas使用 javascript/css3/canvas 动画图像/3D/sprite
【发布时间】：2011-04-03 09:42:54
【问题描述】：

这里有点进退两难。我正在制作一个网站的移动版本，其中包含一些更具体的互动内容我觉得我如履薄冰。

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

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

精灵是多哥的方式还是帆布或我什至没有听说过的酷东西？提前谢谢大家！

【问题讨论】：

【解决方案1】：

如果我正在制作一个网站的移动版本，我会去掉它的大部分图形，当然还有所有的 gif 动画、flash 等。使用手机浏览网页的人通常不会追求多媒体体验——他们只需要快速获取一些信息，并使用带宽较差、显示和性能更差的次优设备来获取信息。不要让他们更难。

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

【讨论】：

对，我同意你的看法，但在这种情况下，这是我的一个实验，我只是想看看是否有任何类型的解决方案可以奏效。不一定适用于只考虑 iPhone 自动取款机的“所有手机”。