javascript - 游戏循环中一个元素上的两个 jQuery 动画

Question

我试图通过单击一个按钮来让一个 html 元素跳转，而另一个动画正在该元素上运行。如果满足条件（如果生命值很重要则闪烁）或单击按钮（如果喂食则跳跃），动画会在游戏循环中触发。

问题：每次循环重复，动画函数都会被再次调用并放入队列；当健康再次恢复正常时，闪烁不会停止。在动画的回调函数中清除队列仅在它是默认队列（“fx”）时才有效，但我需要几个自定义队列。
使用全局布尔变量来允许或拒绝调用动画函数对我来说不是解决方案，因为我希望 jump() 和 flash() 动画被多个 html 元素使用。

我在learn.jquery.com中阅读了有关排队和在元素上启动第二个队列的信息，还阅读了有关动画和排队的jQuery API 文档，但还没有找到解决方案。

查看 flashAnimation1()，这是预期的结果：队列在回调中清除，因此如果触发停止，元素将停止闪烁。但这仅适用于默认（fx）队列。

letJump1（无队列）和 letJump2（自定义队列）让元素不受控制地上升或缩小。

flashAnimation2() 是一个闪烁的混乱。

你能帮我吗？

let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || windows.msRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

let reqAnimF;

let progress = 0;
let lastRender = 0;
let animationOn = false;

const button = document.getElementById("button");
const state = document.getElementById("state");
const jump = document.getElementById("jump");
const block = $("#fadeInAndOut");

const changeStatus = () => animationOn = !animationOn;

const flashAnimation1 = (element) => { $(function() {
    element.animate( {opacity: 0}, "fast", "linear" )
    .animate( {opacity: 1}, "fast", "linear", ()=> element.clearQueue() );
    })
}

const flashAnimation2 = (element) => { $(function() {
    element.queue("flash", (next)=> {
    element.animate( {opacity: 0}, {
        duration: "fast",
        easing: "linear",
        queue: "flash"
    }).animate( {opacity: 1}, {
            duration: "fast",
            easing: "linear",
            queue: "flash",
            complete: element.clearQueue()
    });
    next();
    }).dequeue("flash");
    });
};

// Jumping: no queue
const letJump1 = (element) => { $(function() {
    element.animate( {width: "+=50", height: "+=20"}, {
        duration: "fast",
        queue: false,
        always: () => {
            element.animate( {width: "-=50", height: "-=20"}, {
                duration: "fast",
                queue: false                        
            });
        }
        }
    );
})};

// Jumping queued to another queue
function letJump2(element) {
    $(function() {
        element.queue("jump", function(next) {
            element.animate({width: "+=50", height: "+=20"}, {
                duration: "fast",
                queue: "jump"
            })
            .animate( {width: "-=50", height: "-=20"}, {
                duration: "fast",
                queue: "jump"
            });
            next();
        }).dequeue("jump");
    })
};


//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

/* function update(progress) {} */

function draw() {
    state.innerHTML = animationOn;
    if (animationOn) {
        flashAnimation2(block);
    }
}

function loop(timestamp) {
    progress = timestamp - lastRender;
    /* update(progress); */
    draw();

    lastRender = timestamp;
    reqAnimF = requestAnimationFrame(loop);
}

button.addEventListener("click", changeStatus);
//jump.addEventListener("click", letJump1(block)); // button is dead for some reason

reqAnimF = requestAnimationFrame(loop);

.center {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    text-align: center;
    border: 1px solid red;
}
button {
    margin: 0 0 20px;
}
#fadeInAndOut {
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: black;
}
#jump {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
    <h1 id="state"></h1>
    <button type="button" id="button">Flash on/off</button>
    <div id="fadeInAndOut"></div>
    <button type="button" id="jump" onclick="letJump1(block)">Jump</button>
</div>

标签： javascriptjquerycssanimationgame-loop