如何使用 Javascript 创建重力效果?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8825519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a gravity effect with Javascript?
提问by Towhid
Google gravityand gravity scriptare two nice demonstrations. but no source code or tutorials are available. and the original JS files are very big. How can I create a Gravity effect with Drag & drop(specially being "Throw able" and "rotatable" like google gravity) on a certain element?
谷歌重力和重力脚本是两个很好的演示。但没有可用的源代码或教程。而且原来的JS文件很大。如何通过拖放(特别是“可投掷”和“可旋转”,如谷歌重力)在某个元素上创建重力效果?
采纳答案by nwellcome
You will want to start with a physics engine, the one Google Gravity uses is Box2Djswhich is a javascript port of Box2D. You can read the manual for Box2D to learn how to use it, though the manual itself states that you will have little idea what you are doing without some knowledge of rigid body physics (force, impulse, torque, etc), though these examples may help you get started.
您需要从物理引擎开始,Google Gravity 使用的是Box2Djs,它是Box2D的 javascript 端口。您可以阅读 Box2D 的手册以了解如何使用它,尽管手册本身指出如果没有一些刚体物理知识(力、冲量、扭矩等),您将几乎不知道自己在做什么,尽管这些示例可能帮助您入门。
If you want to write the physics engine yourself you will have to at least implement 2D rigid body dynamics and collision detection for it to look like the examples you gave. A tutorial for doing that would be called a computer simulation class and would have a linear algebra and physics I prerequisite, it's not a trivial task.
如果您想自己编写物理引擎,您至少必须实现 2D 刚体动力学和碰撞检测,才能使其看起来像您提供的示例。这样做的教程将被称为计算机模拟课程,并且具有线性代数和物理 I 的先决条件,这不是一项微不足道的任务。
Afterwards, you will have to learn about javascript animation techniques. I recommend learning about window.requestAnimationFrame
. Using setInterval(stepFunction, time)
will work but it won't be as efficient as it could be in modern browsers.
之后,您将不得不学习 javascript 动画技术。我建议学习window.requestAnimationFrame
. 使用setInterval(stepFunction, time)
会起作用,但它不会像在现代浏览器中那样高效。
回答by benahm
Look a this jquery plugin on github JQuery.throwablejust do $("Selector").throwable()
and the object will be under gravity
看在github上一本jQuery插件JQuery.throwable只是做$("Selector").throwable()
和对象会在重力作用下