получить случайную анимацию совершенно случайно

0

Я создал анимацию случайных рыб, но в какой-то момент (около 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);
    });

});
  • 3
    Работает нормально для меня ... происходит совершенно случайно даже через 10 секунд.
  • 0
    @putvande за исключением того, что они идут в левую область и остаются там
Показать ещё 5 комментариев
Теги:
animation
random

1 ответ

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 в переменных, а не вызов функции $ каждый раз.

  • 0
    это почти идеально! Большое спасибо, как вы видите здесь: jsfiddle.net/832Fx/3 Рыбы теперь проходят дно аквариумов, мне не удалось исправить это, вы можете помочь в прошлый раз, плз?
  • 0
    Вычисленная позиция - верх рыбы. Вы должны принять во внимание высоту рыбы. Сделайте это с помощью var h = $(obj).height(); а затем в newCoords : top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + h + 1) + animeVars.bottomMargin - h (как в моем ответе)
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню