jQuery - график событий / анимации

Question

Как бы я сказал, чтобы определенные события / анимации запускались в определенное время?

Я пытаюсь создать анимированную сцену боя между несколькими персонажами, так как лучше всего написать сценарий их действий, например, кто атакует дальше и так далее?

Вот моя песочница, где вы можете видеть, как 2 левых манекена движутся к манекену справа: http://vilegaming.com/sandbox.x

Как сделать так, чтобы правый манекен атаковал одного из манекенов слева после того, как они напали на него?

Мне кажется, что я действительно ищу, так это как настроить расписание событий, основанное на времени, потому что не все атаки / анимации будут следовать друг за другом.

Answer 1

Учитывая сложное анимационное поведение, которое вы ищете, я бы определенно ограничил необузданные обратные вызовы и тайм-ауты.

Я бы сделал что-то вроде этого:

// first define the atomic animation effects

function first_figure_moves_towards_second_figure() {
    // animation calls
}

function first_figure_attacks() {
    // animation calls
}

function second_figure_blocks_attack() {
    // animation calls
}


var animation_script = [
    {
         at_time: 30 * 1000, // 30 seconds
         animation: first_figure_moves_towards_second_figure
    },
    {
         at_time: 31 * 1000, // 31 seconds
         animation: first_figure_attacks
    },
    {
         at_time: 32 * 1000, // 32 seconds
         animation: second_figure_blocks_attack
    }
];

Затем создайте основную функцию с управлением сценарием анимации, например:

var current_time = 0;

function animate_next() {
    var next = animation_script.shift(),
        time_between = next.at_time - current_time;
    setTimeout(function () {
        current_time = next.at_time;
        next.animation();
        animate_next();
    }, time_between);
}

С помощью этого вы можете определить свою анимацию без перемешивания обратных вызовов, тайм-аутов и интервалов - и вместо этого сосредоточиться на сценарии анимации и строительных элементах атомарной анимации.

Редактировать после комментариев:

Обратите внимание, что имена функций в сценарии анимации (например, first_figure_attacks) являются ссылками на функции - сохраняются для последующего выполнения. Добавление параметров сделает их вызовами функций - их выполнение немедленно.

Вы можете использовать анонимные функции для добавления таких параметров:

var animation_script = [
    {
        at_time: 5 * 1000,
        animation: function () { doAttack('left', '#char1', '#char2', 2000); }
    }
];

или, может быть, более эстетически, вы можете заключить doAttack, чтобы вернуть ссылку на функцию, например:

function doAttack(side, c1x, c2x, speed) {
    // animation calls
}

function attackAnimation(side, c1x, c2x, speed) {
    return function () {
        doAttack(side, c1x, c2x, speed);
    };
}

var animation_script = [
    {
        at_time: 5 * 1000,
        animation: attackAnimation('left', '#char1', '#char2', 2000)
    }
];

Answer 2

Посмотрите на комбинацию обратных вызовов и setTimeout. Как правило, после завершения одной атаки вы можете вызвать обратный вызов, который вызовет функцию, которая будет срабатывать через x миллисекунд. Но имейте в виду, что у вас есть только один поток, с которым можно играть, поэтому время будет приблизительным в зависимости от того, что еще происходит. 1001 *

Для более сложных последовательностей вам нужно будет создать некую форму очереди событий (по сути, массив, который вы перемещаете и извлекаете объекты событий). Объект события, который вы добавляете в массив, может определять событие, его время ожидания, обратный вызов и обратный вызов. тайм-аут.

//invoke attack
attack( callbackEvent );

function attack( callbackFn ){

   //attack code

   //invoke callback
   callbackFn && callbackFn()
}

function callbackEvent(){

   //next attack in 5 seconds
   window.setTimeout( function(){
         attack(callbackEvent);
   }, 5000);

}

Answer 3

вам нужно только сделать это

// delay 5000 means after 5 sec
$("#mydiv").delay(5000).animate({"left":160},1000);