2015-02-11 39 views
0

我一直在试图找出如何使类似的这种解决方案的东西在这里:SampleJavaScript动画和360度图像

我一直在做一些研究,并在一些非常轻量级的jQuery插件,可以让已经迷迷糊糊360度图像旋转。我不知道:

  • 如何制作类似的菜单点,以便它们可点击但仍然与图像一起旋转?
  • 你们会使用HTML5还是JS来创建开始的动画,其中图像组件掉下来并聚集到一个图像?

现在,我不指望一个“解决方案”对于这一点,只是一些建议和想法,这样我就可以这种方式可能是最聪明的方式。

+0

这取决于这些“轻量级jQuery插件”如何实现这一目标。所以我假设他们正在移动x和y坐标。所以当它们的值发生变化时,你需要使这些菜单点相应地改变它们的位置。 – treegarden 2015-02-11 08:53:55

+4

看看它的来源,它使用的是每个学位的图像 – 2015-02-11 08:55:13

+0

是的,我看到他们正在使用~200张图像。旋转部分在这里并不困难。 @treegarden是的,我得到你想要的,这可能是他们在做什么。你有任何理论,为什么他们在实际图像中包含菜单点? – 2015-02-11 09:03:37

回答

1

我想这是HTML5和JS,可能使用像GSAP http://greensock.com/draggable插件的混合物(有此页面上的一个很好的可拖动微调的例子)但也有http://julian.com/research/velocity/

正如其他人的评论说这可能已初步建成了3D建模,也许Blender的http://www.blender.org/features/在这种情况下,这是HTML5画布元素的按钮和WebGL的混合物

更新

如果你想有一个3D模埃尔动画最好的插件支持WebGL使用的是http://threejs.org/,我都忘了大约

这些教程可以帮助过

http://learningwebgl.com/blog/?p=1253 http://chimera.labs.oreilly.com/books/1234000000802/ch04.html http://www.html5rocks.com/en/tutorials/webgl/webgl_transforms/

+0

我想我在源代码中发现了一个名为YUI的库。这显然是雅虎的UI库。从来没有听说过,我不知道如果网站完全依靠它 – 2015-02-11 09:32:20

+0

啊没错,从来没有听说过YUI,只是发现这个教程虽然http://code.tutsplus.com/tutorials/an-introduction- to-yui - net-16746,看起来它有一个动画模块http://yuilibrary.com/yui/docs/anim/,所以这很可能是如何创建的。 YUI不再被雅虎积极维护,因此它可能不是您的最佳选择,我建议使用canvas和WebGL – Pixelomo 2015-02-11 10:27:01

+1

我实际上最终使用了jQuery。第一个动画是Greensock,然后是Threesixty.js,用于旋转/拖动部分。我当然不得不在功能上做大量的工作,但我仍然认为这是一个非常轻量级的解决方案。至少它比我提到的链接运行得更好:) – 2015-02-13 07:09:56