如何在特定时间告诉某些事件/动画?
我正在尝试在几个角色之间制作一个动画的战斗场景,那么最好的方法是编写他们的行为,例如谁下次攻击等等?
这是我的沙箱,你可以看到2个左侧假人向右侧的假人移动:
http://vilegaming.com/sandbox.x
在他们袭击他之后,我怎么能做出正确的假人攻击左边的一个假人?
我认为我真正想要的是如何根据时间设置事件安排,因为并非所有的攻击/动画都会在彼此之后完成.
解决方法
鉴于您正在寻找的复杂动画行为,我肯定会限制猖獗的回调和超时.
我会做这样的事情:
// 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,speed) { return function () { doAttack(side,speed); }; } var animation_script = [ { at_time: 5 * 1000,animation: attackAnimation('left',2000) } ];