javascript - 逐个字母的复杂文本动画

Question

我有两个关于多个文本动画的问题: 是否可以通过这种方式为文本添加动画:

我准备了一个Example在 After Effects 中。

首先我的问题: 1.我只想让文本出现。之后它不应该消失。

当文本通过滚动出现在屏幕上时如何启动动画？ -> 滚动

我在 Codepen 上找到的这段代码:DEMO

HTML:

    <div class="name">

  <div class="letter">e</div>
  <div class="letter">x</div>
  <div class="letter">a</div>
  <div class="letter">m</div>
  <div class="letter">p</div>
  <div class="letter">l</div>
  <div class="letter">e</div>

</div>

CS:

body {
  min-height:100%;
  height:auto;
    font-family:"Unica One";
    font-size: 4rem;
  color:#fff;
  background:#000;
  display:flex;
  .name {
    display:flex;
    margin:auto;
    padding:0 1rem 1rem;
    position: relative;

    .letter {
      display:inline-block;
      opacity:0;
      transform:scale(0.9);
    }
  }
}

JS:

var opac = anime({
  targets: '.letter',
    opacity:1,
  scale:1,
    easing:'easeInBounce',
    delay: function(el, index) {
      return index * 80;
    },
  direction: 'alternate',
  loop: true
});

非常感谢!!!

Answer 1

问题第 1 部分:

为了停止循环，您可以删除属性direction和loop。

var opac = anime({
    targets: '.letter',
    opacity: 1,
    scale: 1,
    easing: 'easeInBounce',
    delay: function(el, index) {
        return index * 80;
    },
    // direction: 'alternate', // stop vanishing
    // loop: true              // prevent looping
});

html { height:100%; }
body { min-height:100%; height:auto; font-family:"Unica One"; font-size: 4rem; color:#fff; background:#000; display:flex; }
.name { display:flex; margin:auto; padding:0 1rem 1rem; position: relative; }
.letter { display:inline-block; opacity:0; transform:scale(0.9); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js"></script>
<div class="name">
  <div class="letter">e</div>
  <div class="letter">x</div>
  <div class="letter">a</div>
  <div class="letter">m</div>
  <div class="letter">p</div>
  <div class="letter">l</div>
  <div class="letter">e</div>
</div>