2012-01-11 30 views
12

Google gravitygravity script là hai cuộc biểu tình tuyệt vời. nhưng không có mã nguồn hoặc hướng dẫn có sẵn. và các tệp JS gốc rất lớn. Làm cách nào để tạo hiệu ứng Gravity với Drag & thả (đặc biệt là "Throw" và "xoay" như trọng lực google) trên một phần tử nhất định?Làm thế nào để tạo hiệu ứng trọng lực với Javascript?

+7

Nhìn vào liên kết thứ hai của bạn, mã là hoàn toàn có sẵn - đó là tại http://gravityscript.googlecode.com /svn/trunk/gravityscript.js. Nó lớn, nhưng đó là bởi vì nó bao gồm một số thư viện, bao gồm jQuery và Box2D. Ngoài ra, nó thực sự khá dễ đọc. Chỉ cần bỏ qua các khối lớn của JS được rút gọn thành mã được định dạng thực tế. –

+0

Trên thực tế, nếu bạn nhìn vào mã src của tập lệnh trọng lực http://code.google.com/p/gravityscript/source/browse/trunk/gravityscript.js, chỉ có mã src jQuery bị làm mờ, nhưng mã cho lực hấp dẫn là không. Nó không phải là khó để con số đó ra. –

+1

Tương tự như http://stackoverflow.com/questions/2185850/drag-elements-around-with-gravity-effect – j08691

Trả lời

8

Bạn sẽ muốn bắt đầu với một công cụ vật lý, Google Gravity sử dụng là Box2Djs là cổng javascript là Box2D. Bạn có thể đọc hướng dẫn sử dụng cho Box2D để tìm hiểu cách sử dụng nó, mặc dù hướng dẫn sử dụng nói rằng bạn sẽ có ít ý tưởng về những gì bạn đang làm mà không có kiến ​​thức về vật lý cứng nhắc (lực, xung, mô-men xoắn…) giúp bạn bắt đầu.

Nếu bạn muốn tự mình viết động cơ vật lý, bạn sẽ phải thực hiện ít nhất động cơ cơ thể cứng nhắc 2D và phát hiện va chạm để nó trông giống như các ví dụ bạn đã đưa ra. Một hướng dẫn để làm điều đó sẽ được gọi là một lớp mô phỏng máy tính và sẽ có một đại số tuyến tính và vật lý tôi điều kiện tiên quyết, nó không phải là một nhiệm vụ tầm thường.

Sau đó, bạn sẽ phải tìm hiểu về kỹ thuật hoạt ảnh javascript. Tôi khuyên bạn nên tìm hiểu về window.requestAnimationFrame. Sử dụng setInterval(stepFunction, time) sẽ hoạt động nhưng sẽ không hiệu quả như trong các trình duyệt hiện đại.

+1

cảm ơn, phiên bản JS của nó có sẵn @ box2d-js.sourceforge.net/index2.html. nhưng tôi muốn tạo hiệu ứng này trên các phần tử HTML thực tế. ví dụ tôi có một vài nút Xã hội rơi khi trang được kích hoạt và người dùng có thể ném chúng và chơi với chủ đề :). Box2dJS rất tuyệt vời cho việc phát triển game dựa trên web nhưng tôi nghĩ nó dựa trên "convas" chứ không phải các phần tử HTML. – Towhid

5

Nhìn một plugin jquery này trên github JQuery.throwable chỉ làm $("Selector").throwable() và đối tượng sẽ phải chịu trọng lực

Các vấn đề liên quan