Google gravity和是两个很好的示范。 ,但没有可用的源代码或教程。和原始的JS文件非常大。 如何创建一个重力效果与拖动&下降(特别是“投掷”和“旋转”像谷歌的重力)在某一元素?如何用Javascript创建重力效果?
回答
你会希望从物理引擎开始,Google Gravity使用的是Box2Djs这是一个JavaScript端口Box2D。您可以阅读Box2D手册以了解如何使用它,虽然手册本身声明,如果您不了解刚体物理(力,冲量,扭矩等),您将不知道自己在做什么,尽管这些示例可能帮助你开始。
如果你想自己编写物理引擎,你必须至少实现二维刚体动力学和碰撞检测才能看起来像你给的例子。这样做的教程将被称为计算机模拟类,并且将具有线性代数和物理前提条件,这不是一项简单的任务。
之后,您将不得不学习JavaScript动画技巧。我建议学习window.requestAnimationFrame
。使用setInterval(stepFunction, time)
可以工作,但不会像现代浏览器中那样高效。
谢谢,它的JS版本可用@ box2d-js.sourceforge.net/index2.html。但我想在实际的HTML元素上创建这种效果。例如我有几个社交按钮,当页面被激活时,用户可以抛出它们并玩主题:)。 Box2dJS非常适合基于Web的游戏开发,但我认为它基于“convas”而不是HTML元素。 – Towhid 2012-01-13 12:53:07
看在github上一本jQuery插件JQuery.throwable 只是做$("Selector").throwable()
和对象会在重力作用下
- 1. 如何使用javascript创建此效果?
- 2. 如何重新创建此MouseMove效果?
- 3. 如何创建重力网格?
- 4. 如何使用纯Javascript创建收银机效果?
- 5. 如何用jQuery/javascript创建文本类型编写器效果?
- 6. 如何使用actionscript/pixel bender重新创建这种效果?
- 7. 如何创建“图像建设”效果
- 8. 如何在CSS3/Javascript中创建“高亮”效果?
- 9. JavaScript,html5:如何动态创建Vignette效果?
- 10. 如何在JavaScript中创建轮播/滑块效果?
- 11. 使用JavaScript努力创建SVG形状
- 12. 如何创建平滑CATransition效果
- 13. 如何创建此图像效果?
- 14. 如何创建漩涡/涡流效果?
- 15. 如何创建谷歌效果?
- 16. 如何创建水印效果?
- 17. 如何创建此CSS效果?
- 18. 如何在JS中创建RollOver效果?
- 19. 如何在PowerShell中创建printf效果
- 20. 在HTML5中使用JavaScript创建文本效果(如Flash)
- 21. 如何重新创建此效果/过渡/动画? (HTML/CSS/JQuery)
- 22. 如何重新创建此字体调整大小效果?
- 23. 如何创建重力形式的字段重复组
- 24. PHP如果重力PDF
- 25. 如何在wpf应用程序中重新创建win7手机滑动效果
- 26. 如何创建文本渐变效果,当用户使用PageIndicator
- 27. Javascript addEventListener - 用于创建鼠标悬停效果?
- 28. 仅使用CSS3创建类似Javascript的滚动效果?
- 29. 创建IOS 3D效果
- 30. 如何创建使用JavaScript
看你的第二个链接,代码绝对可用 - 它在http://gravityscript.googlecode.com /svn/trunk/gravityscript.js。它很大,但那是因为它包含了几个库,包括jQuery和Box2D。除此之外,它实际上是相当可读的。只需跳过跳过大块缩小的JS到实际格式化的代码。 – 2012-01-11 19:47:56
实际上,如果您查看引力脚本http://code.google.com/p/gravityscript/source/browse/trunk/gravityscript.js的src代码,只会对jQuery src代码进行模糊处理,但代码重力不是。应该不难弄清楚。 – 2012-01-11 19:49:40
类似于http://stackoverflow.com/questions/2185850/drag-elements-around-with-gravity-effect – j08691 2012-01-11 20:33:46