Question

我有两个关于多个文本动画的问题：是否可以通过这种方式为Text设置动画：

我在After Effects中准备了Example。

首先我的问题：我只想让文字出现。它不应该在之后消失。

当文字通过滚动显示在屏幕上时，如何启动动画？ - ＆GT;在滚动

我在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。

＆＃13;

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
});

＆＃13;

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); }

＆＃13;

<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>

＆＃13;

复杂的文字动画字母

1 个答案: