anime.js运行灯动画

Question

我试着做一个动画，应该看起来像“运行灯”。

https://plnkr.co/edit/TiL6DLSLVYxLT63kBXfr?p=preview

正如你在我的柱塞中看到的，第一次运行看起来不错，但是过了一段时间，灯光就不同步了。显然，anime.js再次增加了每次循环迭代的延迟。我怎么才能防止这种情况？

$(document).ready(function() {
    function animateText(container, el) {
        $(container).each(function() {
            var thisContainer = $(this);
            var initialColor = $(this).find(el).css("color");
            var delay = 0;
            $(thisContainer).find(el).each(function() {
                anime({
                    targets: $(this).get(0),
                    color: ["#ff0", initialColor],
                    duration: 1000,
                    loop: true,
                    delay: delay*50
                });
                delay++;
            });
        });
    }
    animateText('ul', 'li');
});

Answer 1

您必须在anime函数中运行它。我试图像您在$.each中所做的那样循环，但我认为问题要么是添加某个时间的loop属性，要么是每个循环项。

好的是您可以访问delay中的项的索引和持续时间，如下所示：

delay: function(el, i) { return 250 + (i * 100); },

如果这能帮到你，请看这个例子。

​

$(document).ready(function() {
  function animateText(container, el) {
    var alltrans = anime({
      targets: '#parent li',
      color: [ '#008000', '#ff0', '#008000'],
      loop: true,
      duration: function(el, i) { return 50 + (i * 15); },
      delay: function(el, i) { return 50 + (i * 50); },
    });
  }
  animateText('ul', 'li');
});

/* Styles go here */

li {
  color: green;
  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.2.0/anime.js"></script>
<h1>Anime.js Runing light</h1>
<ul id="parent">
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
</ul>

​

Answer 2

克雷西米尔很好地回答了我的问题，但是我想我找到了一个更适合我的特殊情况的解决方案。原因是我的解决方案与项目数量无关。

​

// Code goes here

$(document).ready(function() {
  function animateText(container, el) {
    $(container).each(function() {
      var elIndx = 0;
      var thisContainer = $(this);
      var initialColor = $(this).find(el).css("color");
      var timeline = anime.timeline({loop:true});
      $(thisContainer).find(el).each(function() {
              timeline
                .add({
                    targets: $(this).get(0),
                    color: [initialColor, "#fc3d1b", initialColor],
                    duration: 400,
                    loop: true,
                    easing: 'easeInOutSine',
                    direction: 'alternate',
                    offset: (elIndx == 0 ? null : '-=350') // afterglow effect
                })
            elIndx++;
      });
    });
  }
  animateText('ul', 'li');
});

/* Styles go here */

li {
  color: green;
  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.2.0/anime.js"></script>

<h1>Anime.js Runing light</h1>
<ul>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
  <li>&#9608;</li>
</ul>

​