逐字的复杂文本动画

Complex Text Animation Letter by Letter

本文关键字：文本 动画 复杂      更新时间：2023-09-26

我有两个关于多个文本动画的问题:是否可以这样设置文本动画:

我在After Effects中准备了一个例子。

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

  • 怎么可能开始动画时，文本出现在屏幕上的滚动?-> on scroll

    • 我在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
});

    非常感谢!

    第一部分问题:

    为了停止循环，您可以删除属性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>

    相关文章：