我如何使用anime.js实现一个for循环来制作动画

Question

我正在尝试使用 JQuery 和框架 anime.js 为我的页面加载器实现一个 for 循环

    var testimonialElements = $(".loader-animation");
    for(var i=0; i< Elements.length; i++){
        var element = Elements.eq(i);
        //do something with element
    
         var basicTimeline = anime.timeline();
           basicTimeline
      .add({
        targets: element,
        opacity: {
        value: ['1','0'],
        duration: 2000,
        delay: 4000
      },
      letterSpacing: {
        value: ['30px','10px'],
        duration: 2000,
        easing: 'easeInOutSine'
      }
    });
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container on-loader">	
    	<h2 class="loader-animation">Case1</h2>
    <h2 class="loader-animation">Case2</h2>
    <h2 class="loader-animation">Case3</h2>
    <h2 class="loader-animation">Case4</h2>
    </div>

问题是，脚本没有循环并为每个循环启动动画。

非常抱歉，如果问题很简单，我是 javascript 和anime.js 框架的新手。

Answer 1

没有必要使用循环，首先你将.loader-animation 选择器传递给你的动画，你只需要使用callback 函数，它返回当前元素和所有元素之间的顺序（1 ,2,3. ...) 并将延迟乘以最后一个： （以后你可以玩上延迟秒来甜蜜你的意图）

请参阅下面的工作片段

var basicTimeline = anime.timeline();
basicTimeline.add({
  targets: ".loader-animation",
  opacity: {
    value: ['1', '0'],
    duration: 2000,
    delay: function(el, i) {
      $(el).removeClass("otherclass");
      return 2000 * (i + 1);
    },
  },
  letterSpacing: {
    value: ['30px', '10px'],
    duration: 2000,
    easing: 'easeInOutSine',
    delay: function(el, i) {
      return 2000 * (i);
    }
  }
});

<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.2.0/anime.js"></script>
<div class="container on-loader">
  <h2 class="loader-animation otherclass">Case1</h2>
  <h2 class="loader-animation otherclass">Case2</h2>
  <h2 class="loader-animation otherclass">Case3</h2>
  <h2 class="loader-animation otherclass">Case4</h2>
</div>