Блог

Главная - Вопросы по программированию - Удалять каждую букву перед передачей следующего индекса массива?

Удалять каждую букву перед передачей следующего индекса массива?

#javascript #css #arrays #if-statement #iteration

#javascript #css #массивы #if-оператор #итерация

Вопрос:

Я писал этот небольшой скрипт, чтобы создать анимацию «самописного текста». Дело в том, что каждый раз, когда слово заканчивается, оно переходит прямо к следующему. Я не могу разобраться в этом, чтобы сделать так, чтобы каждая буква удалялась перед передачей следующего слова в массиве.

 const text = ['design', 'make', 'develop', 'code', 'create']
let count = 0;
let index = 0;
let currentText = "";
let letter = "";

(function type() {
    if (count === text.length) {
        count = 0;
    }
    currentText = text[count];
    letter = currentText.slice(0,   index);
    
    document.querySelector(".main__animation").textContent = letter;
    if (letter.length === currentText.length) {
        count  
        index = 0;
    }
    setTimeout(type, 500);
}())

Заранее спасибо!

Комментарии:

1. «сделайте так, чтобы каждая буква удалялась перед передачей следующего слова в массиве» Что это значит? Когда слово заканчивается, вы хотите анимировать удаление каждой буквы перед отображением следующего слова? Если да, вы хотите удалить слева направо или справа налево?

Ответ №1:

 const text = [, 'design', 'make', 'develop', 'code', 'create']
let count = 1;
let index = 0;
let currentText = "";
let letter = "";
var deleting = false;

(function type() {
  if (count === text.length) {
    count = 1;
  }
  currentText = text[count];

  if (deleting) {
    letter = currentText.slice(0, --index);
  } else {
    letter = currentText.slice(0,   index);
  }

  document.querySelector(".main-animation").textContent = letter;
  if (letter.length === currentText.length) {
    deleting = true;
  }
  if (letter.length === 0) {
    count  ;
    index = 0;
    deleting = false;
  }
  setTimeout(type, 500);
}()) 
 <div class="main-animation"></div>

Ответ №2:

Это то, что я придумал. Пожалуйста, дайте мне знать, если есть какие-либо сомнения.

 function createAnimation(words, target, speed) {
  let wordIndex = 0;
  let i = 0;
  let erase = false;
  
  const handler = () => {
    const word = words[wordIndex];
    
    if (erase) {
        target.innerText = target.innerText.slice(0, -1);
        
        if (!target.innerText.length) {
            wordIndex = (wordIndex   1) % words.length;
            i = 0;
            erase = false;
        }
    } else {
        target.innerText  = word.charAt(i);
        i  ;
        
        if (i === word.length) {
            erase = true;
        }
    }
  };
  
  let interval = null;
  
  return {
      start() {
          interval = setInterval(handler, 1000 / speed)
      },
      stop() {
          clearInterval(interval);
      }
  }
}

const animation = createAnimation(
  ['design', 'make', 'develop', 'code', 'create'],
  document.getElementById('target'),
  5 // [letters/s]
);

animation.start();

// TO STOP, CALL animation.stop() 
 <h1 id='target'></h1>