Question

所以我试图通过实现一个“物理引擎”来使这个div动画变得更加逼真，这个引擎有点类似于它实际加速和减速的方式......有点......

<!DOCTYPE html>
<html>
<head>
    <title>Gio is Fay</title>
    <link rel="stylesheet" href="sliding.css"/>
</head>
<body>
    <div id="button">
    <h5>Click me!</h5>
    <h4>HARDER!</h4>
    </div>

    <div id="moving"></div>

    <script type="text/javascript">
        var sliding = document.getElementById("moving");
        var margin = sliding.style.marginTop | 100;

        var speeds = [0.5, 1, 3, 6, 8, 9, 10, 10, 10, 10, 10, 10, 9, 8, 5, 3, 1];
        var length = speeds.length;

        sliding.onclick = move;

        function move() {
            window.log("Herro!");
            for (i = 0; i < length; i++) {
                var x = speeds[i];
                margin += x * 5;
                sliding.style.marginTop = margin + "px";
            }
        }
    </script>
</body>
</html>

当我点击div时，毫不奇怪，没有任何反应。我放入一个警告框告诉我该功能是否被触发，显然它不是。或者至少警报从未出现过。不知道为什么。控制台中没有错误。帮助

Answer 1

首先，如上所述。 window.log不是一个函数。我在控制台中遇到了这个错误。您还需要将moving div的位置设置为相对，以便看到它移动。

这是你的代码的一个小提琴（我的修改）

http://jsfiddle.net/404xk2fo/

当我点击红色div时，它会立即从屏幕上消失，因为它移动了很多。降低倍增系数，它将保持在屏幕上但仍然立即移动。问题是你试图在没有任何计时器的情况下在这个循环中动画。在循环中执行此代码的速度非常快，以至于您的动画将立即发生。

查看此网页，了解有关如何在javascript中制作流畅动画的一些示例。关键是使用requestAnimationFrame

http://creativejs.com/resources/requestanimationframe/

我添加了一个非常简单的requestAnimationFrame http://jsfiddle.net/j4x9dctq/

示例

我正在使用一个小jquery来选择div。我只是喜欢jquery语法。如果您愿意，可以使用原生javascript。

Answer 2

我尝试了你的代码，除了window.log（）之外的所有内容都“有效”，所以我不确定为什么你根本没有得到任何结果。

这真的不是动画的最佳方法。您应该使用requestAnimationFrame（），它的工作方式与setTimeout（）非常相似，但是针对动画进行了优化。当我的代码工作时，你根本看不到动画，因为你只有17帧，而那些通过for循环的17次发生超快。因此，请查看requestAnimationFrame（）以使用js进行动画制作。以下是您的代码实现该更改的内容：

var sliding = document.getElementById("moving");
var margin = sliding.style.marginTop | 10;

var speeds = [0.5, 1, 3, 6, 8, 9, 10, 10, 10, 10, 10, 10, 9, 8, 5, 3, 1];
var length = speeds.length;
var frame = 0;

sliding.onclick = function () {
  frame = 0;
  requestAnimationFrame(move);
}

function move() {
  var x = speeds[frame];
  margin += x;
  sliding.style.marginTop = margin + "px";
  if (frame < length)
    requestAnimationFrame(move);
  frame++;
}

您还应该重新考虑更改费率的方法。我会使用trig函数。这样你就可以轻松改变div移动的持续时间和距离。这是一个例子，随意使用它。您可以运行此代码段以查看其外观。

var sliding = document.getElementById("moving");
var margin = sliding.style.marginTop | 10;

// a few settings for our animation
var theta = 0.0;    //in radians
var distance = 100; //in pixels
var duration = 1;   //in seconds
var frameRate = 60; //fps
var down = false;   //a switch so we can move up and down, we are starting in the up position

sliding.onclick = function () {
  if (down)
    //if we need to go up, we start at 1 (cos(PI) = -1)
    theta = Math.PI;
  else
    //otherwise we start at 0
    theta = 0.0;
  
  //flip it
  down = !down;
  
  //and away we go
  requestAnimationFrame(move);
}

function move() {
  //the margin is determined with cos
  margin = (-1 * Math.cos(theta) + 1) * distance + 10;
  //and set
  sliding.style.marginTop = margin + "px";
  //our theta advances
  theta += (Math.PI) / frameRate / duration;
  //and we continue if we are not at either end
  if ((down && theta <= Math.PI) || (!down && theta <= Math.PI * 2))
    requestAnimationFrame(move);
}

#moving {
  margin-top: 10px;
  padding: 10px;
  background: #047;
  color: #bbb;
  border-radius: 5px;
  width: 80px;
  text-align: center;
}

<div id="moving">DIV</div>

最后，jQuery内置了这些东西，所以你不必担心重新发明轮子，所以请注意这一点。我希望这有帮助！

动态动画？

2 个答案: