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

Question

Google gravity和gravity script是兩個很好的演示。 但沒有可用的源代碼或教程。 並且原始的 JS 文件非常大。 如何在某個元素上通過拖放（特別是“可拋出”和“可旋轉”，如谷歌重力）創建重力效果？

Answer 1

您需要從物理引擎開始，Google Gravity 使用的是Box2Djs ，它是Box2D的 javascript 端口。 您可以閱讀 Box2D 的手冊以了解如何使用它，盡管手冊本身指出如果沒有一些剛體物理知識（力、沖量、扭矩等），您將幾乎不知道自己在做什么，盡管這些示例可能幫助您入門。

如果您想自己編寫物理引擎，您至少必須實現 2D 剛體動力學和碰撞檢測，才能使其看起來像您提供的示例。 這樣做的教程將被稱為計算機模擬課程，並且具有線性代數和物理 I 的先決條件，這不是一項微不足道的任務。

之后，您將不得不學習 javascript 動畫技術。 我建議學習window.requestAnimationFrame 。 使用setInterval(stepFunction, time)會起作用，但它不會像在現代瀏覽器中那樣高效。

Answer 2

在 github JQuery.throwable上查看這個 jquery 插件只需執行$("Selector").throwable()並且對象將在重力下

Answer 3

另一個要考慮的框架：Matter.js —演示：JavaScript 中的 Easy Physics Sandbox 。

物理學

重力很難。 那是因為引力是彎曲的時空，我們只能對發生在三維空間中的這種扭曲進行二維表示。

另一方面——以一致的 9.8 m/s^2 的速度沿線性方向朝一個方向移動元素，這實際上並不難實現。

CSS 解決方案

我們真正需要的只是transition: all 1s linear; 控制 animation 的速度， margin-top為元素向下移動設置動畫， transition-timing-function具有相當代表 9.8 m/s^2 的cubic-bezier貝塞爾曲線。

演示

 document.addEventListener('DOMContentLoaded', function(event) { document.getElementById('drop').addEventListener('click', function(ev) { div = document.createElement('div'); div.classList.add('gravity-affected-object'); image = document.createElement('img'); image.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/640px-Red_Apple.jpg'; image.width = 100; image.classList.add('gravity-affected-object'); div.style.position = 'absolute'; div.style.left = '50%'; div.appendChild(image); document.getElementById('page-top').appendChild(div); setTimeout(function() { div.style.marginTop = '1000px'; }, 100); }); });

 .gravity-affected-object { transition: all 1s linear; transition-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333); z-index: -5000; }

 <div id="page-top"></div> <button id="drop">Drop</button>