2012-01-11 20 views
12

Google gravity i gravity script to dwie miłe demonstracje. ale nie ma kodu źródłowego ani samouczków. a oryginalne pliki JS są bardzo duże. Jak mogę utworzyć efekt grawitacji za pomocą przeciągnięcia przeciągnij & (w szczególności "Rzuć w stanie" i "obracanie" jak google grawitacja) na pewnym elemencie?Jak stworzyć efekt grawitacji za pomocą Javascript?

+7

Patrząc na drugiego linku, kod jest całkowicie dostępny - to na http://gravityscript.googlecode.com /svn/trunk/gravityscript.js. Jest duży, ale to dlatego, że zawiera kilka bibliotek, w tym jQuery i Box2D. Poza tym jest całkiem czytelny. Po prostu pomiń obok dużych bloków minified JS do rzeczywistego sformatowanego kodu. –

+0

W rzeczywistości, jeśli spojrzysz na kod src skryptu grawitacji http://code.google.com/p/gravityscript/source/browse/trunk/gravityscript.js, tylko kod src jQuery zostanie zaciemniony, ale kod grawitacja nie jest. Nie powinno to być trudne. –

+1

Podobny do http://stackoverflow.com/questions/2185850/drag-elements-around-with-gravity-effect – j08691

Odpowiedz

8

Będziesz chciał zacząć od silnika fizyki, którego używa Google Gravity to Box2Djs, który jest portem javascript Box2D. Możesz przeczytać instrukcję obsługi Box2D, aby dowiedzieć się, jak jej używać, ale sam podręcznik mówi, że nie masz pojęcia, co robisz, bez znajomości sztywnej fizyki ciała (siły, impulsu, momentu obrotowego itp.), Chociaż te przykłady mogą pomóż ci zacząć.

Jeśli chcesz napisać silnik fizyki samodzielnie, musisz przynajmniej zaimplementować dynamiczną dynamikę nadwozia 2D i wykrywanie kolizji, aby wyglądał jak podane przykłady. Samouczek do tego byłby nazwany klasą symulacji komputerowej i miałby algebrę liniową i fizykę, której wymagałem, to nie jest trywialne zadanie.

Następnie należy zapoznać się z technikami animacji javascript. Polecam naukę o window.requestAnimationFrame. Używanie setInterval(stepFunction, time) będzie działać, ale nie będzie tak wydajne, jak mogłoby być w nowoczesnych przeglądarkach.

+1

dzięki, wersja JS jest dostępna @ box2d-js.sourceforge.net/index2.html. ale chcę utworzyć ten efekt na rzeczywistych elementach HTML. na przykład mam kilka przycisków społecznościowych, które spadają, gdy strona jest aktywowana, a użytkownicy mogą je wyrzucać i bawić się motywem :). Box2dJS jest świetny do tworzenia gier opartych na sieci, ale myślę, że jest oparty na "convas", a nie na elementach HTML. – Towhid

5

Spójrz plugin jquery to na github JQuery.throwable prostu zrobić $("Selector").throwable() i obiekt będzie pod wpływem grawitacji