随机平滑地移动背景图像

Question

我有一个固定的背景图像附加到body标签,图像是2048px乘2048px并且是顶部居中:

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');
}

编辑:更好地描述我想做的事情的小提琴: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>