Две анимации jQuery на одном элементе в игровом цикле - PullRequest
Новая
       42

Две анимации jQuery на одном элементе в игровом цикле

0 голосов
/ 23 октября 2018

Я пытаюсь позволить элементу 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>
...