anime.js 运行灯光动画

Question

我试着做一个看起来应该像 "running lights" 的动画。

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

正如您在我的 Plunker 中看到的那样，第一个运行看起来不错，但过了一会儿，灯光变得不同步。 Obvioulsy 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

@Kremsimir 很好地回答了我的问题，但是我认为我已经找到了一个对我的特殊情况稍微好一些的解决方案。原因是我的解决方案与项目数量无关。

// 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>

anime.js 运行灯光动画

anime.js running lights animation

javascript

animation

anime.js

anime.js 运行 灯光动画

anime.js running lights animation

javascript

animation

anime.js

anime.js 运行灯光动画