javascript - anime.js 跑灯动画

Question

我试着做一个看起来像“跑灯”的动画。

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 和 duration 中访问项目的索引:

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>