我如何实现 for 循环以使用 anime.js 进行动画处理

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 函数，其中 return 当前元素及其在所有元素（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>

我如何实现 for 循环以使用 anime.js 进行动画处理

How can i implement a for loop to animate using anime.js

javascript

jquery

anime.js