Question

任何人都有一个实现随机浮动运动的方法的好主意？比如，在受限区域内只是一般的平滑漂移。

这就是我的尝试：

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

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

编程Floaty Motion

1 个答案: