如何使用重力沿弯曲路径进行动画处理

Question

我正在尝试创建一个模拟，其中球沿着运动路径运动，类似于这样：

https://bl.ocks.org/mbostock/1705868

但是，我不想使用补间，而是希望球的运动由重力和物体的速度决定-类似于过山车，如下所示：

https://www.myphysicslab.com/roller/roller-single-zh.html

到目前为止，这是我所拥有的，但是存在一个小问题，过山车在每一帧中都略有增加能量，而不是失去能量：

https://jsbin.com/jidazom/edit?html,js，输出

x

任何有关如何解决此问题的建议将不胜感激！

Answer 1

您可以尝试使用此JS Bin 。 我修改了代码以适合自己对重力影响的理解。 在计算中，我使用在当前位置计算的斜率的垂直分量（每侧使用一个小的增量，而不依赖于先前的位置）：

function getEffectiveGravityFactor() {
  // Get the vertical component of the slope at current position
  var delta = 0.001;
  var pathPos1 = Math.min(maxRange, Math.max(delta, pathPos));
  var pos1 = pathEl.getPointAtLength(pathPos1 - delta);
  var pos2 = pathEl.getPointAtLength(pathPos1 + delta);
  var dx, dy;
  if (direction) {
    dx = pos2.x - pos1.x;
    dy = pos2.y - pos1.y;
  } else {
    dx = pos1.x - pos2.x;
    dy = pos1.y - pos2.y;
  }
  var total = Math.sqrt(dx * dx + dy * dy);
  return dy / total;
}

路径的限制像台球桌垫一样反应。 我不知道那是你打算做什么。 反弹并不总是完全有弹性的，因此达到极限时，能量可能会略有增加或减少。

我还介绍了一个摩擦系数，该系数相当粗略，但给出了可能的实现方案的想法。

由于我不确定requestAnimationFrame是否以非常固定的间隔执行，因此我在计算中考虑了实际的时间间隔。 该部分可能不是必需的。

这是完整的代码：

var svg = d3.select("#line").append("svg:svg").attr("width", "100%").attr("height", "100%");
var data = d3.range(50).map(function(){return Math.random()*10;});
var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
var line = d3.svg.line()
  .interpolate("cardinal")
  .x(function(d,i) {return x(i);})
  .y(function(d) {return y(d);})

var path = svg.append("svg:path").attr("d", line(data));
var circle = 
    svg.append("circle")
      .attr("cx", 100)
      .attr("cy", 350)
      .attr("r", 3)
      .attr("fill", "red");

var circleBehind = 
    svg.append("circle")
      .attr("cx", 50)
      .attr("cy", 300)
      .attr("r", 3)
      .attr("fill", "blue");

var circleAhead = 
    svg.append("circle")
      .attr("cx", 125)
      .attr("cy", 375)
      .attr("r", 3)
      .attr("fill", "green");

var pathEl = path.node();
var pathLength = pathEl.getTotalLength();
var BBox = pathEl.getBBox();
var scale = pathLength/BBox.width;
var offsetLeft = document.getElementById("line").offsetLeft;
var randomizeButton = d3.select("#randomize");
var pathPos = 600;
var pos = {x: 0, y: 0};
var speed = 10;
var friction = 0;
var direction = true;
var gravity = 0.01;
var maxRange = 1500;
var speedChange;
var currentTime, prevTime, diffTime;

function getEffectiveGravityFactor() {
  // Get the vertical component of the slope at current position
  var delta = 0.001;
  var pathPos1 = Math.min(maxRange, Math.max(delta, pathPos));
  var pos1 = pathEl.getPointAtLength(pathPos1 - delta);
  var pos2 = pathEl.getPointAtLength(pathPos1 + delta);
  var dx, dy;
  if (direction) {
    dx = pos2.x - pos1.x;
    dy = pos2.y - pos1.y;
  } else {
    dx = pos1.x - pos2.x;
    dy = pos1.y - pos2.y;
  }
  var total = Math.sqrt(dx * dx + dy * dy);
  return dy / total;
}

function play() {
  requestAnimationFrame(play);

  currentTime = Date.now();
  diffTime = currentTime - prevTime;

  if (diffTime > 20) {

    prevTime = currentTime;

    if (pathPos < 0 || pathPos > maxRange) {
      // The limit was reached: change direction
      direction = !direction;
      pathPos = Math.min(maxRange, Math.max(0, pathPos));
    } else {
      speedChange = gravity * diffTime * getEffectiveGravityFactor();
      if (speedChange < -speed) {
        // Direction change caused by gravity
        direction = !direction;
        speed = 0;
      } else {
        speed += speedChange;
        speed = Math.max(0, speed - friction * diffTime * (0.0002 + 0.00002 * speed));
      }
    }

    pathPos += (direction ? 1 : -1) * speed;
    pos = pathEl.getPointAtLength(pathPos);

    circle
      .attr("opacity", 1)
      .attr("cx", pos.x)
      .attr("cy", pos.y);

    posBehind = pathEl.getPointAtLength(pathPos - 10); 
    circleBehind
      .attr("opacity", 1)
      .attr("cx", posBehind.x)
      .attr("cy", posBehind.y);

    posAhead = pathEl.getPointAtLength(pathPos + 10); 
    circleAhead
      .attr("opacity", 1)
      .attr("cx", posAhead.x)
      .attr("cy", posAhead.y);
  }
}

prevTime = Date.now();
play();

var txtSpeed = document.getElementById("txtSpeed");
var txtFriction = document.getElementById("txtFriction");

txtSpeed.value = speed;
txtFriction.value = friction;

randomizeButton.on("click", function(){
  speed = parseFloat(txtSpeed.value);
  friction = parseFloat(txtFriction.value);
  pathPos = 400;
  direction = true;
  prevTime = Date.now();
  data = d3.range(50).map(function(){return Math.random()*10;});
  circle.attr("opacity", 0);                                    
  path
    .transition()
    .duration(300)
    .attr("d", line(data));
});

Answer 2

您似乎朝着正确的方向前进。 d3.js是我能想到的最佳选择，并且这里已经有一些d3.js引力问题，它们具有出色的答案：

将d3.js气泡转换为基于强制/重力的布局

了解D3.js强制布局-8：重力作为起点也可能会有所帮助。

至于“任何”建议：失败更快（即保持编写和测试的周期尽可能快和自动化），并随心所欲地记录文档（以后将不胜感激。）