Как создать текстовую анимацию с эффектами машинки с помощью аниме js? - PullRequest
Новая
       261

Как создать текстовую анимацию с эффектами машинки с помощью аниме js?

0 голосов
/ 07 августа 2020

Привет, я пытаюсь создать другую анимацию с помощью аниме js, теперь я хотел бы создать текстовую анимацию с помощью эффекта пишущей машинки с использованием аниме. js, как здесь демо вживую .

Вот что у меня есть.

HTML: 

<div class="text-animation">
  Welcome to codingflag
</div>

css: 

body {
  margin:0px;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222;
}
.text-animation {
  color:#f5f5f5;
  font-size:50px;
  font-family:"Passion One",sans-serif;
  letter-spacing:1px;
}
.text-animation .letter {
  display:inline-block;
}

Вот js. 

var element = document.getElementsByClassName("text-animation")[0];
element.innerHTML = element.textContent.replace(/\S/g,'<span class="letter">$&</span>');
anime.timeline({loop:true})
.add({
  targets:'.text-animation .letter',
  scale:[3,1],
  opacity:[0,1],
  translateZ:0,
  duration:1000,
  easing:"easeOutExpo",
  delay:(elem, index) => index*70
})
.add({
  targets:'.text-animation',
  opacity:0,
  duration:1000,
  delay:1000,
  easing:"easeOutExpo"
})

Вот мой CODPEN: типографский эффект .

Что мне нужно добавить, чтобы получить результат, который я хочу, в соответствии с образцом, который я предоставил выше.

1 Ответ

1 голос
/ 13 августа 2020

Самая сложная часть этой анимации набора текста - это вычисление смещения для курсора, которое можно легко сделать, используя комбинацию HTMLElement.offsetLeft и HTMLElement.offsetWidth для каждой буквы слова. 

const element = document.querySelector('.text-animation');
  const lettersHtml = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
  element.innerHTML = `<div class="letters">${lettersHtml}</div><span class="cursor"></span>`;
  element.style.display = 'block';

  const letters = Array.from(element.querySelectorAll('.letter'));
  const TYPE_AFTER_MS = 3_000;
  const JUMP_AFTER_MS = 250;

  const blink = anime({
    targets: '.text-animation .cursor',
    loop: true,
    duration: 750,
    opacity: [
      {value: [1, 1]},
      {value: [0, 0]}
    ],
  });

  anime.timeline({loop: true})
    .add({
      targets: '.text-animation .cursor',
      translateX: letters.map((letter, i) =>
        ({value: letter.offsetLeft + letter.offsetWidth, duration: 1, delay: i === 0 ? 0 : JUMP_AFTER_MS}))
    }, TYPE_AFTER_MS)
    .add({
      targets: '.text-animation .letter',
      opacity: [0, 1],
      duration: 1,
      delay: anime.stagger(JUMP_AFTER_MS),
      changeBegin: () => {
        blink.reset();
        blink.pause();
      },
      changeComplete: () => {
        blink.restart();
      }
    }, TYPE_AFTER_MS)
    .add({
      targets: '.text-animation',
      opacity: 0,
      duration: 1000,
      delay: 500,
      easing: 'easeOutExpo',
    });
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

.text-animation {
  display: none;
  position: relative;
  color: #f5f5f5;
  font-size: 50px;
  font-family: "Passion One", sans-serif;
  letter-spacing: 1px;
  line-height: 1;
}

.text-animation .letter {
  display: inline-block;
  opacity: 0;
}

.cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f5f5f5;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-animation">
  Welcome to codingflag
</div>
...