得到一个完全随机的随机动画

Question

我已经创建了一个随机的鱼动画，但是从一开始的某个时间点（大约 10 秒），我的鱼就靠在右边，我希望它们在整个区域内保持随机移动，知道吗？

这里是小提琴链接：http://jsfiddle.net/832Fx/1/

jquery 代码：

$.fn.rotate = function (degrees) {
    var self = $(this);
    self.transition({
        rotateY: degrees + 'deg'
    }, 5000);
};

var animeVars = {
    maxPixelsPerSecond: 50,
    minPixelsPerSecond: 10,
    topMargin: 0,
    bottomMargin: 400,
    leftMargin: 0,
    rightMargin: 400
};

function topFlip(obj) {
    var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
    $(obj).find('.top_fin, .top_fins').transition({
        rotate: '+=25deg',
        x: '+=10'
    }, speed, function () {
        $(obj).find('.top_fin, .top_fins').transition({
            rotate: '-=25deg',
            x: '-=10'
        }, speed, function () {
            topFlip(obj);
        });
    });
}

function tailFlip(obj) {
    var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
    $(obj).find('.tail_fin, .tail_fins').transition({
        rotateX: '-=25deg'
    }, speed, function () {
        $(obj).find('.tail_fin, .tail_fins').transition({
            rotateX: '+=25deg'
        }, speed, function () {
            tailFlip(obj);
        });
    });
}

function animateFish(obj) {
    var heading = $(obj).data('heading');
    if (!heading) heading = 'left';
    var rotation = 0;
    var currentCoords = {
        top: parseInt($(obj).css('top').replace(/[^-\d\.]/g, ''), 10),
        left: parseInt($(obj).css('left').replace(/[^-\d\.]/g, ''), 10)
    };
    var newCoords = {
        top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + 1) + animeVars.bottomMargin,
        left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + 1) + animeVars.rightMargin
    };
    if (currentCoords.left < newCoords.left && heading != 'right') {
        $(obj).rotate(180);
        $(obj).data('heading', 'right');
        console.log('swimming right');
    } else if (currentCoords.left > newCoords.left && heading != 'left') {
        $(obj).rotate(0);
        $(obj).data('heading', 'left');
        console.log('swimming left');
    }

    var totalMovement = Math.sqrt(Math.pow(currentCoords.left - newCoords.left, 2) + Math.pow(currentCoords.top - newCoords.top, 2));
    console.log('Total pixels to move: ' + totalMovement);
    var pps = Math.floor(Math.random() * (animeVars.maxPixelsPerSecond - animeVars.maxPixelsPerSecond)) + animeVars.maxPixelsPerSecond;
    var speed = totalMovement / pps * 1000;

    $(obj).data('speed', speed);
    $(obj).animate({
        top: newCoords.top,
        left: newCoords.left
    }, speed, function () {
        animateFish(obj);
    });
}

$(document).ready(function () {

    $('.loop ').each(function () {
        animateFish(this);
        topFlip(this);
        tailFlip(this);
    });

});

Answer 1

我将如何解决这个问题：http://jsfiddle.net/BaliBalo/832Fx/2/

我刚刚加了

var $wnd = $(window);
$wnd.resize(function() {
    animeVars.rightMargin = $wnd.width();
    animeVars.bottomMargin = $wnd.height();
}).resize();

在您的代码末尾，并稍微更改了算法以考虑鱼的大小：

var w = $(obj).width();
var h = $(obj).height();
var newCoords = {
    top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + h + 1) + animeVars.bottomMargin - h,
    left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + w + 1) + animeVars.rightMargin - w
};

但是，请注意可以进行许多优化，例如将 jQuery 对象缓存在变量中，而不是每次都调用 $ 函数。