javascript - 随机JQuery的.animate缓动

我已经搜索了一段时间，但似乎找不到我需要的东西。
我知道您可以自定义宽松政策，但我不知道如何做。
我正在进行赛马（JQuery移动所有马匹）。我需要它们以随机的速度运行，但需要在给定的时间内完成动画。例如：

Horse1：[0-1-3-4-5-4-4-5-3-2-8-9-8-4-3-2-1-0]
Horse2：[4-4-2-1-1-1-4-9-9-9-8-6-5-4-3-2-5-6]
Horse3：[2-3-4-5-5-5-5-6-7-8-7-4-5-1-2-4-5-8]

此处的数字表示元素的速度（速度）。我见过一个特殊的缓动插件，但是没有我想要的那种缓动。

任何帮助表示赞赏。
谢谢，
内达斯

最佳答案

我在下面提供了一个示例，展示了如何使用jQuery的animate函数使用提供的数据“竞赛”三匹“马”。但是，这使用的是jQuery提供的标准“线性”缓动函数，对于每个“马”，多次调用animate函数。

从技术上讲，您可以创建自定义缓动函数来移动马匹，将速度数据合并到缓动函数本身中。但是，由于以下几个原因，我认为这不是解决该问题的好方法：


您将不得不为这三匹马中的每一个编写不同的硬编码缓动函数，因为缓动函数不能被编程为采用输入参数，即速度参数。
缓动函数不能存储在数组中，因此无法调用myEasingFunction [0]，myEasingFunction [1]等，而必须使用单个函数，例如myEasingFunction0，myEasingFunction1等。这不是很灵活。
因为您只想让一匹马“获胜”，所以您必须在（1）拥有三个自定义缓动功能中的两个而不达到总“竞赛”距离的100％或（2）分别为每匹马提供不同的最终距离，这将不利于创建自定义缓动函数的目的，即必须将某种形式的数据放在两个不同的位置。


无论如何，如果您需要有关创建自定义缓动函数的信息，请查看this other Stack Overflow answer。

var horseSpeeds = [
  [0, 1, 3, 4, 5, 4, 4, 5, 3, 2, 8, 9, 8, 4, 3, 2, 1, 0],
  [4, 4, 2, 1, 1, 1, 4, 9, 9, 9, 8, 6, 5, 4, 3, 2, 5, 6],
  [2, 3, 4, 5, 5, 5, 5, 6, 7, 8, 7, 4, 5, 1, 2, 4, 5, 8]
];

var $horses = $("div");
var raceStepNum = 0;
var dist = [0, 0, 0];

var moveHorses = function moveHorses() {
  $horses.each(function(horseNum, horse) {
    dist[horseNum] += (horseSpeeds[horseNum][raceStepNum]) * 4;
    $(horse).animate({
      marginLeft: dist[horseNum]
    }, 100, "linear", function() {
      if (horseNum === 0) {
        raceStepNum += 1;
        if (raceStepNum < horseSpeeds[0].length) {
          moveHorses();
        }
      }
    });
  });
}

$("button#startRace").click(moveHorses);
$("button#resetRace").click(function() {
  $("div").css({marginLeft: 0});
  dist = [0, 0, 0];
  raceStepNum = 0;
});

div {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}
#horse0 {
  background-color: blue;
}
#horse1 {
  background-color: red;
}
#horse2 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="startRace">Start race</button><button id="resetRace">Reset race</button>
<div id="horse0"></div>
<div id="horse1"></div>
<div id="horse2"></div>