我在苹果展示了一些演示,展示了一些很酷的HTML5,CSS3和JavaScript演示,我对this one很感兴趣,这是一个360度的各种产品浏览器。
我想知道很多照片你认为我需要尝试复制这个。 Apple自己在页面上说several
,但这不是很具描述性。
尝试完成这似乎是一项非常艰巨的任务,所以我可能不会这样做,但我只是想知道。
感谢。
答案 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/