Анимация терминала не работает (отображаются только первые два элемента в массиве) - PullRequest
Новая
       68

Анимация терминала не работает (отображаются только первые два элемента в массиве)

0 голосов
/ 10 марта 2020

Я пытаюсь создать терминальную анимацию для CLI о еде. Пока выполняется один из моих запросов, я хотел запустить анимацию загрузки, пока обещание не будет выполнено. Анимация состоит из двух массивов, один из которых представляет человека, открывающего и закрывающего рот, а другой представляет собой «сэндвич» (набор знаков равенства), который нужно съесть. См. Ниже. 

var face = [":D", ":|"];
var sandwich = ['======', '=====', '====', '===', '==', '='];

Я использую setInterval для увеличения значений x и y (которые представляют индексы своих соответствующих массивов), пока они не достигнут порогового значения. Для face это пороговое значение равно 1 (поскольку первый индекс равен 0), а для sandwich оно равно 5.

То, что я хочу получить, - это при увеличении значений x / y следующий элемент в их соответствующие массивы записываются на консоль. См. Приведенный ниже код. 

const muncher = () =>{
    var face = [":D", ":|"];
    var sandwich = ['======', '=====', '====', '===', '==', '='];
    var x = 0;
    var y = 0;
    return setInterval(() => {
        process.stdout.write("\r" + face[x++] + sandwich[y++]);
        x &= 1;
        y &= 5;
    }, 250);
};

Если y равно 5 и x равно 1, они должны go вернуться к 0 и снова начать приращение. Вместо того, чтобы бутерброд становился все меньше и меньше с каждым разом (====== ... ===== ... ==== ... et c), но кажется, что оба массива просто переключаются между первым и вторым элементом. Для sandwich это выглядит так: ====== и =====. Я также попытался сделать массивы одинаковой длины и иметь одинаковые числа x и y, но они все еще не работают.

Моя проблема возникает в узле, но я адаптировал ее к браузеру JS во фрагменте, чтобы лучше проиллюстрировать мою проблему. 

var targ = document.getElementById('muncher');
const muncher = () => {
    var face = [":D", ":|"];
    //also tried var face = [":D", ":|", ":/", ":o", ":D", ":|"];
    var sandwich = ['======', '=====', '====', '===', '==', '='];
    var x = 0;
    var y = 0;
    return setInterval(() => {
        targ.innerText = "\r" + face[x++] + sandwich[y++];
        x &= 1;
        // also tried x&= 5 when face is the same length as sandwich
        y &= 5;
    }, 250);
};

muncher()
<div id='muncher'>
</div>

1 Ответ

1 голос
/ 10 марта 2020

Полагаю, ваша проблема - побитовый оператор, который изменяет значения x и y на 0 и 1 соответственно. Примерно так должно работать 

var targ = document.getElementById('muncher');
const muncher = () => {
    var face = [":D", ":|"];
    //also tried var face = [":D", ":|", ":/", ":o", ":D", ":|"];
    var sandwich = ['======', '=====', '====', '===', '==', '='];
    var x = 0;
    var y = 0;
    return setInterval(() => {
        targ.innerText = "\r" + face[x++] + sandwich[y++];
        x = x > 1 ? 0 : x;
        y = y > 5 ? 0 : y;
    }, 250);
};

muncher()
<div id="muncher"/>
...