Question

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

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

区别是，一旦淡出和结束动画完成，我就需要更改内容并将其替换为新的内容。

我已经尝试使用anime js's complete函数来更改文本。

看看代码。

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>

动画首先会终止。我哪里出问题了？

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的问题（完整功能）

1 个答案: