Question

我已经搜索了一段时间，我似乎无法找到我需要的东西。我知道你可以自定义缓和，但我不知道怎么做。我正在进行赛马比赛（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]

此处的数字代表元素的速度（速度）。我已经看过一个特殊的插件用于缓和，但没有像我想要的那样宽松。

感谢任何帮助。谢谢， Nedas

Answer 1

我在下面提供了一个示例，展示了如何使用jQuery的animate函数来实现＆＃34;竞赛＆＃34;三匹马＆＃34;使用您提供的数据。但是，这是使用标准＆＃34;线性＆＃34; jQuery提供的缓动函数，每个＆＃34; horse＆＃34;多次调用animate函数。

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

您必须为三匹马中的每一匹编码不同的硬编码缓动函数，因为缓动函数无法编程以获取输入参数，即速度参数。
缓动函数不能存储在数组中，因此您无法调用myEasingFunction [0]，myEasingFunction [1]等，但必须使用单个函数，例如： myEasingFunction0，myEasingFunction1等。这不是很灵活。
因为你只想要一匹马来赢得＃34;你必须做出一个丑陋的选择：（1）你的三个自定义缓和功能中的两个不能达到总数的100％＆＃34 ;种族＆＃34;距离，或（2）必须为每匹马单独提供不同的最终距离，这会破坏创建自定义缓和功能的目的，即必须将某种形式的数据放在两个不同的地方。

在任何情况下，如果您想了解有关创建自定义缓动功能的一些信息，请查看this other Stack Overflow answer。

＆＃13;

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;
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

随机JQuery的.animate缓动

1 个答案: