jQuery - 事件/动画时间线

Question

我如何告诉某些事件/动画在特定时间触发？

我正在尝试制作几个角色之间的动画战斗场景，那么编写他们的 Action (例如谁接下来攻击等等)的最佳方法是什么？

这是我的沙箱，您可以在其中看到左侧的 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);
}

使用此功能，您可以定义动画，而无需使用困惑的回调、超时和间隔 - 而是专注于动画脚本和原子动画构建 block 。

评论后编辑:

请注意，动画脚本中的函数名称(例如 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)
    }
];