2015-02-11 37 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