创建JavaScript 360度图像旋转效果需要多少图像?

时间:2010-12-17 00:07:42

标签: javascript image rotation 360-degrees

我在苹果展示了一些演示,展示了一些很酷的HTML5,CSS3和JavaScript演示,我对this one很感兴趣,这是一个360度的各种产品浏览器。

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

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

感谢。

6 个答案:

答案 0 :(得分:2)

他们没有指明,因为没有真正的答案。如果你想要它超级流畅,360图像会很好。 Apple使用72.你可以使用从2到72到360到无穷远的任何数字来从技术上获得效果,所以这是你的电话,只需多少工作值得效果。

对不起。

答案 1 :(得分:1)

该演示使用了72张图片。

顺便提一下,该演示似乎只是更新了图片src属性。

答案 2 :(得分:1)

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

没有固定的号码。

在该具体示例中,他们使用的是72。

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

找到图片

01 的最后 72 部分替换为 72 以获取所有图片。

答案 3 :(得分:1)

您需要several,这是描述性的。

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

例如,首先加载“north”和“south”。然后是“东”和“西”。然后“西北”,“西南”,“东北”和“东南”等,这样你就可以拥有超过72张图像,但用户不必等待逐渐顺利的体验。

请注意,在这种情况下,您将以2的幂加载它们。

第一次加载(一张图像已经存在):1张图像(相反)
第二次加载:2张图像(两侧)
第3次加载:4张图像 第4次加载:8张图像 ...
第8次加载:128张图片。

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

插值的简单解释是 here

答案 4 :(得分:1)

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

这是帮助展示图像数量的图表。 http://www.photospherix.com/matrix.html

答案 5 :(得分:0)

您可以从此处下载演示 玩弄它我认为24是一个很好的数字,但它取决于你计划创建多少旋转视图。

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