动漫js问题（完整功能）

Question

我正在尝试复制 link 中提到的动画。

http://tobiasahlin.com/moving-letters/#13

区别在于，淡出和结束动画完成后，我需要更改内容并用新内容替换它。

我已经尝试使用 anime js's 完整功能来更改文本。

看看代码。

var styleindex = 0;
       var stylearray = ["SEO","SMM"];
       function eachletter(){
        $('.l1').each(function(){
              $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
          });
          }
          eachletter();
          anime.timeline({loop: true})
              .add({
              targets: '.l1 .letter',
              translateY: [100,0],
              translateZ: 0,
              opacity: [0,1],
              easing: "easeOutExpo",
              duration: 1400,
              delay: function(el, i) {
                  return 300 + 30 * i;
              }
          }).add({
              targets: '.l1 .letter',
              translateY: [0,-100],
              opacity: [1,0],
              easing: "easeInExpo",
              duration: 1200,
              delay: function(el, i) {
                  return 100 + 30 * i;
              },
               complete: function(anim) {
                   $(".l1").text(stylearray[styleindex]);
                    eachletter();
                   styleindex ++;
              }
          });

.loader {
    width:100vw;
    height:100vh;
    background-color:#262626;
    position: fixed;
    left:0;
    top:0;
    z-index:1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.l1 {
    color:rgba(255,255,255,0.1);
    font-size:9vw
}
.l1 > .letter {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="loader">
            <h1 class="l1">WEB DEVELOPMENT</h1>
       </div>

动画在 first 后终止。我哪里错了？

Answer 1

我想当动漫的complete事件触发时，eachletter()函数会立即替换文本，所以问题就出现了。

我关闭了动漫的循环并将其包装到新函数do_animate()中，然后在eachletter()中调用它似乎工作正常。

var styleindex = 0;
var stylearray = ["SEO","SMM", "WEB DEVELOPMENT"];

function eachletter() {
 $('.l1').each(function() {
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
 });
 do_animate();
}

eachletter();

function do_animate() {

 anime.timeline({ loop: false })
  .add({
   targets: '.l1 .letter',
   translateY: [100,0],
   translateZ: 0,
   opacity: [0,1],
   easing: "easeOutExpo",
   duration: 1400,
   delay: function(el, i) {
   return 300 + 30 * i;
  }
  }).add({
   targets: '.l1 .letter',
   translateY: [0,-100],
   opacity: [1,0],
   easing: "easeInExpo",
   duration: 1200,
   delay: function(el, i) {
   return 100 + 30 * i;
  },
  complete: function(anim) {

   $(".l1").text(stylearray[styleindex]);

   styleindex ++;
   if (styleindex >= stylearray.length) {
    styleindex = 0;
   }
   eachletter();

  }
 });

}

.loader {
    width:100vw;
    height:100vh;
    background-color:#262626;
    position: fixed;
    left:0;
    top:0;
    z-index:1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.l1 {
    color:rgba(255,255,255,0.1);
    font-size:9vw
}
.l1 > .letter {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="loader">
            <h1 class="l1">WEB DEVELOPMENT</h1>
       </div>

动漫js问题（完整功能）

Issue with anime js ( Complete Function )

javascript

jquery

html

css

anime.js