jquery - 随机平滑地移动背景图像

Question

我在 body 标签上附加了一个固定的背景图像，该图像的大小为 2048 像素 x 2048 像素，并且位于顶部居中:

body {
   background: url(images/background.jpg) 50% 0% no-repeat fixed;
}

我想向背景添加一些运动，以便在查看者浏览网站时它会平移整个图像

使用:https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js为了标准化背景位置属性，我可以按如下方式对图像进行动画处理:

$('body').animate({
    backgroundPositionX: '100%',
    backgroundPositionY: '100%'
}, 10000, 'linear');

我不想在 10 秒内转到右下角，而是想添加随机移动。

使用设置的时间间隔，我可以每 10 秒为图像设置动画，但如何确定背景位置百分比？当图像移动时，它应该具有相同的速度，只是随机位置

var currX = 50;
var currY = 0;

$(function () {
    animate();

    window.setInterval(animate(), 10000);
});

function animate() {
    var newPosX = currX - (Math.random() * 50);
    var newPosY = currY - (Math.random() * 50);

    $('body').animate({
        backgroundPositionX: newPosX + '%',
        backgroundPositionY: newPosY + '%'
    }, 10000, 'linear');
}

编辑:更好地描述我想做的事情的 fiddle :http://jsfiddle.net/97w7f3c8/4/

Answer 1

只是一个如何完成此操作的示例。通过随机角度选择随机方向，然后检查目的地是否超出 0 到 100 的范围(可能没有必要)

$(function() {
     var p = [0, 0], speed = 10, runMe = function () {
        var angle = Math.random() * 2 * Math.PI;
        var d = [
            speed * Math.cos(angle), 
            speed * Math.sin(angle)
        ];

        for (var i = 0; i < 2; i++)
           p[i] = (p[i] + d[i] > 100 || p[i] + d[i] < 0) ? p[i] - d[i] : p[i] + d[i];

        $('body').animate({
            backgroundPositionX: p[0] + '%',
            backgroundPositionY: p[1] + '%'
        }, 5000, 'linear', runMe);
     };
    
     runMe();
});

body {
 background: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js">
</script>