使用速度.js随机值每个循环

Question

我目前正在为运动创建一个小游戏，使用Velocity.js。我有一个运动序列，我想循环 5 次，但每次循环启动时，我希望行进的距离是随机的。

这是我目前拥有的，但我知道这些值是在循环运行之前设置的，并且在整个循环中不会更改 - 非常感谢一些帮助，让每个循环随机生成值。

var $horse = $('#horseGame');
$horse.on('click', '#race', function(){
    var $box = $(this).siblings('.box'),
        $distance = 10,
        $timeTaken = 500;
    $distance = Math.floor((Math.random() * 200) + $distance),
    $timeTaken = Math.floor((Math.random() * 2000) + $timeTaken);
    console.log($distance + " + " + $timeTaken);
    var race = [
        {
            elements: $box,
            properties: {
                left: $distance
            },
            options: {
                duration: $timeTaken,
                loop: 5
            }
        }
    ];
    $.Velocity.RunSequence(race);
});

谢谢！

Answer 1

您可以将函数用作 velocityjs 上的值，返回值将用于该属性，请检查值函数

我不确定这是否是您需要的，但它可能会有所帮助

var $box = $('.box');
$box.velocity({
  translateX: function(i, total) {
    return Math.floor(Math.random() * 200) + 200;
  }
}, 2000);

.box {
  width: 50px;
  height: 50px;
  background-color: green;
  margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div class="mainContainer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>