Question

我正在创造一种打鼹鼠式的游戏，其中给出了一个总和，并且从容器的底部到顶部的数字是动画的。游戏的目的是点击总和的正确答案并收集尽可能多的正确答案。

我还添加了一些额外的图标，让游戏更有趣。其中一个图标是火焰，可以加速动画5秒钟。

此刻它让所有图标一下子移动得非常快。而不是发生这种情况，我希望流程像往常一样继续，但速度更快。

这是我到目前为止所拥有的......

$(".character").click(clickThrottled(function () {
    if ($(this).hasClass("heat")) {
        $(this).effect("explode", 400);
        $("#container").children().css('top', '400px').fadeIn(1000).animate({
            'top': '-100px'
        }, 3000).fadeOut(1000);
    }
}));

有人能告诉我出错的地方吗？查看演示并单击火焰图标以更好地了解问题。

小提琴：http://jsfiddle.net/pUwKb/52/

Answer 1

Easing将使所有元素同时轻松到达顶部，但是以时尚的方式（就像它们在最后减速一样。）

你真正需要做的是保持一个名为'isFlameOn'或'speedModifier'的标志会更好。单击火焰图标时，将'speedModifier'设置为等于2或3，这将使速度提高正常速度的两倍或三倍。

删除它：

$("#container").children().css('top', '400px').fadeIn(1000).animate({
        'top': '-100px'
}, 3000).fadeOut(1000);

因为您将单独更改对象的速度。

现在转到管理每个图标的任何地方（移动它们）而不是说：item [i] .y - = item [i] .speed;

项目[i] .y - = item [i] .speed * speedModifier;

如果你让它们动画到达顶部，那么你需要跟踪每个动画间隔并重置它们。因此，如果您创建一个项目然后.animate它，您将需要删除该.animate效果并使用补偿的speedModifier百分比创建一个新的.animate效果。如果你逐帧完成，你将有一个轻松的一天：）。

当您希望火焰效果耗尽时，只需将speedModifier设置为1.如果您为每个项目设置了动画，则需要再次删除当前的.animate并以正常速度替换它。请务必跟踪每个项目的随机速度，以便在效果消失后将其速度重置为原始速度。

Answer 2

查看jQuery UI提供的不同easings，他们应该解决您的问题。要使用它们，只需设置animate的属性缓动（如果您需要更高级的缓存，还应该包含jQuery UI）。

要进一步自定义，您可以使用step的{{1}}回调。

控制动画

2 个答案: