如何使用 Javascript 创建重力效果？

关键词：

【中文标题】如何使用 Javascript 创建重力效果？【英文标题】：How to create a gravity effect with Javascript? 【发布时间】：2012-02-08 04:15:55 【问题描述】：

Google gravity 和 gravity script 是两个不错的演示。 但没有可用的源代码或教程。而且原始的JS文件很大。 如何在某个元素上通过拖放创建重力效果（特别是“Throwable”和“rotatable”，如谷歌重力）？

【问题讨论】：

查看您的第二个链接，代码绝对可用——位于gravityscript.googlecode.com/svn/trunk/gravityscript.js。它很大，但那是因为它包含几个库，包括 jQuery 和 Box2D。除此之外，它实际上是相当可读的。只需跳过缩小 JS 的大块到实际的格式化代码即可。 其实看重力脚本code.google.com/p/gravityscript/source/browse/trunk/…的src代码，只有jQuery的src代码被混淆了，而重力的代码没有。应该不难弄清楚。 类似于***.com/questions/2185850/… 建立重力效果很容易。但我最需要的是用于使“谷歌重力”元素“可投掷”的算法。它不仅仅是移动和释放。它也是“可旋转的”，这一点非常重要。 @Towhid：通过将鼠标视为您握住它的枢轴点（带有一些摩擦力），可旋转对象似乎（从玩它）。这种“算法”后来被称为牛顿力学。 【参考方案1】：

您需要从物理引擎开始，Google Gravity 使用的引擎是 Box2Djs，它是 Box2D 的 javascript 端口。您可以阅读 Box2D 的手册以了解如何使用它，尽管手册本身指出，如果没有一些刚体物理知识（力、冲量、扭矩等），您将几乎不知道自己在做什么，尽管这些示例可能帮助您入门。

如果您想自己编写物理引擎，您至少必须实现 2D 刚体动力学和碰撞检测，才能使其看起来像您提供的示例。这样做的教程将被称为计算机模拟课程，并且具有线性代数和物理 I 的先决条件，这不是一项简单的任务。

之后，您将不得不学习 javascript 动画技术。我建议了解window.requestAnimationFrame。使用setInterval(stepFunction, time) 会起作用，但它不会像在现代浏览器中那样高效。

【讨论】：

谢谢，它的 JS 版本在 @box2d-js.sourceforge.net/index2.html 可用。但我想在实际的 HTML 元素上创建这种效果。例如，我有一些社交按钮，当页面被激活时会掉下来，用户可以扔掉它们并玩主题:)。 Box2dJS 非常适合基于 Web 的游戏开发，但我认为它基于“convas”而不是 HTML 元素。【参考方案2】：

在 github 上查看这个 jquery 插件JQuery.throwable 只要做$("Selector").throwable()，物体就会受到重力影响

【讨论】：

如何仅使用 CSS 创建淡入/淡出效果？

...出agsin。DOM元素调用和效果应该在CSS或CSS3中。我不能使用javascript和Jqu 查看详情

使用重力/碰撞检测/效果将气泡图升级到 v4+

】使用重力/碰撞检测/效果将气泡图升级到v4+【英文标题】：Upgradingbubblecharttov4+withgravity/collidedetection/effects【发布时间】：2021-04-0919:36:13【问题描述】：我有一个convertedd3v4气泡图，但在d3v3中曾经有更多的功能，例如重力/电荷和... 查看详情

javascript模拟重力感应弹跳，做个不一样的登陆端口(代码片段)

知识点：原生js动画效果,重力系统,弹跳算法,迭代与递归,动画序列,,两种定时器配合使用,循环判断注意事项,编程思想与解决方案思维。html代码：<divid="bg_wrap"><div><imgsrc="images/1.jpg"width="100%"height="100%"alt="背景图"/></... 查看详情

如何创建交叉淡入淡出，以便我可以使用 javascript 调用 css 中的关键帧？

】如何创建交叉淡入淡出，以便我可以使用javascript调用css中的关键帧？【英文标题】：Howdoicreateacrossfadingsoicanusejavascripttocallthekeyframesinthecss?【发布时间】：2019-08-0513:27:19【问题描述】：我正在尝试在html中对我的照片创建淡入淡... 查看详情

如何使用javascript移动图像？

】如何使用javascript移动图像？【英文标题】：Howtomovearoundanimagewithjavascript?【发布时间】：2010-01-3115:24:47【问题描述】：我正在开发一个简单的网络测验并使用javascript，我想创建一个效果，当用户达到特定级别或分数时，它会显... 查看详情

如何使用 html5 画布扭曲图像以创建在风中飘扬的旗帜效果

...2011-05-2017:17:53【问题描述】：给定一个图像，我需要使用javascript和html5画布创建一个图像被扭曲的动画，就好像它是一面在风中飘扬的旗帜。奖励：我还希望能够将此动画导出为png。【问题讨论 查看详情

Rails - 如何向用 javascript 创建的表单添加 CSRF 保护？

】Rails-如何向用javascript创建的表单添加CSRF保护？【英文标题】：Rails-HowtoaddCSRFProtectiontoformscreatedinjavascript?【发布时间】：2012-01-2003:59:48【问题描述】：我正在使用backbone.js，效果很好。但是我作为javascript模板创建的表单缺少rai... 查看详情

如何使用css在鼠标悬停时缩放图像？

...个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用HTM... 查看详情

three.js进阶之旅：物理效果-碰撞和声音💥(代码片段)

本文内容主要汇总如何在Three.js创建的3D世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。通过本... 查看详情

从零开始学_javascript_系列——dojo（基础，动画移动，重力模拟，动画合并，添加标签）

dojo学习 （1）加载①首先，先设置  <script>    //替代使用data-dojo-config，我们创建一个dojoConfig对象（是个设置）在我们调用dojo.js之前，他们功能相同    //这比通过一大堆设置来说，更... 查看详情

如何使用 JavaScript 创建会话？

】如何使用JavaScript创建会话？【英文标题】：HowtocreateasessionusingJavaScript?【发布时间】：2011-01-1611:45:26【问题描述】：如何在JavaScript创建会话？我尝试这样：<scripttype="text/javascript">Session["controlID"]="Thisismysession";</script>... 查看详情

如何使用 JavaScript 创建会话

】如何使用JavaScript创建会话【英文标题】：HowtocreatesessionwithJavaScript【发布时间】：2018-02-2510:27:23【问题描述】：我有一个这样的PHP代码来创建会话：Session::toast(\'sessionname\',\'sessionvalue\');而不是像这样调用会话：if(Session::tersedia... 查看详情

使用jquery创建模态窗口登陆效果

...站也适用于与主网站分开的作者登陆页面，模态窗口比在JavaScript中创建新窗口更容易，因为使用HTML标记显示，所有的东西能都呈现在同一个窗口中。我将演示如何利用jQuery插件le 查看详情

如何使用 CSS 单元素创建镜像效果

】如何使用CSS单元素创建镜像效果【英文标题】：HowtocreatemirroredimageeffectwithCSSsingleelement【发布时间】：2016-10-2116:24:12【问题描述】：我有一个带有背景图片的HTML元素，想创建一个到底部的镜像效果，好像图片是这样反射的：对... 查看详情

如何在 javascript 中为桌面和移动设备创建不同的点击行为？

】如何在javascript中为桌面和移动设备创建不同的点击行为？【英文标题】：Howtocreatedifferentonclickbehaviorfordesktopandmobileinjavascript?【发布时间】：2012-07-2108:57:10【问题描述】：我正在开发生成一段格式化文本的简单表单（你可以看... 查看详情

如何使用颜色划分创建渐变效果？

】如何使用颜色划分创建渐变效果？【英文标题】：HowcanIcreateagradienteffectusingcolordivisions?【发布时间】：2017-09-0116:05:01【问题描述】：我正在尝试创建一个表格视图（自定义类不是UITableView），其结果具有渐变效果，如下图示例... 查看详情

如何使用不同类型的重力制作 LayerImageDrawable

】如何使用不同类型的重力制作LayerImageDrawable【英文标题】：HowtomakeaLayerImageDrawablewithdifferenttypesofgravity【发布时间】：2015-01-1618:54:01【问题描述】：我正在尝试构建一个包含两个图像的图像视图；背景中的一张照片，上面有一... 查看详情

如何使用jQuery创建左右滑动效果？

】如何使用jQuery创建左右滑动效果？【英文标题】：HowcanIusejQuerytocreatealeftandrightslidingeffect?【发布时间】：2013-04-1912:45:35【问题描述】：我有以下jQuery代码sn-p：vartarget1=$(\'.div1\');vartarget2=$(\'.div2\');target1.delay(1500).fadeIn();target2.dela... 查看详情