日本动漫.js 跑灯动画

Posted 2023-03-10

【中文标题】日本动漫.js 跑灯动画

【英文标题】：anime.js running lights animation

【发布时间】：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

【参考方案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>