创建 JavaScript 360 度图像旋转效果需要多少张图像？答案

【问题标题】：How many images needed to create JavaScript 360 degree image spin effect?创建 JavaScript 360 度图像旋转效果需要多少张图像？
【发布时间】：2011-05-26 21:07:48
【问题描述】：

我在 Apple 上查看了一些演示，展示了一些很酷的 HTML5、CSS3 和 JavaScript 演示，我被 this one 所吸引，这是一个 360 度产品查看器。

我想知道你认为我需要尝试复制的许多照片。苹果自己在页面上说several，但这不是很具描述性。

尝试完成似乎是一项非常艰巨的任务，所以我可能不会这样做，但我只是想知道。

谢谢。

【问题讨论】：

标签： javascript image rotation 360-degrees

【解决方案1】：

他们没有具体说明，因为没有真正的答案。如果您希望它超级流畅，360 度图像会很好。 Apple 使用了 72。您可以使用从 2 到 72 到 360 到无穷大的任何数字来获得技术上的效果，因此您可以决定需要多少工作才能获得效果。

对不起。

【讨论】：

@BOSS：嗯，你知道，抱歉没有简单的答案。我不喜欢自己做那样的决定 xD 但我相信你已经明白了:)

【解决方案2】：

演示使用 72 张图片。

^{顺便说一下，演示似乎只是更新了图像src属性。}

【讨论】：

你是怎么知道有多少的？我发帖后才发现，如果我滚动得很慢，你当然可以数数！ :)
我使用 Chrome 的开发者工具检查了 DOM。
@BOSS：嗯，我快速浏览了他们的源代码，并决定通过在他们的模板路径中插入高数字来找到更快的答案，直到找到上限：P @ 987654322@
是的，我很喜欢这个演示与 HTML5 和 CSS3 xD 的真正关系
我只是在旋转图像时让 DOM 检查器保持打开状态。图片上的src属性在72后重启。

【解决方案3】：

取决于您想要的旋转精度。

没有固定的数字。

在那个具体的例子中，他们使用的是 72。

图片可以在http://developer.apple.com/safaridemos/showcase/threesixty/images/optimized/Seq_v04_640x378_72.jpg找到

将url的最后一个72部分替换为01到72以获取所有图片。

【讨论】：

【解决方案4】：

您需要several，它具有描述性。

但请注意一件事。如果按特定顺序加载它们，可以获得渐进式效果。

例如，首先加载“北”和“南”。然后是“东”和“西”。然后是“northwest”、“southwest”、“northeast”和“southeast”等，这样您就可以拥有超过 72 张图像，但用户无需等待即可获得逐渐流畅的体验。

请注意，在这种情况下，您将加载它们的二次幂。

第一次加载（在一张图片已经存在之后）：1 张图片（相反）
第二次加载：2 张图片（侧面）
第三次加载：4 张图片
第 4 次加载：8 张图片
...
第 8 次加载：128 张图片。

请注意，您不会轻易使用度数。（他们只需要除以 5，360/5=72）
要计算哪个图像在给定度数上，您将使用插值。
因此，首先您将 360 度内插到 2（图像），然后到 4，然后是 8... 以了解根据您拥有的图像来选择哪个图像

插值的简单解释是here。

【讨论】：

【解决方案5】：

从视觉而不是技术...旋转的平滑度是您想要查看需要多少图像的因素。如果对象的大小和详细程度有助于回答，那么您就有了带宽。最少 20 张图片，推荐 40 张，但 72 张看起来很棒。请记住，如果是摄影，每张图片都会增加更多的工作量和难度。

这是一张有助于展示图片数量的图表。 http://www.photospherix.com/matrix.html

【讨论】：

【解决方案6】：

您可以从这里下载演示试一试，我认为 24 是一个不错的数字，但这取决于您计划创建多少个旋转视图。

http://lukedurrant.com/2011/08/apples-360-rotating-ipod-html-5-source-code-download/

【讨论】：