c# - 编程 float 运动

Question

有人知道实现随机 float 运动的方法吗？比如，在受限区域中进行一般的平滑漂移。

这是我尝试过的:

var rangeX = 100;
var rangeY = 100;
var gravity = .001;

$('.floating').each(function() {
    $(this).data('startX', $(this).position().left);
    $(this).data('startY', $(this).position().top);
    $(this).data('velocityX', 0);
    $(this).data('velocityY', 0);
    chooseDestination();
});

setInterval(function() {
    $('.floating').each(function() {
        var changeX = ($(this).data('destinationX') - $(this).position().left) * gravity;
        var changeY = ($(this).data('destinationY') - $(this).position().top) * gravity;

        var velocityX = $(this).data('velocityX') + changeX;
        var velocityY = $(this).data('velocityY') + changeY;

        $(this).data('velocityX', velocityX);
        $(this).data('velocityY', velocityY);

        $(this).css('left', $(this).position().left + velocityX);
        $(this).css('top', $(this).position().top + velocityY);
    });
}, 10);

setInterval(chooseDestination, 2000);

function chooseDestination() {
    $('.floating').each(function() {
        $(this).data('destinationX', $(this).data('startX') - rangeX/2 + Math.random() * rangeX);
        $(this).data('destinationY', $(this).data('startY') - rangeY/2 + Math.random() * rangeY);
    });
}

虽然看起来真的不是很飘。

Answer 1

“ float ”通常需要缓慢的速度变化。从高层次的 Angular 来看，我要做的是为运动建立一个加速度/速度/位置模型，其中您的随机生成器仅影响加速度。你已经有了另外两层。在任何给定的时间点建立速度和加速度的限制(我会限制绝对距离，而不仅仅是 X 和 Y 中的距离)，并且不要更新每帧的加速度。最后，处理速度和加速度的分数值，只有在您绘制对象的新位置时，才会在最后一分钟将其转换为整数位置变化。你最终会得到一个物体，它会慢慢地朝一个方向前进，然后开始朝不同的方向漂移，也许会停下来悬停一秒钟，然后再开始。