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毫秒之后触发。但请记住，你只有一个线程要玩，因此时间取决于其他正在播放的内容。 / p>

对于更复杂的序列，您需要构建某种形式的事件队列（本质上是一个推送和弹出事件对象的数组）。添加到数组的事件对象可以定义事件，超时，回调和回调超时。

//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);

jQuery - 事件/动画时间轴

3 个答案:

评论后编辑：