Question

我不知道应该怎么做。

情况我有一堆div相对于document.body绝对定位。我知道每个div的大小和位置。我也有爆炸原点的位置。

目标我想做的是在爆炸原点模拟爆炸并让所有的div飞离爆炸但最终停止。即模拟爆炸。

他们是否有任何物理配方专家可以告诉我我需要使用哪些公式？我的猜测类似于给爆炸点一些质量并用它来计算出div的速度。

我想做好这个，所以我对任何会产生不太现实的效果的捷径公式并不感兴趣。

如果存在任何高效，轻量级的JavaScript物理库，这将使这项任务变得更加容易。虽然我不想要任何基于jQuery的东西，因为我需要保持尽可能轻量级。并且没有具有完整代码库的库可以使用canvas元素，因为这只会添加大量不需要的代码。

提前谢谢，阿里。

背景故事，与上述问题无关，请随意忽略 我实现这个的原因，因为我认为这对于一些史诗页面过渡效果会很好。所以我想通过爆炸所有主要的可见div来转换。

到目前为止，我已经实现了一些代码，用一些较小的div替换视口中的大div，准备爆炸。

到目前为止，这是我的实现。您将看到对JavaScript本身不是本机的函数的引用，这是因为我正在使用Closure库，它将显示所有内容。

/**
 * @constructor
  */
 pwd.fx.Explode = function (div) {
     this.element_ = div;
 }


 /**
  * @public
  */
 pwd.fx.Explode.prototype.play = function () {
     this.viewportOffset = goog.style.getViewportPageOffset(document);
     this.size = goog.style.getBounds(this.element_);
     this.position = goog.style.getClientPosition(this.element_);
     this.backgroundColour = goog.style.getBackgroundColor(this.element_);

     // Set the explosion centre
     // relative to the viewport
     this.explosionEpicentre = new goog.math.Coordinate(
         this.position.x + Math.floor(this.size.width / 2),
         this.position.y + Math.floor(this.size.height / 2)
     );

     this.seperate();
 }

 /**
  * @private
  * Seperates the current div into loads of little divs
  */
 pwd.fx.Explode.prototype.seperate = function () {
     var idealSize = new goog.math.Size(35, 35);
     var widths = pwd.math.algorithms.getExactFit(idealSize.width, this.size.width);
     var heights = pwd.math.algorithms.getExactFit(idealSize.height, this.size.height);

     // Remove the node as it will be replaced by blocks
     goog.dom.removeNode(this.element_);

     var cumulativeHeight = 0;
     for (var i = 0; i < heights.length; i++) {
         var cumulativeWidth = 0;
         for (var j = 0; j < widths.length; j++) {
             var blockSize = new goog.math.Size(widths[j], heights[i]);
             var blockRelativePosition = new goog.math.Coordinate(cumulativeWidth, cumulativeHeight);
             cumulativeWidth += widths[j];
             var blockPosition = new goog.math.Coordinate.sum(this.position, blockRelativePosition);
             // Add the block
             this.addBlock(blockSize, blockPosition, this.backgroundColour);
         }
         cumulativeHeight += heights[i];
     }
 }

 /**
  * Add a block
  * All positions are relative to the viewport
  * @private
  */
 pwd.fx.Explode.prototype.addBlock = function (blockSize, blockPosition, backgroundColour) {
     var block = document.createElement("div");

     // Height and width
     block.style.width = blockSize.width + "px";
     block.style.height = blockSize.height + "px";

     // Positioning
     block.style.position = "absolute";
     block.style.left = this.viewportOffset.x + blockPosition.x + "px";
     block.style.top = this.viewportOffset.y + blockPosition.y + "px";

     // Styling
     block.style.backgroundColor = backgroundColour;

     // Add to document relative to viewport
     document.body.appendChild(block);

     // Explode block
     // TODO...?
 }

Answer 1

你最好的选择是在物理论坛上提问。你只需要了解牛顿力学的基础知识。给你的物体一个质量。计算在任何一个时间点作用于每个的净力。（爆炸和重力）。给定该力，您可以计算任何一个时间点的加速度。给定加速度，如果在时间t内保持不变，它将通过v改变速度。如果让它们停下来会变得有点复杂，这会带来弹跳和摩擦。弹跳非常简单 - 如果速度为v，弹跳系数为a，则弹跳时，速度变为-va。要计算摩擦力所施加的力，它与将物体推到一起的力成比例。摩擦力=一对表面的摩擦系数x将它们推到一起。（它与它们的表面区域无关或不相信 - 好吧，在大多数情况下。）要在2D中进行这些计算，您将把力，加速度，速度等分成两个分量x和y。如果您知道围绕直角三角形的方式，这很容易。（Sin，Cosine，Tan，Pythagoras）。最后，如果你想让你的div相互碰撞，你需要知道动量的守恒和可能的能量守恒，我不记得这一切是如何起作用的。

我认为你不希望你的div旋转。角速度和动量以及所有这些都比较复杂。

用于一堆Div的JavaScript Explosion Physics

1 个答案: