如何用Javascript创建重力效果？

Question

Google 重力和重力script 是两个很好的演示。 但没有可用的源代码或教程。而且原来的JS文件很大。 如何使用 Drag & 创建重力效果在某个元素上放置（特别是“可投掷”和“可旋转”，如谷歌重力）？

Answer 1

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

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

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

Answer 2

在 github 上查看这个 jquery 插件 JQuery.throwable
只需执行 $("Selector"). throwable() ，物体就会受到重力作用

Answer 3

另一种值得考虑的框架：Matter.js — 演示：JavaScript 中的简单物理沙箱 。

物理

重力很难。这是因为引力是弯曲的时空，我们只能对三维中发生的这种扭曲进行二维表示。

另一方面，以一致的 9.8 m/s^2 的速度沿线性方向向一个方向移动一个元素，这实际上并不难实现。

CSS 解决方案

我们真正需要的是 transition: all 1s Linear; 来控制动画的速度，margin-top 来动画元素向下移动，以及 具有相当具有代表性的 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>