Javascript anime.js running lights动画

我试着做一个动画，应该看起来像“流动的灯光”

正如你在我的Plunker中看到的，第一次跑步看起来不错，但过了一会儿，灯光就不同步了。obviously 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');
});

---

您必须在

anime

函数中运行它。。我试图像您在

$中那样循环。每个
都有问题，但我认为问题要么是
loop
属性增加了某个时间，要么是每个循环项都有问题

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

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

如果这对您有帮助，请参见此示例


$（文档）.ready（函数（）{
函数animateText（容器，el）{
var alltrans=动画({
目标：“#李家长”，
颜色：['008000'、'ff0'、'008000']，
循环：对，
持续时间：函数（el，i）{返回50+（i*15）；}，
延迟：函数（el，i）{返回50+（i*50）；}，
});
}
animateText（'ul'，'li'）；
});
/*样式在这里*/
李{
颜色：绿色；
显示：内联块；
}

Anime.js Running light

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


//代码在这里
$（文档）.ready（函数（）{
函数animateText（容器，el）{
$（容器）。每个（函数（）{
var-elIndx=0；
var thiscanner=$（this）；
var initialColor=$（this.find（el.css）（“color”）；
var timeline=anime.timeline（{loop:true}）；
$（thisContainer）.find（el）.each（function（）{
时间线
.添加({
目标：$（此）.get（0），
颜色：[initialColor，“#fc3d1b”，initialColor]，
持续时间：400，
循环：对，
放松：“放松，放松”，
方向：'交替'，
偏移量：（elIndx==0？null:'-=350'）//余辉效应
})
elIndx++；
});
});
}
animateText（'ul'，'li'）；
});
/*样式在这里*/
李{
颜色：绿色；
显示：内联块；
}

Anime.js Running light

█
█
█
█
█
█
█
█

这里有另一个（不起作用）尝试：非常感谢（！），但我希望同时只打开一盏灯。我对它进行了一点编辑，只需在延迟/持续时间中使用timinig，拍摄一组组合：）