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的值，返回值将用于该属性，请检查Value Functions

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

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>

使用Velocity.js对每个循环进行随机值

1 个答案: