日本动漫.js 跑灯动画答案

【问题标题】：anime.js running lights animation日本动漫.js 跑灯动画
【发布时间】：2017-11-21 12:02:13
【问题描述】：

我尝试制作一个看起来像“跑灯”的动画。

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

正如您在我的 Plunker 中看到的那样，第一次运行看起来不错，但过了一会儿，灯光不同步了。 Obvioulsyanime.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');
});

【问题讨论】：

这是另一个（不工作）尝试：plnkr.co/edit/zZgCBYbVJJoh6iwBq4IY?p=preview

标签： javascript animation anime.js

【解决方案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>

【讨论】：

非常感谢（！），但我希望同时“亮”一盏灯。
我对其进行了一些编辑，只是在延迟/持续时间中调整了时间，拍摄了一堆组合:)

【解决方案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>

【讨论】：