0

有人尝试管理常见的动画队列吗？

我想在后端编程中获得像生产者/消费者这样的东西，这样任何触发某些动画的事件都可以将其所需的动画添加到一般队列中，该队列像链一样不断地被处理。

我找不到问题所在。当我记录执行时，它的顺序是正确的，但是当我快速触发几个动画时，JS 完全混淆了我的动画任务链。

我在jsFiddle上编译了一些示例。我有一个绝对定位的“.anim”块的简单结构，这些块由“左”位置动画：

<div id="anims_wrap">
    <div class="anim even" id="anim0">0</div>
    <div class="anim odd" id="anim1">1</div>
    <div class="anim even" id="anim2">2</div>
    <div class="anim odd" id="anim3">3</div>
    <div class="anim even" id="anim4">4</div>
    <div class="anim odd" id="anim5">5</div>
    <div class="anim even" id="anim6">6</div>
    <div class="anim odd" id="anim7">7</div>
    <div class="anim even" id="anim8">8</div>
    <div class="anim odd" id="anim9">9</div>
</div>

下面的基本方法是在队列中添加一个退出最后一个动画块的函数，并为大约 3 个块运行新的动画片段。仅当每个动画完成时才调用链。自己的动画队列设置为 false。

function queueAnimation(animId) {//animId is between 1 & 5, sent by the button triggering the animation..

    var animWrap = $("#anims_wrap");
    var animId1 = animId - 1;
    var animId2 = animId + 2;
    var animId3 = animId === 5 ? 0 : animId + 5;


    animWrap.queue("anims_queue", function (next) {
        exitPositionedAnimation(function () {

            $("#anim" + animId1).addClass("positioned").animate({
                left: 50
            }, {
                duration: 4000,
                queue: false
            });
            $("#anim" + animId2).addClass("positioned").animate({
                left: 150
            }, {
                duration: 6000,
                queue: false,
                complete: next
            });
            $("#anim" + animId3).addClass("positioned").animate({
                left: 200
            }, {
                duration: 5000,
                queue: false
            });

            console.log(animId1 + "," + animId2 + "," + animId3)
        });
    });

    //the only way I found to check if animation is in process..
    if (!$._data(animWrap[0], "anims_queue.run")) {
        animWrap.dequeue("anims_queue");
    }
}

我尽可能地简化了代码，以保持原则的实施。只需尝试 快速按下几个动画按钮，您就会看到混乱。

也许我真的对 JavaScript 期望太高了 :)

4

1 回答 1

1

似乎我找到了问题......现在看起来正常工作了！

我的错误是依靠缓存的 jquery 内部数据来检查队列是否正在运行：

if (!$._data(animWrap[0], "anims_queue.run")) {
    animWrap.dequeue("anims_queue");
}

这个缓存被快速删除，新的动画事件在动画实际运行时重复“出队”调用。

在这里你可以看到更新的版本。现在我维护“isQueueRunning”变量，该变量被“lastQueueFunction”设置为false，我始终将其保留在链的末尾。

希望有人会觉得这很有帮助.. :)

于 2013-07-12T16:17:30.340 回答