如何使用动漫js创建具有打字机效果的文本动画？

Question

您好，我正在尝试使用 anime js 创建不同的动画，现在我想使用anime.js 创建带有打字机效果的文本动画，就像这里的demo live。

这是我目前所拥有的。

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： type writer effect。

根据我上面提供的示例，我需要添加什么才能获得我想要的结果。？

Answer 1

这个打字动画最难的部分是光标的偏移量计算，可以通过对单词的每个字母使用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>

Answer 2

我推荐你使用Typed.js..因为它非常好用...这里是用Typed.js做的例子...

这是我的例子……

var typed = new Typed('#text', {
    strings: ["First String..!","Second String..!","Third String..!","Third Word..!"],
    typeSpeed: 120,
    backSpeed: 80,
    loop: true
 });

body{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
.container{
  background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
  width:100vw;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
h2{
  text-align:center;
  color:white;
}

<!--Typed.js CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js"></script>

<!--Body-->
<div class="container">
  <h2 id="text"></h2>
</div>

---