动漫js问题（完整功能）

Question

我正在尝试复制此链接中提到的动画。

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>